/* ======================================== */
/* FONT */
/* ======================================== */

@font-face{
    font-family:"Geist";
    src:url("assets/fonts/Geist-Regular.woff2") format("woff2");
    font-weight:400;
}

@font-face{
    font-family:"Geist";
    src:url("assets/fonts/Geist-SemiBold.woff2") format("woff2");
    font-weight:600;
}

/* ======================================== */
/* ROOT */
/* ======================================== */

:root{

    --bg:#090909;

    --text:#f2f2f2;

    --muted:#888888;

    --border:#232323;

    --surface:#111111;

    --content:1180px;

    --ease:cubic-bezier(.22,1,.36,1);

}

/* ======================================== */
/* RESET */
/* ======================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;

    height:100%;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Geist",sans-serif;

    overflow:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ======================================== */
/* BACKGROUND */
/* ======================================== */

#background{

    position:fixed;

    inset:0;

    z-index:-1;

    background:
    radial-gradient(

        circle at top,

        rgba(255,255,255,.03),

        transparent 60%

    ),

    var(--bg);

}

/* ======================================== */
/* WEBSITE */
/* ======================================== */

#site{

    position:fixed;

    inset:0;

}

/* ======================================== */
/* HEADER */
/* ======================================== */

#header{

    position:fixed;

    top:40px;

    left:48px;

    z-index:20;

    opacity:0;

}

#headerWordmark{

    font-size:1.4rem;

    font-weight:600;

    letter-spacing:-.04em;

}

/* ======================================== */
/* PAGE ENGINE */
/* ======================================== */

#pages{

    width:100%;

    height:100%;

    transition:

        transform

        900ms

        var(--ease);

    will-change:transform;

}

.page{

    width:100vw;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

}

.container{

    width:min(

        var(--content),

        90vw

    );

}

.eyebrow{

    display:block;

    margin-bottom:18px;

    color:var(--muted);

    letter-spacing:.35em;

    font-size:.8rem;

    text-transform:uppercase;

}

.page h1{

    font-size:clamp(

        3rem,

        6vw,

        5rem

    );

    line-height:1;

    letter-spacing:-.05em;

    font-weight:600;

}

.page p{

    width:min(

        720px,

        100%

    );

    margin-top:28px;

    line-height:1.8;

    color:var(--muted);

}

/* ======================================== */
/* LANDING */
/* ======================================== */

#landing{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:100;

    background:transparent;

}

#heroWordmark{

    font-size:clamp(

        7rem,

        15vw,

        12rem

    );

    font-weight:600;

    letter-spacing:-.07em;

    line-height:.88;

    color:var(--text);

    transform:translateY(-42px);

}

#heroSubtitle{

    margin-top:16px;

    color:var(--muted);

    font-size:.95rem;

    letter-spacing:.55em;

    text-transform:uppercase;

}

/* ======================================== */
/* ENTER BUTTON */
/* ======================================== */

#enterButton{

    position:absolute;

    bottom:54px;

    width:34px;

    height:56px;

    border:1px solid #444;

    border-radius:999px;

    background:none;

    cursor:pointer;

}

#enterButton span{

    position:absolute;

    left:50%;

    top:10px;

    width:4px;

    height:10px;

    border-radius:999px;

    background:white;

    transform:translateX(-50%);

    animation:wheel 1.6s infinite;

}

@keyframes wheel{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,14px);

    }

}

/* ======================================== */
/* BUTTON */
/* ======================================== */

button{

    font-family:inherit;

    color:inherit;

}

/* ======================================== */
/* DRAWER */
/* ======================================== */

#drawer{

    position:fixed;

    top:0;

    right:-900px;

    width:min(

        900px,

        100vw

    );

    height:100vh;

    background:#0d0d0d;

    border-left:1px solid var(--border);

    z-index:200;

}

/* ======================================== */
/* ANIMATION LAYER */
/* ======================================== */

#animationLayer{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:9999;

}

/* ======================================== */
/* MOBILE */
/* ======================================== */

@media(max-width:768px){

    #header{

        left:24px;

        top:24px;

    }

    #heroWordmark{

        font-size:4.8rem;

    }

    .page{

        padding:32px;

    }

}