html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(251, 249, 245);
    cursor:none;
}

@font-face {
    font-family: "Geist";
    src: url("./fonts/Geist-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("./fonts/Geist-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("./fonts/Geist-Medium.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("./fonts/Geist-Light.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}







/* ========================================
   SCREEN SYSTEM
======================================== */

#pageTrack {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;

    height: auto;
    min-height: 100vh;

    transform: translateY(0);

    transition:
        transform 1s cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );

    z-index: 0;
}

.siteScreen {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}



/* Background text */

#backgroundText {
    position: absolute;

    left: 0;
    top: 0vh;

    width: 100%;
    height: 100%;

    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding-left: 5vw;
    box-sizing: border-box;

    pointer-events: none;
    user-select: none;

    color: black;
    text-align: left;

    transform: none;
}

#subtitle {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding-left: 5vw;
    box-sizing: border-box;

    user-select: none;

    color: black;
    text-align: left;
}
.backgroundTitle {
    display: flex;
    align-items: baseline;

    font-family: "Geist", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(120px, 22.5vw, 360px);
    letter-spacing: -0.08em;
    line-height: 0.9;

    opacity: 1;
    white-space: nowrap;
}

.backgroundSubtitle {
    font-family: "Geist", Arial, sans-serif;
        font-size: clamp(10px, 1.5vh, 35px);
            font-weight: 100;
    letter-spacing: 0.25em;
    color: rgb(198, 147, 172);
        transition: 0.5s;
}
.backgroundSubtitle:hover {
        transition: 0.5s;
        letter-spacing:0.3em;
}

/* Swarm */

#swarmCanvas {
    position: fixed;
    inset: 0;

    display: block;
    z-index: 3;

    pointer-events: none;
}

/*
Canvas used for the blur-map letter effect.
It can remain in the stylesheet even if it is
not currently present in the HTML.
*/

#blurMapCanvas {
    position: fixed;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    pointer-events: none;
    z-index: 1;
}

/* Individual letters */

.backgroundLetter {
    position: relative;
    display: inline-block;

    margin: 0 0.015em;

    transform: scale(1);
    transform-origin: center center;

    filter: none;
    opacity: 1;

    transition:
        opacity 500ms ease,
        margin 700ms cubic-bezier(0.16, 1, 0.3, 1);

    will-change: opacity, margin;
}

/*
Keep the hovered letter visible.

Previously this was opacity: 0, which made the
letter disappear because no blurMapCanvas replacement
was actually being rendered.
*/

.backgroundLetter.is-hovered {
    transform: scale(1);
    opacity: 1 !important;

    margin-left: 0.025em;
    margin-right: 0.025em;

    z-index: 2;
}

/*
Nearby letters remain visible and sharp.
*/

.backgroundLetter.is-nearby {
    filter: none;
    opacity: 1;
}

/*
Remove previous chromatic/scratch effects.
*/

.backgroundLetter::before,
.backgroundLetter::after {
    content: none;
    display: none;
}

#variableBlurCursor {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    transform:
        translate3d(-50%, -50%, 0)
        rotate(0deg);

    transition:
        width 300ms cubic-bezier(.34, 1.56, .64, 1),
        height 300ms cubic-bezier(.34, 1.56, .64, 1),
        border-radius 300ms ease,
        transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}


#variableBlurCursor.is-down {
    width: 15px;
    height: 15px;

    border-radius: 10%;

    transform:
        translate3d(-50%, -50%, 0)
        rotate(45deg);
}



/* ========================================
   SITE NAVIGATION
   ======================================== */

:root {
    --nav-width: 4vw;
    --nav-height: 14vh;
    --nav-gap: 10vw;
    --nav-button-gap: 2vh;
}


/* =========================
   NAV
   ========================= */

#siteNav {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
}


.siteNavButtons {
    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 5vh;

    pointer-events: none;
}

.siteNavButtons2 {
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index:999;
    gap: 5vh;

    pointer-events: none;
}

.siteNavButton {
    position: relative;

    width: 5vw;
    height: calc(55vh/3);

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: black;
    color: rgb(251, 249, 245);

    text-decoration: none;

    pointer-events: auto;
    cursor: none;

    transition: width 0.3s;
}

.siteNavButton2 {
    position: relative;

    width: 5vw;
    height: calc(65vh);

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: black;
    color: rgb(251, 249, 245);

    text-decoration: none;

    pointer-events: auto;
    cursor: none;

    transition: width 0.3s;
}

.siteNavButton:hover {
    width: 6vw;
        transition:0.3s;

}
.siteNavButton2:hover {
    width: 6vw;
        transition:0.3s;

}

/* Rotated text */

.siteNavButton span {

    display: block;

    font-family: "Geist", Arial, sans-serif;
    font-size: 2.2vh;
    font-weight: 300;

    letter-spacing: 0.15em;

    white-space: nowrap;

    transform: rotate(-90deg);
}

.siteNavButton2 span {

    display: block;

    font-family: "Geist", Arial, sans-serif;
    font-size: 2.2vh;
    font-weight: 300;

    letter-spacing: 0.15em;

    white-space: nowrap;

    transform: rotate(90deg);
}





/* ========================================
   ACTIVE / CLICKED
   ======================================== */

.siteNavButton.active {

    background: none;
    color: black;
}


/* ========================================
   FACE COLLAGE
   ======================================== */

#faceCollage {
    position: fixed;

    /*
     * ORIGINAL SIZE
     *
     * The canvas was originally 80vh × 80vh.
     * This is important because the 10×8
     * collage grid is centered inside it,
     * giving the grid 8vh of vertical padding.
     */
    width: 80vh;
    height: 80vh;

    /*
     * ORIGINAL HOME POSITION
     */
    left: calc(50vw);
    top: 10vh;

    transform: translateX(0);
        transform: scale(100%);


    opacity: 0.5;

    pointer-events: none;
    z-index: 0;

    /*
     * Only animate horizontal position
     * between Home and About.
     */
    transition:
        left 1s cubic-bezier(0.77, 0, 0.175, 1),
        transform 1s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 1s ease;

    will-change: left, transform;
}


/* ========================================
   CANVAS
   ======================================== */

#faceCollageCanvas {
    display: block;
    width: 100%;
    height: 100%;
}


/* ========================================
   ABOUT
   ======================================== */

#faceCollage.faceAbout {
    left: 50%;
    top: 10vh;

    transform: translateX(-50%);

    opacity: 0;
}


/* ========================================
   WORK
   ======================================== */

#faceCollage.faceWork {
    left: 50%;
    top: 10vh;

    /*
     * X remains locked at center.
     * ONLY Y moves upward.
     */
    transform:
        translateX(-50%)
        translateY(-100vh);

    opacity: 0.0;
}

/* ========================================
   ABOUT TEXT BOX
======================================== */

#aboutTextBox {
    position: absolute;
    
    top: 11vh;
    bottom: 10vh;
    left: 4.6875vw;
    width: calc(100vw - 9.375vw);

    box-sizing: border-box;
        padding-left:1vw;
    z-index: 0;

    overflow: visible;

    pointer-events: auto;
}

#aboutTextBox2 {
    position: absolute;
    bottom: 15.5vh;
    height:43vh;
    left: 4.6875vw;
    width: calc(50vw - 9.375vw);

    box-sizing: border-box;

    z-index: 4;

    overflow: visible;
    padding:1vw;
    transition:0.3s;

    pointer-events: auto;
}

#aboutTextBox2:hover {

    height:68vh;
    z-index: 1000000 !important;
    transition:0.3s;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(251, 249, 245,0.5);
}

#aboutTypingText2 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    font-family: "Geist", Arial, sans-serif;
    font-weight: 100;
    letter-spacing: 0.25em;
    font-size: 1vw;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-word;

    text-transform: uppercase;

    color: black;

    overflow-y: auto;
    overflow-x: hidden;

    pointer-events: auto;

    scrollbar-width: thin;
    scrollbar-color: black transparent;
}

#aboutTypingText {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    font-family: "Geist", Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    font-size: 10vw;
    line-height: 1;
    text-align: justify;
    text-justify: inter-word;

    color: black;

    overflow-y: auto;
    overflow-x: hidden;

    pointer-events: auto;

    scrollbar-width: thin;
    scrollbar-color: black transparent;
}

#aboutTypingText::-webkit-scrollbar {
    width: 7px;
        cursor: none;
}

#aboutTypingText::-webkit-scrollbar-track {
    background: transparent;
        cursor: none;
}

#aboutTypingText::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 0;
        cursor: none;
    border: none;
}


#aboutTypingText a {
    pointer-events: auto;
    color: inherit;
    text-decoration: underline;
    cursor: none;
}

#aboutTypingText a:hover {
    text-decoration: underline;
}

.liveTypeCharacter {
    display: inline;
    white-space: pre;
}

#aboutTypingText br {
    display: block;
}

.subPage {

    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 1000;
    background: rgba(251, 249, 245);
}

.subPage.active {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   PROJECT CLOUD
======================================== */

#projectGrid {
    position: absolute;

    top: 0vh;
    bottom: 0vh;

    left: 0vw;
    right: 0vw;

    z-index: 5;

    overflow: visible;

    perspective: 1200px;
    perspective-origin: 50% 50%;

    pointer-events: auto;
    cursor: none;

    user-select: none;

    /* lets pointer dragging work cleanly */
    touch-action: none;
}


/* ========================================
   3D CLOUD WORLD
======================================== */

#projectCloud {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    transform-style: preserve-3d;
}


/* ========================================
   CONNECTION LINES
======================================== */

#projectCloudLinks {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}


/* ========================================
   PROJECT CARD
======================================== */

.projectCard {
    position: absolute;

    left: 50%;
    top: 50%;

    box-sizing: border-box;

    width: clamp(90px, 8vw, 150px);
    aspect-ratio: 1;

    background: rgba(251, 249, 245, 1);

    overflow: hidden;
    border-radius: 50%;
    pointer-events: auto;
    scale:1;
    cursor: none;

    opacity: 1;

    transform-origin: center center;

    transform-style: preserve-3d;

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.16, 1, .3, 1);

    will-change:
        left,
        top,
        transform,
        opacity;
}


/* ========================================
   PROJECT IMAGE
======================================== */

.projectThumb {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    user-select: none;

    -webkit-user-drag: none;
}


/* ========================================
   PROJECT HOVER
======================================== */

#projectGrid .projectCard:hover {
    opacity: 1 !important;

}


/* ========================================
   DRAGGING
======================================== */

#projectGrid.is-dragging {
    cursor: none;
}


#projectGrid.is-dragging .projectCard {
    pointer-events: none;

    transition: none;
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

    .projectCard {
        transition:
            opacity 0.1s linear;
    }

}


#uiLayer {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
}



.galleryDescriptionBox {
    position:absolute;
    top: 17.5vh;
    height:65vh;
    left: 3.8vw;
    width: calc(15vw);
    border-radius:0vw;
    padding-left:0.9375vw;
    padding-right:0.9375vw;
    padding-bottom:2vh;
    transition:0.3s;
    background: rgba(251, 249, 245,1);
    z-index:910;
}

.galleryDescriptionBox:hover {
    width: calc(40vw);
    height:65vh;
    transition:0.3s;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(251, 249, 245,1);
}



.galleryDescription {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    font-family: "Geist", Arial, sans-serif;
    font-weight: 100;
    letter-spacing: 0.1em;
    font-size: 15pt;
    line-height: 1.4;

    pointer-events: auto;

    text-align: left;
    padding-right: 1vw;

    transition: opacity .25s ease;
    cursor: none;
    scrollbar-width: thin;
    scrollbar-color: black transparent;
}

.galleryDescription::-webkit-scrollbar {
    width: 7px;
        cursor: none;

}

.galleryDescription::-webkit-scrollbar-track {
    background: transparent;
        cursor: none;

}

.galleryDescription::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 0;
    border: none;
        cursor: none;

}


.projectLink {
    color: black;
    text-decoration: underline;
    cursor: none;
    transition: opacity 0.2s ease;
}

.projectLink:hover {
    opacity: 0.6;
}

#resumeFrame {

    position: absolute;

    left: 50%;
    top: 10vh;
        transform: translateX(-50%);

    width: 41.9vw;
    height: 67.1vh;

    border: none;

    z-index: 90;

    border-radius: 1vw;
}

.galleryTrack {
    position: absolute;
    top: 17.5vh;
    bottom: 17.5vh;
    left: 21vw;
    right: 10vw;

    display: flex;
    align-items: center;
    gap: 2px;
    cursor: none;
    overflow-x: auto;
    overflow-y: hidden;

    z-index: 60;
    box-sizing: border-box;
    
    scrollbar-width: thin;
    scrollbar-color: black transparent;
}

.galleryTrack::-webkit-scrollbar {
    height: 7px;
        cursor: none;

}

.galleryTrack::-webkit-scrollbar-track {
    background: transparent;
        cursor: none;
}

.galleryTrack::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 0;
        cursor: none;
    border: none;
}

.youtubeEmbed {
    height: 65vh;
    aspect-ratio: 4/3;
    border: none;
}

.galleryMedia {

    height: 65vh;
    width:auto;
    
    flex-shrink:0;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* ========================================
   GALLERY LIGHTBOX
   ======================================== */
#lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    opacity: 0;
    pointer-events: none;

    z-index: 9999;

    transition: opacity 0.45s ease;
}

#lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

#lightboxBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(251, 249, 245);
    opacity: 1;
}

#lightboxContent {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
    pointer-events: none;
}

.galleryZoomMedia {
    position: fixed;
    z-index: 2;
}

#aboutInfoBox {
    position: absolute;

    bottom: 17.5vh;
    right: 6.5vw;

    width: 2vw;
    height: 65vh;

    box-sizing: border-box;

    z-index: 4;

    overflow: hidden;

    pointer-events: auto;

    background: rgba(251, 249, 245, 0);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transition: 0.3s ease;
}


#aboutInfoBox:hover {
    width: calc(50vw - 9.375vw);
    height: 68vh;
    background: rgba(251, 249, 245, 1);
    transition:0.3s ease;
    z-index: 5;
}


#aboutTextBox2 {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
    
    overflow: hidden;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease;
}


#aboutInfoBox:hover #aboutTextBox2 {
    opacity: 1;
    pointer-events: auto;
}

/* WORD SCROLL */

#wordScrollTrack2 {
    position: absolute;

    top: 0;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);


    pointer-events: none;
}


.wordScrollSequence2 {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex-shrink: 0;
}


.wordScrollItem2 {
    display: block;
    white-space: nowrap;

    writing-mode: vertical-lr;
    text-orientation: sideways;

    transform: rotate(180deg);

    font-family: "Geist", Arial, sans-serif;
    font-weight: 100;
    font-size: 1vw;
    line-height: 1;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: black;

    margin: 0;
    padding: 0;
}

body:has(.subPage.active) #aboutInfoBox {
    display: none;
    transition:0.3s ease;
}

#watercolorCursorCanvas {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 4;
}