:root{
    --bg:#050505;
    --text:#ffffff;
    --muted:#9b9b9b;
    --gold:#E5AF58;
    --blue:#37376E;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Space Grotesk',sans-serif;
    overflow:hidden;
}

/* =========================
   Hero
========================= */

.hero{
    position:relative;
    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;
}

.hero-inner{

    width:100%;
    max-width:900px;

    text-align:center;

    z-index:10;

    transition:transform .25s ease-out;

    will-change:transform;

}

/* =========================
   Logo
========================= */

.logo{

    width:260px;

    display:block;

    margin:auto;

    position:relative;

    z-index:10;

    transition:
        transform .25s ease-out,
        filter .35s ease;

    transform-style:preserve-3d;

    filter:
        drop-shadow(0 0 12px rgba(229,175,88,.08))
        drop-shadow(0 0 40px rgba(255,255,255,.03));

}

/* =========================
   Eyebrow
========================= */

.eyebrow{

    display:block;

    margin-top:40px;

    color:var(--gold);

    font-size:.8rem;

    letter-spacing:.45em;

    text-transform:uppercase;

}

/* =========================
   Title
========================= */

h1{

    margin-top:26px;

    font-size:clamp(3rem,5vw,5rem);

    font-weight:700;

    line-height:1.05;

    letter-spacing:-0.04em;

}

h1 span{

    display:block;

}

/* =========================
   Paragraph
========================= */

p{

    max-width:500px;

    margin:24px auto 0;

    color:var(--muted);

    font-size:1.05rem;

    line-height:1.8;

}

/* =========================
   Status
========================= */

.status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:42px;

    padding:14px 28px;

    border:1px solid rgba(229,175,88,.25);

    border-radius:999px;

    font-size:.8rem;

    letter-spacing:.3em;

    text-transform:uppercase;

}

/* =========================
   Aurora
========================= */

.aurora{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(229,175,88,.12),
    transparent 35%),

    radial-gradient(circle at 80% 80%,
    rgba(55,55,110,.18),
    transparent 40%);

    filter:blur(90px);

    transform:scale(1.2);

    z-index:0;

}

/* =========================
   Noise
========================= */

.noise{

    position:fixed;

    inset:0;

    background:url("assets/noise.webp");

    opacity:.03;

    pointer-events:none;

    z-index:1;

}

/* =========================
   Mouse Light
========================= */

#mouse-light{

    position:fixed;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(229,175,88,.18),
    transparent 70%);

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

    filter:blur(24px);

    pointer-events:none;

    z-index:2;

}

/* =========================
   Responsive
========================= */

@media (max-width:768px){

    .hero{
        padding:24px;
    }

    .logo{
        width:180px;
    }

    .eyebrow{
        font-size:.72rem;
        letter-spacing:.35em;
    }

h1{

    margin-top:32px;

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

    gap:10px;

}

h1 span{

    display:block;

    width:max-content;

    max-width:100%;

    font-size:clamp(3rem,5vw,4.8rem);

    font-weight:700;

    line-height:1;

    letter-spacing:-0.05em;

    white-space:nowrap;

}

    p{
        font-size:.95rem;
    }

}
#mouse-light{

    position:fixed;

    left:50%;
    top:50%;

    width:700px;
    height:700px;

    border-radius:50%;

    pointer-events:none;

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

    z-index:2;

    background:
        radial-gradient(circle,
            rgba(229,175,88,.22) 0%,
            rgba(229,175,88,.12) 25%,
            rgba(229,175,88,.05) 45%,
            transparent 75%);

    filter:blur(70px);

    mix-blend-mode:screen;

}
/* ==========================================
   Aurora
========================================== */

.aurora{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    mix-blend-mode:screen;

}

.blob-1{

    width:550px;

    height:550px;

    background:#E5AF58;

    opacity:.14;

    top:-180px;

    left:-120px;

    animation:blobOne 18s ease-in-out infinite alternate;

}

.blob-2{

    width:700px;

    height:700px;

    background:#37376E;

    opacity:.18;

    right:-250px;

    bottom:-250px;

    animation:blobTwo 22s ease-in-out infinite alternate;

}

.blob-3{

    width:420px;

    height:420px;

    background:#ffffff;

    opacity:.04;

    top:45%;

    left:40%;

    animation:blobThree 28s linear infinite;

}

@keyframes blobOne{

    from{

        transform:
        translate(0,0)
        scale(1);

    }

    to{

        transform:
        translate(90px,-60px)
        scale(1.18);

    }

}

@keyframes blobTwo{

    from{

        transform:
        translate(0,0)
        scale(1);

    }

    to{

        transform:
        translate(-120px,60px)
        scale(1.25);

    }

}

@keyframes blobThree{

    from{

        transform:
        rotate(0deg)
        translateX(30px);

    }

    to{

        transform:
        rotate(360deg)
        translateX(30px);

    }

}

@keyframes auroraMove{

    0%{
        transform:
            translate3d(-4%,-3%,0)
            rotate(0deg)
            scale(1);
    }

    50%{
        transform:
            translate3d(3%,2%,0)
            rotate(3deg)
            scale(1.08);
    }

    100%{
        transform:
            translate3d(-2%,4%,0)
            rotate(-2deg)
            scale(1.12);
    }

}
/* ==========================================
   Reveal Animation
========================================== */

.reveal{

    opacity:0;

    transform:translateY(35px);

    filter:blur(10px);

    animation:reveal 1s forwards;

    animation-timing-function:cubic-bezier(.19,1,.22,1);

}

.reveal-1{

    animation-delay:.2s;

}

.reveal-2{

    animation-delay:.45s;

}

.reveal-3{

    animation-delay:.7s;

}

.reveal-4{

    animation-delay:.95s;

}

.reveal-5{

    animation-delay:1.2s;

}

@keyframes reveal{

    to{

        opacity:1;

        filter:blur(0);

        transform:translateY(0);

    }

}
#cursor-ring{

    position:fixed;

    left:0;
    top:0;

    width:22px;
    height:22px;

    border-radius:50%;

    border:1.5px solid rgba(229,175,88,.85);

    background:transparent;

    box-shadow:
        0 0 18px rgba(229,175,88,.18);

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

    pointer-events:none;

    z-index:9999;

    opacity:0;

    transition:
        width .25s cubic-bezier(.19,1,.22,1),
        height .25s cubic-bezier(.19,1,.22,1),
        border-color .25s,
        box-shadow .25s,
        opacity .25s;

}
#cursor-ring.active{

    width:72px;
    height:72px;

    background:transparent;

    border:1.5px solid rgba(229,175,88,1);

    box-shadow:
        0 0 28px rgba(229,175,88,.35);

}
body{
    cursor:none;
}
.status{

    color:#fff;
    text-decoration:none;

    position:relative;

    overflow:hidden;

    transition:
        color .35s ease,
        border-color .35s ease,
        transform .25s ease;
            cursor:none;


}
.status:visited{
    color:#fff;
}

.status:hover{
    color:#fff;
}
.status:focus,
.status:focus-visible{

    outline:none;

    box-shadow:none;

}

.status::before{

    content:"";

    position:absolute;

    inset:0;

    background:#E5AF58;

    transform:translateX(-101%);

    transition:transform .45s cubic-bezier(.19,1,.22,1);

    z-index:-1;

}

.status.success{

    color:#111;

    border-color:#E5AF58;

}

.status.success::before{

    transform:translateX(0);

}
.status.success{

    animation:pulse .5s ease;

}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }

    100%{
        transform:scale(1);
    }

}