:root {
    --black: #050505;
    --cream: #eee9df;
    --muted: #8d8981;
    --gold: #b99a63;

    --serif: "Cormorant Garamond", serif;
    --sans: "Inter", sans-serif;
}


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

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


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


body {
    background: var(--black);
    color: var(--cream);
    font-family: var(--sans);
    overflow: hidden;
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    width: 100vw;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 25% 48%,
            rgba(75, 59, 43, 0.10),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 75% 50%,
            rgba(65, 48, 31, 0.045),
            transparent 32%
        ),
        #050505;
}


/* =========================================
   MOUSE LIGHT
========================================= */

.mouse-light {
    position: fixed;

    width: 520px;
    height: 520px;

    left: 0;
    top: 0;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

    opacity: 0;

    background:
        radial-gradient(
            circle,

            rgba(232, 204, 163, 0.11) 0%,

            rgba(210, 176, 125, 0.075) 18%,

            rgba(182, 143, 88, 0.045) 34%,

            rgba(145, 108, 64, 0.018) 52%,

            transparent 72%
        );

    filter: blur(45px);

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

    will-change:
        transform,
        opacity;

    transition:
        opacity 1.2s ease;
}


/* =========================================
   AMBIENT LIGHT
========================================= */

.ambient-light {
    position: absolute;

    width: 65vw;
    height: 65vw;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(140px);

    opacity: 0.12;

    z-index: 2;
}


.ambient-light-1 {
    left: -24vw;
    top: 10vh;

    background:
        rgba(177, 142, 91, 0.24);

    animation:
        ambientOne
        18s
        ease-in-out
        infinite
        alternate;
}


.ambient-light-2 {
    right: -28vw;
    top: 0;

    background:
        rgba(120, 94, 62, 0.10);

    animation:
        ambientTwo
        22s
        ease-in-out
        infinite
        alternate;
}


@keyframes ambientOne {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(8vw, -4vh, 0)
            scale(1.16);
    }
}


@keyframes ambientTwo {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-7vw, 5vh, 0)
            scale(1.2);
    }
}


/* =========================================
   LIGHT BEAM
========================================= */

.light-beam {
    position: absolute;

    width: 30vw;
    height: 150vh;

    left: 17vw;
    top: -22vh;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(220, 195, 158, 0.025) 35%,
            rgba(220, 195, 158, 0.045) 50%,
            rgba(220, 195, 158, 0.025) 65%,
            transparent 100%
        );

    transform:
        rotate(14deg);

    filter: blur(35px);

    pointer-events: none;

    z-index: 3;

    animation:
        beamMovement
        20s
        ease-in-out
        infinite
        alternate;
}


@keyframes beamMovement {

    0% {
        transform:
            translateX(-3vw)
            rotate(14deg);
    }

    100% {
        transform:
            translateX(7vw)
            rotate(14deg);
    }
}


/* =========================================
   PARTICLES
========================================= */

.particles {
    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    opacity: 0.18;
}


.particles::before,
.particles::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(238, 220, 190, 0.5) 0,
            rgba(238, 220, 190, 0.5) 0.55px,
            transparent 1px
        );

    background-size:
        180px 180px;

    animation:
        particlesFloat
        34s
        linear
        infinite;
}


.particles::after {
    background-size:
        270px 270px;

    opacity: 0.3;

    animation-duration:
        48s;

    animation-direction:
        reverse;
}


@keyframes particlesFloat {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(30px, -40px, 0);
    }
}


/* =========================================
   BRAND
========================================= */

.brand {
    position: absolute;

    top: 42px;
    left: 5vw;

    z-index: 30;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: 0.38em;

    text-transform: uppercase;

    color:
        rgba(238, 233, 223, 0.75);

    opacity: 0;

    animation:
        fadeDown
        1.5s
        ease
        forwards;
}


/* =========================================
   PORTRAIT AREA
========================================= */

.portrait-area {
    position: absolute;

    left: 2vw;
    bottom: 0;

    width: 48vw;
    height: 90vh;

    z-index: 10;

    transform:
        translate3d(
            var(--portrait-x, 0px),
            var(--portrait-y, 0px),
            0
        );

    transition:
        transform
        0.15s
        ease-out;
}


/* =========================================
   HALO
========================================= */

.portrait-glow {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 78%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(220, 194, 155, 0.20) 0%,

            rgba(194, 160, 112, 0.14) 22%,

            rgba(155, 121, 80, 0.075) 42%,

            rgba(110, 83, 54, 0.03) 60%,

            transparent 78%
        );

    filter:
        blur(58px);

    opacity: 0.9;

    pointer-events: none;

    z-index: 1;

    transition:
        transform 1.2s ease,
        opacity 1.2s ease;
}


.portrait-glow::after {
    content: "";

    position: absolute;

    left: 25%;
    top: 5%;

    width: 50%;
    height: 52%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(238, 222, 194, 0.14) 0%,

            rgba(211, 181, 139, 0.075) 28%,

            rgba(170, 135, 91, 0.035) 48%,

            transparent 73%
        );

    filter:
        blur(34px);
}


/* =========================================
   PORTRAIT LIGHT
========================================= */

.portrait-light {
    position: absolute;

    left: 30%;
    top: 5%;

    width: 30%;
    height: 72%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232, 211, 177, 0.05),
            transparent
        );

    filter:
        blur(38px);

    transform:
        rotate(15deg);

    pointer-events: none;

    z-index: 2;
}


/* =========================================
   PRABHUPADA
========================================= */

.portrait {
    position: absolute;

    left: 10%;
    bottom: 0;

    width: 80%;

    height: auto;

    max-height: 84vh;

    object-fit: contain;

    object-position: bottom center;

    filter:
        brightness(0.86)
        contrast(1.08)
        sepia(0.035);

    opacity: 0;

    z-index: 5;

    animation:
        portraitReveal
        2.2s
        cubic-bezier(.16, 1, .3, 1)
        0.35s
        forwards;
}


@keyframes portraitReveal {

    from {
        opacity: 0;

        transform:
            translateY(40px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   NAME
========================================= */

.portrait-caption {
    position: absolute;

    left: 6%;
    bottom: 13%;

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 8px;

    letter-spacing: 0.28em;

    line-height: 1.5;

    color:
        rgba(238, 233, 223, 0.48);

    z-index: 10;

    opacity: 0;

    animation:
        fadeUp
        1.5s
        ease
        1s
        forwards;
}


/* =========================================
   CONTENT
========================================= */

.content {
    position: absolute;

    z-index: 20;

    left: 52%;
    top: 50%;

    width: 43vw;

    max-width: 760px;

    transform:
        translateY(-50%);

    padding-right: 3vw;
}


/* =========================================
   TITLE
========================================= */

h1 {
    font-family:
        var(--serif);

    font-size:
        clamp(
            64px,
            7vw,
            125px
        );

    font-weight: 400;

    line-height: 0.84;

    letter-spacing: -0.045em;

    white-space: nowrap;

    color:
        var(--cream);

    opacity: 0;

    animation:
        fadeUp
        1.5s
        cubic-bezier(.16, 1, .3, 1)
        0.65s
        forwards;
}


h1 span {
    color:
        var(--gold);
}


/* =========================================
   GOLD LINE
========================================= */

.gold-line {
    width: 72px;

    height: 1px;

    margin-top: 38px;
    margin-bottom: 32px;

    background:
        var(--gold);

    transform-origin:
        left;

    transform:
        scaleX(0);

    animation:
        lineReveal
        1.2s
        ease
        1.2s
        forwards;
}


@keyframes lineReveal {

    to {
        transform:
            scaleX(1);
    }
}


/* =========================================
   DESCRIPTION
========================================= */

.description {
    max-width: 650px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            22px,
            2vw,
            32px
        );

    font-weight: 400;

    line-height: 1.15;

    color:
        rgba(238, 233, 223, 0.88);

    opacity: 0;

    animation:
        fadeUp
        1.5s
        ease
        1s
        forwards;
}


.description strong {
    font-weight: 500;

    color:
        var(--cream);
}


/* =========================================
   PLATFORM INFORMATION
========================================= */

.platform-info {
    margin-top: 42px;

    display: flex;

    flex-direction: column;

    gap: 30px;

    max-width: 650px;

    opacity: 0;

    animation:
        fadeUp
        1.5s
        ease
        1.25s
        forwards;
}


.platform-section {
    max-width: 620px;
}


.platform-section h2 {
    margin-bottom: 8px;

    font-family:
        var(--serif);

    font-size: 24px;

    font-weight: 500;

    line-height: 1.1;

    color:
        var(--cream);

    letter-spacing: -0.01em;
}


.platform-section p {
    max-width: 620px;

    font-family:
        var(--sans);

    font-size: 12px;

    font-weight: 300;

    line-height: 1.65;

    letter-spacing: 0.015em;

    color:
        rgba(238, 233, 223, 0.56);
}


.platform-features {
    margin-top: 11px;

    font-family:
        var(--sans);

    font-size: 9px;

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        rgba(185, 154, 99, 0.78);
}


.platform-features span {
    margin: 0 7px;

    color:
        rgba(185, 154, 99, 0.38);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(22px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeDown {

    from {
        opacity: 0;

        transform:
            translateY(-15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;
    }


    body {
        overflow-x: hidden;
        overflow-y: auto;
    }


    .hero {
        width: 100%;
        min-height: 100svh;
        height: auto;

        overflow: hidden;

        padding-bottom: 80px;

        background:
            radial-gradient(
                ellipse at 50% 12%,
                rgba(75, 59, 43, 0.13),
                transparent 35%
            ),
            #050505;
    }


    /* -----------------------------------------
       BACKGROUND LIGHT
    ----------------------------------------- */

    .mouse-light {
        display: none;
    }


    .ambient-light {
        width: 100vw;
        height: 100vw;

        filter: blur(100px);
    }


    .ambient-light-1 {
        left: -45vw;
        top: 5vh;

        opacity: 0.13;
    }


    .ambient-light-2 {
        right: -50vw;
        top: 30vh;

        opacity: 0.08;
    }


    .light-beam {
        width: 80vw;

        height: 120vh;

        left: 10vw;
        top: -25vh;

        opacity: 0.45;
    }


    .particles {
        opacity: 0.10;
    }


    /* -----------------------------------------
       BRAND
    ----------------------------------------- */

    .brand {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        padding-top: 30px;

        padding-left: 7vw;

        font-size: 9px;

        letter-spacing: 0.32em;

        z-index: 30;
    }


    /* -----------------------------------------
       PRABHUPADA
    ----------------------------------------- */

    .portrait-area {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;

        height: 48svh;

        min-height: 330px;
        max-height: 500px;

        margin-top: 35px;

        transform: none !important;

        opacity: 1;

        z-index: 10;
    }


    /* -----------------------------------------
       HALO
    ----------------------------------------- */

    .portrait-glow {
        left: 5%;

        top: 0;

        width: 90%;

        height: 92%;

        filter:
            blur(52px);

        opacity: 0.88;

        transform: scale(1) !important;
    }


    .portrait-glow::after {
        left: 24%;

        top: 3%;

        width: 52%;

        height: 60%;

        filter:
            blur(30px);
    }


    /* -----------------------------------------
       PORTRAIT LIGHT
    ----------------------------------------- */

    .portrait-light {
        left: 30%;

        top: 2%;

        width: 40%;

        height: 90%;

        opacity: 0.7;

        filter:
            blur(32px);
    }


    /* -----------------------------------------
       PRABHUPADA IMAGE
    ----------------------------------------- */

    .portrait {
        position: absolute;

        left: 50%;
        bottom: 0;

        width: auto;

        height: 100%;

        max-height: none;

        max-width: 92vw;

        object-fit: contain;

        object-position: bottom center;

        transform:
            translateX(-50%);

        filter:
            brightness(0.78)
            contrast(1.08)
            sepia(0.025);

        opacity: 0;

        animation:
            portraitRevealMobile
            2s
            cubic-bezier(.16, 1, .3, 1)
            0.25s
            forwards;
    }


    @keyframes portraitRevealMobile {

        from {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(30px)
                scale(0.97);
        }

        to {
            opacity: 1;

            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }
    }


    /* -----------------------------------------
       NAME BELOW PORTRAIT
    ----------------------------------------- */

    .portrait-caption {
        position: absolute;

        left: 0;

        bottom: -58px;

        width: 100%;

        max-width: 100%;

        padding-left: 5vw;
        padding-right: 5vw;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        transform: none;

        gap: 4px;

        font-size: 7px;

        letter-spacing: 0.20em;

        line-height: 1.5;

        color:
            rgba(238, 233, 223, 0.62);

        z-index: 10;

        opacity: 0;

        animation:
            fadeUp
            1.3s
            ease
            1s
            forwards;

        overflow-wrap: break-word;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .content {
        position: relative;

        left: auto;
        top: auto;

        width: auto;

        max-width: none;

        margin:
            105px
            8vw
            0;

        padding: 0;

        transform: none;

        z-index: 20;

        text-align: center;
    }


    /* -----------------------------------------
       COMING SOON
    ----------------------------------------- */

    h1 {
        width: 100%;

        font-size:
            clamp(
                48px,
                15vw,
                78px
            );

        line-height: 0.86;

        letter-spacing: -0.045em;

        white-space: normal;

        text-align: center;
    }


    /* -----------------------------------------
       GOLD LINE
    ----------------------------------------- */

    .gold-line {
        width: 58px;

        height: 1px;

        margin-top: 25px;
        margin-bottom: 25px;

        margin-left: auto;
        margin-right: auto;

        transform-origin: center;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .description {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(
                24px,
                7vw,
                31px
            );

        line-height: 1.08;

        text-align: center;
    }


    /* -----------------------------------------
       PLATFORM
    ----------------------------------------- */

    .platform-info {
        margin-top: 42px;

        gap: 34px;

        max-width: 100%;

        text-align: center;
    }


    .platform-section {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }


    .platform-section h2 {
        margin-bottom: 8px;

        font-size: 23px;

        line-height: 1.05;

        text-align: center;
    }


    .platform-section p {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size: 11px;

        line-height: 1.65;

        text-align: center;
    }


    .platform-features {
        margin-top: 10px;

        font-size: 8px;

        letter-spacing: 0.12em;

        text-align: center;
    }


    .platform-features span {
        margin:
            0 5px;
    }
}


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

@media (max-width: 500px) {

    .brand {
        padding-top: 26px;

        padding-left: 7vw;

        font-size: 8px;
    }


    .portrait-area {
        height: 43svh;

        min-height: 290px;

        max-height: 410px;

        margin-top: 32px;
    }


    .portrait-glow {
        height: 94%;

        filter:
            blur(48px);
    }


    .portrait {
        max-width: 96vw;

        height: 100%;
    }


    .portrait-caption {
        bottom: -54px;

        left: 0;

        width: 100%;

        max-width: 100%;

        padding-left: 5vw;
        padding-right: 5vw;

        font-size: 6.5px;

        letter-spacing: 0.17em;

        line-height: 1.5;

        text-align: center;
    }


    .content {
        margin:
            101px
            7vw
            0;
    }


    h1 {
        font-size:
            clamp(
                46px,
                15vw,
                70px
            );

        text-align: center;
    }


    .gold-line {
        margin-top: 22px;
        margin-bottom: 22px;
    }


    .description {
        font-size:
            clamp(
                23px,
                7vw,
                29px
            );

        text-align: center;
    }


    .platform-info {
        margin-top: 38px;

        gap: 30px;
    }


    .platform-section h2 {
        font-size: 21px;

        text-align: center;
    }


    .platform-section p {
        font-size: 10px;

        line-height: 1.6;

        text-align: center;
    }


    .platform-features {
        font-size: 7px;

        letter-spacing: 0.09em;

        text-align: center;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 380px) {

    .brand {
        padding-top: 24px;
    }


    .portrait-area {
        height: 39svh;

        min-height: 270px;

        margin-top: 30px;
    }


    .portrait-caption {
        bottom: -52px;

        left: 0;

        width: 100%;

        padding-left: 4vw;
        padding-right: 4vw;

        font-size: 6px;

        letter-spacing: 0.15em;

        line-height: 1.5;

        text-align: center;
    }


    .content {
        margin-top: 94px;
    }


    h1 {
        font-size: 43px;
    }


    .description {
        font-size: 22px;
    }


    .platform-section h2 {
        font-size: 20px;
    }


    .platform-section p {
        font-size: 9.5px;
    }
}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}