@import url('fonts/clash-display.css');

:root {
    --main-black: #111112;
    --main-purple: #8F4EFF;
    --main-white: #F4F4ED;
    --secondary-black: #222222;
    --light-purple: #AE9CFF;
    --subheader-purple: #E5E0FC;
    --bg-alt-purple: #120E15;
    --btn-hover: #6e35d1;
}

/* Temp bg colors
#8f4eff29
#d827a03b
#27d8943b
#9127d83b
#063a0e75 - was overlay
*/

* {
    box-sizing: border-box;
}

body {
    font-family: ClashDisplay-Variable, Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    background-color: var(--main-black);
    color: var(--main-white);
    margin: 0px;
}

#wrapper {
    position: relative;
    width: 100%;
    max-width: 2560px;
    height: auto;
    margin: 0px auto;
}

.content-wrapper {
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin: 0px auto;
    padding: 0px 20px;
}

/* Text, Buttons */

/* available axes:
'wght' (range from 200.0 to 700.0 
regular 400
medium 500
semibold 600
bold 700
*/

/* .lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
} */

h1 {
    font-size: 36px;
    font-weight: 600;
    color: var(--main-purple);
}

h2 {
    font-size: 36px;
    font-weight: 500;
}

h3 {
    font-size: 24px;
    font-weight: 400;
}

h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--light-purple);
    margin: 0px;
}

p {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.p-cs-nav {
    font-family: ClashDisplay-Variable;
    font-size: 14px;
    color: var(--light-purple);
    margin: 0px;
}

.p-20 {
    font-family: ClashDisplay-Variable;
    font-size: 16px;
    margin: 0px;
}

a {
    color: var(--main-white);
    text-decoration: none;
}

.cs-h2 {
    color: var(--main-purple);
    font-weight: 600;
    margin: 5px;
}

.cs-h3 {
    color: var(--subheader-purple);
    margin: 0px;
}

.btn-main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--main-purple);
    border-radius: 8px;
    font-size: 16px;
    gap: 10px;
    transition: background-color 0.3s ease;
}
.btn-main:hover {
    background-color: var(--btn-hover);
}

.btn-alt {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--main-purple);
    border-radius: 25px;
    font-family: ClashDisplay-Variable;
    font-size: 16px;
    color: var(--light-purple);
    margin: 0px;
    transition: background-color, border, color 0.2s ease;
}
.btn-alt:hover {
    background-color: var(--secondary-black);
    border: 1px solid var(--light-purple);
    color: var(--subheader-purple);
}

/* End Text, Buttons */

/* Header */

header {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    background-color: var(--main-black);
    z-index: 99999;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    z-index: 99988;
}

#toTop, #toBottom {
    position: relative;
    width: 40px;
    height: 30px;
    background-color: var(--main-purple);
    border-radius: 6px;
    cursor: pointer;
    & img {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    &:hover {
        background-color: var(--btn-hover);
    }
}

#header {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

#desktop-nav {
    display: none;
}

.nav-link {
    font-variation-settings: 'wght' 500.0;
    font-size: 16px;
}

.d-nav {
    position: relative;
    display: flex;
    padding-bottom: 8px;
}

.split-frame {
    display: inline-block;
    overflow: hidden;
}

.split-text {
    display: inline-block;
    text-shadow: 0px 1.2em 0px var(--main-white);
    /* transition: all 0.3s ease; */
}

.d-nav-line {
    position: absolute;
    width: 0%;
    height: 4px;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: var(--main-purple);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.d-nav.active > .d-nav-line {
    width: 100%;
}

.d-nav:hover > .d-nav-line {
    width: 100%;
}

.logo-link {
    line-height: 0px;
}

#menuClose, #menuOpen {
    cursor: pointer;
}

#menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 260px;
    height: 100vh;
    z-index: 99998;
    background-color: var(--main-black);
    transition: 300ms ease-out;
}

#menu-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    margin-top: 100px;
}

#menu-nav .nav-link {
    display: flex;
    width: 100%;
    height: auto;
    padding: 14px 20px;
}

#menu-nav .nav-link:hover {
    background-color: #313134;
    color: var(--light-purple);
}

#overlayShadow {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.25);
    z-index: 99988;
}

#menu.show {
    right: 0;
}

/* End Header */

/* Main */

#main {
    width: 100%;
    height: auto;
    padding: 60px 0px 0px 0px;
}

section {
    width: 100%;
    height: auto;
}

/* Hero Section */

#heroSection {
    position: relative;
    display: flex;
    height: 55vh;
    height: 55svh;
    justify-content: center;
    align-items: center;
    background-color: #8f4eff29;
}

#gradient{
    position: absolute;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    height: auto;
}

#lee-raver {
    width: 100%;
    height: auto;
    /* width: 676px;
    height: 133px; */
}


/* End Hero Section */

/* Project Highlights */

#projectHighlights {
    display: flex;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--main-black);
    padding: 20px 0px 80px 0px;
    & h2 {
        text-align: center;
    }
}

.project-highlights {
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.project-thumbnail {
    position: relative;
    width: 360px;
    aspect-ratio: 460/335;
    flex-shrink: 0;
    & > h3 {
        position: absolute;
        right: 0px;
        bottom: 8px;
        margin: 0px;
        font-size: 16px;
        font-weight: 400;
        transition: all 0.22s ease;
    }
    &:hover > h3 {
        color: var(--light-purple);
    }
}

.project-mask {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    background-color: #6c5594fa;
    mask-image: url("/images/project-thumbnail-mask.svg");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
}

.thumbnail-outline {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    /* aspect-ratio: 460/335; */
    height: 100%;
}

.thumbnail-clip {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(195,181,255,0.95);
    padding: 40px 40px 60px 40px;
    clip-path: circle(0% at 25% 25%);
    transition: clip-path 0.25s ease;
    & p {
        color: var(--main-black);
        font-family: ClashDisplay-Variable;
        font-size: 20px;
        font-weight: 500;
        padding-bottom: 0px;
    }
    &.tc-cs {
        padding: 0px;
    }
}
.project-thumbnail:hover .thumbnail-clip {
    clip-path: circle(100% at 25% 25%);
}


.thumbnail-clip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thumbnail-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0px;
    & h3 {
        color: var(--main-black);
        font-size: 24px;
        font-weight: 600;
        margin: 0px;
    }
    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 20px;
        margin: 0px;
        & li {
            color: var(--secondary-black);
            margin: 0px 0px 0px 16px;
            font-size: 16px;
            font-weight: 500;
        }
    }
}

.thumbnail-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* End Project Highlights */

/* Home About */

#homeAbout {
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 20vh 20px 15vh 20px;
    background-color: var(--main-black);
}

.homeAbout-container {
    width: 100%;
    max-width: 670px;
    height: auto;
    & h2 {
        text-align: center;
    }
}

.icon-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transform: scale(0.6);
}

/* End Home About */

/* End Main */

/* About */

#aboutSection {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding-top: 100px;
    & .btn-main {
        display: inline-flex;
    }
}

.about-contact-wrapper {
    text-align: center;
}

.about-contact {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 1em;
    & * {
        margin: 0px;
    }
}

.h1-about {
    margin: 0.5em 0px;
}

.about-img {
    width: 50%;
    height: auto;
    border-radius: 50%;
}

/* End About */


/* Begin Categories */
/* Web Dev */

#headerSection {
    text-align: center;
}

#caseStudies {
    padding: 0px 6% 80px 6%;
}

.case-study {
    display: flex;
    width: 100%;
    max-width: 1400px;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 30px 0px;
    border-bottom: 1px solid var(--light-purple);
    margin: auto;
    & * {
        margin: 0px;
    }
}

.cs-details {
    display: flex;
    max-width: 360px;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
}

.cs-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cs-btn-flex {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
}

.a-cs {
    transition: all 0.3s ease;
}
.a-cs:hover {
    color: var(--light-purple);
    /* text-decoration: underline; */
}

.cs-header ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-left: 20px;
    & li {
        color: var(--light-purple);
    }
}

/* End Web Dev */

/* Non-Digital */

.nd-section {
    padding: 60px 20px;
    & h2 {
        color: var(--main-purple);
        font-weight: 600;
    }
    &:nth-child(2n) {
        background-color: var(--bg-alt-purple);
    }
    &:last-child {
        padding-bottom: 100px;
    }
}

.nd-container {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: auto;
}

.nd-img {
    display: block;
    width: 90%;
    max-width: 800px;
    height: auto;
    margin: auto;
    background-color: #6c5594fa;
}

.nd-header-p {
    max-width: 800px;
    padding: 0px 20px;
    margin: auto;
    text-align: left;
    transform: translate(0%, -2em);
}

/* End Non-Digital */

/* End Categories */

/* Case Studies */

#introSection {
    position: relative;
    display: flex;
    height: auto;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--secondary-black);
}

.project-banner {
    width: 100%;
    max-width: 1000px;
    height: auto;
    background-color: #6c5594fa;
}
.pb-eq {
    max-width: 600px;
}
.csNav {
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px 0px 20px;
}
.csNav:last-child {
    margin-bottom: 60px;
}

.cs-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-container {
    width: 100%;
    max-width: 840px;
    padding: 0px 20px;
    margin: auto;
}
.cs-container p {
    margin: 0px;
}

#contents {
    & .p-20 {
        margin-bottom: 5px;
    }
}

.contents-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-purple);
    margin-bottom: 24px;
}

#projectOverview {
    padding: 40px 0px 80px 0px;
}

.po-flexbox {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.subsection-380 {
    display: flex;
    max-width: 380px;
    flex-direction: column;
    gap: 8px;
}

.cs-section {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--secondary-black);
}

.subsection-600 {
    display: flex;
    max-width: 600px;
    flex-direction: column;
    gap: 8px;
}

#competitorResearch {
    padding: 80px 0px 30px 0px;
}

#targetAudience {
    background-color: var(--bg-alt-purple);
    padding: 30px 0px 60px 0px;
}

.personas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 60px 0px 60px 0px;
}
.personas img {
    max-width: 380px;
    height: auto;
}

#paperSketches {
    padding: 80px 0px 30px 0px;
}

.flex-section {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}

.placeholder-img {
    width: 360px;
    height: 350px;
    background-color: #6c5594fa;
}

.project-img {
    display: block;
    width: 360px;
    height: auto;
    background-color: #6c5594fa;
}

.project-img-large {
    display: block;
    width: 100%;
    height: auto;
    background-color: #6c5594fa;
    margin: 80px 0px;
}

.no-bg {
    background-color: rgba(0,0,0,0);
}

.flex-source-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.source-img {
    display: block;
}

#lowfiSketches {
    background-color: var(--bg-alt-purple);
    padding: 30px 0px 60px 0px;
    & .flex-section {
        align-items: center;
        margin: 60px 0px;
        & .placeholder-img {
            height: 460px;
        }
    }
}

#hifiSketches {
    padding: 80px 0px 60px 0px;
    & .flex-section:nth-child(n+2) {
        align-items: center;
        margin: 60px 0px;
        & .placeholder-img {
            height: 460px;
        }
    }
}

#coding {
    padding-top: 60px;
    & .flex-section {
        margin-bottom: 60px;
    }
    & .btn-main {
        align-self: flex-start;
        margin-top: 8px;
    }
}

.m-top-40 {
    margin-top: 40px;
}

.parallax-banner {
    width: 100%;
    height: 50vh;
    background-color: #6c5594fa;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#the-repot-parallax {
    background-image: url("/images/the-repot/the-repot-home.webp");
}

#epiquest-parallax {
    background-image: url("/images/epiquest/epiquest-large.webp");
}

#takeaways {
    padding: 80px 0px;
}

.subsection-max {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.takeaways-flexbox {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#nextSteps {
    padding-bottom: 80px;
}


/* End Case Studies */

/* Footer */

#footerSection {
    background: radial-gradient(146.19% 78.03% at 50% -5.3%, rgba(143, 78, 255, 0.00) 35.1%, #8F4EFF 100%);
}

.footer-spacer {
    width: 100%;
    height: 200px;
}

footer {
    width: 100%;
    max-width: 1620px;
    height: 700px;
    margin: 0px auto;
    padding: 20px;
}

.footer-clip {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--secondary-black);
    mask-image: url("/images/footer-clip-mobile.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    & p, & a {
        font-family: ClashDisplay-Variable;
    }
    & p {
        margin: 20px 0px 14px 0px;
    }
    & > img {
        width: 86%;
        max-width: 676px;
        height: auto;
    }
}

.footer-logo-link {
    width: 86%;
    max-width: 676px;
    height: auto;
    & > img {
        width: 100%;
        height: auto;
    }
}

.footer-nav {
    display: flex;
    width: 80%;
    justify-content: space-evenly;
}

/* End Footer */

@media screen and (min-width:700px) {
    header {
        height: 80px;
    }
    h1 {
        font-size: 96px;
    }
    h2 {
        font-size: 48px;
    }
    h3 {
        font-size: 32px;
    }
    p {
        font-size: 20px;
    }
    .p-cs-nav {
        font-size: 16px;
    }
    .p-20 {
        font-size: 20px;
    }
    .btn-main {
        font-size: 20px;
    }
    #menu {
        max-width: 470px;
    }
    #main {
        padding: 80px 0px 0px 0px;
    }
    .case-study {
        flex-direction: row;
        justify-content: space-between;
        /* &:nth-child(2n) {
            flex-direction: row-reverse;
        } */
    }
    .cs-details {
        max-width: 660px;
    }
    .flex-section {
        flex-direction: row;
        justify-content: space-between;
    }
    #hifiSketches .flex-section:nth-child(2) {
        flex-direction: row-reverse;
    }
    .takeaways-flexbox {
        flex-direction: row;
    }
    .icon-flexbox {
        transform: scale(1);
    }
    .footer-clip {
        mask-image: url("/images/footer-clip-tablet.svg");
    }
}

@media screen and (min-width: 1000px) {
    header {
        height: 100px;
    }
    #desktop-nav {
        display: flex;
    }
    #menuOpen {
        display: none;
    }
    #menu {
        display: none;
    }
    #main {
        padding: 100px 0px 0px 0px;
    }
    .project-thumbnail {
        width: 460px;
        /* height: 335px; */
    }
    .thumbnail-header {
        & h3 {
            font-size: 32px;
        }
        & ul {
            & li {
                font-size: 20px;
            }
        }
    }
    .thumbnail-clip {
        & p {
            font-size: 24px;
        }
    }

    #menuClose {
        display: none;
    }
    #overlayShadow {
        display: none;
    }
    .footer-clip {
        mask-image: url("/images/footer-clip.svg");
    }
    #aboutSection {
        flex-direction: row;
        align-items: flex-start;
    }
    .about-contact {
        align-items: flex-start;
    }
    .about-contact-wrapper {
        text-align: left;
    }
}




.hide {
    display: none;
}