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

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

html {
    width: 100%;
    min-height: 100%;
    background: #020202;
}

body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background: #020202;

    color: #f4dfad;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}


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

.hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 65% 42%,
            rgba(125, 78, 22, 0.12),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 20% 70%,
            rgba(105, 65, 18, 0.10),
            transparent 35%
        ),
        #020202;
}


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

.background {
    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -3;
}


/* subtle radial light */

.ambient-glow {
    position: absolute;

    width: 60vw;
    height: 60vw;

    left: 35%;
    top: 25%;

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

    background:
        radial-gradient(
            circle,
            rgba(210, 146, 48, 0.08),
            transparent 68%
        );

    filter: blur(40px);

    pointer-events: none;
}


/* =========================================================
   GOLD WAVES
========================================================= */

.wave {
    position: absolute;

    left: -15%;
    bottom: -10%;

    width: 130%;
    height: 40%;

    border-radius: 50%;

    transform-origin: center;

    pointer-events: none;

    opacity: 0.28;

    filter: blur(8px);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(138, 88, 25, 0.15) 20%,
            rgba(241, 188, 81, 0.65) 50%,
            rgba(105, 63, 18, 0.25) 75%,
            transparent 100%
        );
}


/* First wave */

.wave-1 {
    bottom: -20%;

    height: 32%;

    transform:
        rotate(-4deg)
        skewX(-12deg);

    animation:
        waveOne 3s ease-in-out infinite alternate;
}


/* Second wave */

.wave-2 {
    bottom: -12%;

    height: 28%;

    opacity: 0.18;

    transform:
        rotate(5deg)
        skewX(15deg);

    animation:
        waveTwo 6s ease-in-out infinite alternate;
}


/* Third wave */

.wave-3 {
    bottom: -25%;

    height: 35%;

    opacity: 0.12;

    transform:
        rotate(-8deg)
        skewX(-10deg);

    animation:
        waveThree 8s ease-in-out infinite alternate;
}


@keyframes waveOne {

    0% {
        transform:
            translate3d(-4%, 4%, 0)
            rotate(-4deg)
            skewX(-12deg);
    }

    100% {
        transform:
            translate3d(7%, -5%, 0)
            rotate(-1deg)
            skewX(-12deg);
    }
}


@keyframes waveTwo {

    0% {
        transform:
            translate3d(5%, 5%, 0)
            rotate(5deg)
            skewX(15deg);
    }

    100% {
        transform:
            translate3d(-8%, -3%, 0)
            rotate(1deg)
            skewX(15deg);
    }
}


@keyframes waveThree {

    0% {
        transform:
            translate3d(-3%, 4%, 0)
            rotate(-8deg)
            skewX(-10deg);
    }

    100% {
        transform:
            translate3d(8%, -2%, 0)
            rotate(-3deg)
            skewX(-10deg);
    }
}


/* =========================================================
   STAR / DUST BACKGROUND
========================================================= */

.stars {
    position: absolute;

    inset: 0;

    opacity: 0.25;

    background-image:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 215, 130, 0.8) 0 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 215, 130, 0.5) 0 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 60% 70%,
            rgba(255, 215, 130, 0.5) 0 1px,
            transparent 1px
        );

    background-size:
        180px 180px,
        240px 240px,
        300px 300px;

    animation:
        starsMove 10s linear infinite;
}


@keyframes starsMove {

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

    to {
        transform: translate3d(-100px, 50px, 0);
    }
}


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

#particleCanvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;
}


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

.hero-content {

    position: relative;

    z-index: 2;

    width: min(1400px, 100%);

    min-height: 100vh;
    min-height: 100svh;

    margin: auto;

    padding:
        clamp(30px, 5vw, 80px)
        clamp(24px, 6vw, 100px);

    display: grid;

    grid-template-columns:
        minmax(350px, 0.9fr)
        minmax(400px, 1.1fr);

    align-items: center;

    gap: clamp(30px, 7vw, 120px);
}


/* =========================================================
   PRODUCT
========================================================= */

.product-area {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 600px;
}


.bottle-container {

    position: relative;

    width: min(430px, 80%);

    z-index: 2;

    animation:
        bottleFloat 7s ease-in-out infinite;
}


.bottle {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 40px
            rgba(0, 0, 0, 0.8)
        )
        drop-shadow(
            0 0 25px
            rgba(202, 142, 49, 0.18)
        );
}


/* Bottle's golden reflection */

.bottle-glow {

    position: absolute;

    width: 65%;

    aspect-ratio: 1;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(211, 151, 53, 0.18),
            rgba(123, 74, 17, 0.05) 40%,
            transparent 70%
        );

    filter: blur(25px);

    animation:
        bottleGlow 5s ease-in-out infinite alternate;
}


@keyframes bottleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


@keyframes bottleGlow {

    from {
        opacity: 0.55;

        transform:
            translate(-50%, -45%)
            scale(0.9);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -45%)
            scale(1.08);
    }
}


/* Particle launch origin */

#particleOrigin {

    position: absolute;

    /*
       Adjust these values according
       to the actual nozzle position
       of your bottle image.
    */

    top: 13%;
    right: 33%;

    width: 1px;
    height: 1px;

    border-radius: 50%;

    background: #f2c56c;

    box-shadow:
        0 0 15px rgba(242, 197, 108, 0.9),
        0 0 30px rgba(242, 197, 108, 0.4);

    opacity: 0.5;
}


/* =========================================================
   COPY
========================================================= */

.copy {

    max-width: 650px;

    position: relative;

    z-index: 5;
}


.eyebrow {

    margin-bottom: 15px;

    color: #b99255;

    font-size:
        clamp(0.75rem, 1vw, 1rem);

    letter-spacing: 0.32em;

    text-transform: uppercase;

    font-weight: 400;
}


h1 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;

    font-size:
        clamp(4rem, 8vw, 8.5rem);

    line-height: 0.82;

    letter-spacing: -0.055em;

    color: #d7aa5e;

    text-shadow:
        0 0 25px rgba(207, 147, 50, 0.15);
}


h1 span {

    display: block;

    color: #f2d18d;

    background:
        linear-gradient(
            120deg,
            #8d662e,
            #ffe0a0,
            #a97932
        );

    background-size: 200% 200%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        goldShift 8s ease infinite;
}


@keyframes goldShift {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.countdown {

    margin-top: 25px;

    color: rgba(242, 209, 141, 0.72);

    font-size: 1rem;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}


.gold-line {

    width: 100px;

    height: 1px;

    margin:
        28px 0;

    background:
        linear-gradient(
            90deg,
            #e3b65f,
            transparent
        );
}


.description {

    max-width: 430px;

    color:
        rgba(235, 218, 183, 0.6);

    font-size:
        clamp(0.9rem, 1.2vw, 1.05rem);

    line-height: 1.8;

    letter-spacing: 0.02em;
}


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

.notify-button {

    margin-top: 35px;

    padding:
        15px 24px;

    border:
        1px solid
        rgba(220, 170, 83, 0.5);

    border-radius: 2px;

    background:
        rgba(198, 139, 44, 0.05);

    color: #e8c77e;

    font-size: 0.8rem;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;
}


.notify-button span {

    margin-left: 15px;

    transition:
        transform 250ms ease;
}


.notify-button:hover {

    background:
        rgba(205, 151, 56, 0.14);

    border-color:
        rgba(235, 190, 104, 0.9);

    box-shadow:
        0 0 30px
        rgba(210, 154, 54, 0.12);

    transform:
        translateY(-2px);
}


.notify-button:hover span {

    display: inline-block;

    transform:
        translateX(5px);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 60px);

    display: flex;

    justify-content: space-between;

    z-index: 5;

    color:
        rgba(215, 170, 94, 0.35);

    font-size: 0.65rem;

    letter-spacing: 0.25em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-content {

        grid-template-columns: 1fr;

        grid-template-rows:
            auto auto;

        gap: 10px;

        text-align: center;

        padding-top: 60px;
        padding-bottom: 80px;
    }


    .product-area {

        min-height: 450px;
    }


    .bottle-container {

        width: min(350px, 65vw);
    }


    .copy {

        margin: auto;
    }


    .gold-line {

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


    .description {

        margin: auto;
    }


    /* #particleOrigin {

        top: 9%;
        right: 9%;
    } */
}


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

@media (max-width: 600px) {

    .hero-content {

        padding:
            35px 20px 80px;

        gap: 0;
    }


    .product-area {

        min-height: 360px;
    }


    .bottle-container {

        width: min(280px, 75vw);
    }


    h1 {

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

        line-height: 0.86;
    }


    .eyebrow {

        font-size: 0.65rem;

        letter-spacing: 0.24em;
    }


    .countdown {

        font-size: 0.7rem;

        letter-spacing: 0.18em;
    }


    .description {

        font-size: 0.85rem;

        line-height: 1.7;
    }


    .footer {

        width: calc(100% - 40px);

        bottom: 15px;

        font-size: 0.5rem;
    }


    .wave {

        filter: blur(12px);
    }

    /* #particleOrigin {

        top: 13%;
        right: 33%;
    } */
}


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

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

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

        animation-duration: 0.001ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.001ms !important;
    }
}