@layer reset, layout, styling, components, utility-class;

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */

:root {
    /*--- Colour Tokens ---*/
    --background: hsl(230 45% 7%);
    --foreground: hsl(40 30% 92%);
    --foreground-channels: 40 30% 92%;
    --card: hsl(230 38% 11%);
    --card-channels: 230 38% 11%;
    --card-foreground: hsl(40 30% 92%);
    --popover: hsl(230 40% 9%);

    --primary: hsl(42 88% 62%);
    --primary-channels: 42 88% 62%;
    --primary-foreground: hsl(230 50% 8%);
    --secondary: hsl(220 55% 28%);
    --muted: hsl(230 25% 16%);
    --muted-foreground: hsl(40 12% 68%);
    --accent: hsl(28 90% 58%);
    --destructive: hsl(0 70% 55%);

    --border: hsl(230 30% 18%);
    --border-channels: 230 30% 18%;
    --input: hsl(230 30% 16%);
    --ring: hsl(42 88% 62%);

    /*--- Gradients ---*/
    --gradient-night: radial-gradient(
        ellipse at top,
        hsl(248 50% 18%) 0%,
        hsl(230 50% 8%) 50%,
        hsl(232 55% 4%) 100%
    );
    --gradient-aurora: linear-gradient(
        135deg,
        hsl(248 50% 20% / 0.6),
        hsl(220 55% 25% / 0.4),
        hsl(42 90% 62% / 0.15)
    );
    --gradient-gold: linear-gradient(135deg, hsl(42 90% 62%), hsl(28 90% 58%));
    --gradient-fade: linear-gradient(
        180deg,
        hsl(230 50% 8% / 0) 0%,
        hsl(230 50% 7% / 0.6) 60%,
        hsl(232 55% 5%) 100%
    );
    --shadow-glow:
        0 0 60px hsl(42 90% 62% / 0.25), 0 0 120px hsl(42 90% 62% / 0.1);
    --shadow-elev:
        0 20px 60px -20px hsl(232 80% 2% / 0.8),
        0 8px 24px -8px hsl(232 80% 2% / 0.6);
    --shadow-card: 0 10px 30px -12px hsl(232 80% 2% / 0.7);

    /*---custom personal tokens ---*/
    --night-deep: hsl(232 50% 5%);
    --night-deep-channels: 232 50% 5%;
    --night-mid: hsl(230 45% 10%);
    --night-mid-channels: 230 45% 10%;
    --night-elev: hsl(230 38% 14%);
    --gold: hsl(42 90% 62%);
    --gold-channels: 42 90% 62%;
    --gold-soft: hsl(40 75% 72%);
    --gold-soft-channels: 40 75% 72%;
    --moon: hsl(48 95% 78%);
    --ember: hsl(22 90% 58%);
    --twilight: hsl(248 45% 22%);
    --twilight-channels: 248 45% 22%;

    /*--- Typography ---*/
    --ff-h1: "Cinzel Decorative", serif;
    --ff-title: "Cinzel", serif;
    /*--font-title: "Cormorant", serif;*/
    --ff-base: "Inter", sans-serif;

    --social-icon-size: 1.5rem;

    /*---border shape---*/
    --pill: 999px;
    --round: 1rem;
    --round-top: 1rem 1rem 0 0;

    /*--- different displays size handling for font ---*/
    --h1: clamp(3rem, 2.35rem + 1.6vw, 4.5rem);
    --h2: clamp(2.25rem, 1.95rem + 0.9vw, 3rem);
    --h3: clamp(1.25rem, 1.15rem + 0.2vw, 1.5rem);
    --h4: clamp(1.125rem, 1.05rem + 0.12vw, 1.25rem);
    --body: clamp(1rem, 0.98rem + 0.12vw, 1.0925rem);
    --body-sm: clamp(0.7rem, 0.6rem + 0.12vw, 1.0725rem);

    /*--- breakpoints ---*/

    --mobile: 640px;
    --tablet: 768px;
    --pc: 1024px;
    --pc-xl: 1280px;
    --pc-2xl: 1400px; /* that is the cap */

    /*--- spacing ---*/

    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;

    --hero-padding: clamp(4rem, 3rem + 2vw, 7rem);

    --mg-sm: 2rem;
    --mg-md: 4rem;
    --mg-lg: 8rem;
    --mg-xl: 16rem;

    /*--- animation ---*/
    --twinkle: 2.5s ease-in-out infinte; /* 2.5 - 5.5 */
    --float-slow: 8s ease-in-out infinite;
    --drift: 20s alternate;
    --glow-pulse: 4s ease-in-out infinite;
    --rise: 0.9s --transition-magic once;
    /*--- easing token ---*/
    --transition-magic: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ========================================
   General Page Layout
   ======================================== */

@layer layout {
    header,
    main,
    footer {
        display: grid;
        grid-template-columns: 1fr min(80%, var(--pc-2xl)) 1fr;
    }

    .wrapper {
        grid-column: 2/3;
    }

    header .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1em;
        margin: var(--spacing-2);
        border-radius: var(--pill);
        grid-column: 1/-1;

        @media (width > 640px) {
            box-sizing: content-box;

            grid-column: 2 / 3;
            max-width: var(--pc-2xl);
            /*margin: 0;*/
            /*padding-inline: 0;*/
        }
    }

    footer {
        position: relative;
        grid-template-rows: 1fr;
        overflow: clip;

        & .wrapper {
            grid-row: 1 / -1;
            grid-row: 1 /-1;
            display: grid;
            align-items: center;
            justify-items: center;
            border-top: 1px solid var(--border);
            padding: 1em 0.5em;
            height: 100%;
        }
    }
}

/* ========================================
   Site General Design
   ======================================== */
@layer styling {
    body {
        min-height: 100svh;
        color: var(--muted-foreground);
        font-family: var(--ff-base);
        font-size: var(--body);

        background-color: var(--night-deep);
        background-image: radial-gradient(
            ellipse at top,
            var(--twilight) 0%,
            var(--night-mid) 50%,
            var(--night-deep) 100%
        );
        background-attachment: fixed;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--ff-title);
        color: var(--foreground);
        text-transform: uppercase;
    }

    h1 {
        font-family: var(--ff-h1);
        font-size: var(--h1);
    }

    h2 {
        font-size: var(--h2);
    }

    h3 {
        font-size: var(--h3);
    }
    h4 {
        font-size: var(--h4);
    }

    a {
        text-decoration: none;
        color: var(--foreground);
        text-transform: capitalize;

        &:hover {
            color: var(--accent);
        }
    }
    ul {
        list-style: none;
    }

    img {
        display: block;
        width: 100%;
        object-fit: cover;
    }

    .logo {
        font-family: var(--ff-h1);
        font-weight: 800;
        color: var(--gold-soft);
        display: flex;
        gap: var(--spacing-2);
        align-items: center;
        font-size: var(--body);
    }

    nav a {
        display: inline-block;
        margin-inline: var(--spacing-2);
    }

    section {
        padding-block: var(--hero-padding);
    }

    .hero {
        position: relative;
        padding: var(--mg-sm);
        /*border: 1px solid red;*/

        & img {
            position: relative;
            border: 1px solid var(--gold);
            border-radius: 2rem;
        }
    }

    #banner {
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        text-align: center;

        & .wrapper {
            grid-column: 1;
        }

        @media (width > 640px) {
            grid-template-columns: 1fr 1.5fr;
            text-align: left;

            & .hero {
                grid-column: 2/3;
                height: min(100vh, 800px);

                & img {
                    position: absolute;
                    width: 60%;
                    margin-inline: auto;
                    left: 25%;
                    top: -1rem;
                }
            }
            & .wrapper {
                grid-column: 1/2;
            }
        }
        & p,
        & .btn-group {
            margin-top: var(--mg-sm);
        }
    }

    .section-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--spacing-8);
        margin-bottom: var(--mg-sm);
        align-items: flex-end;

        & > * {
            flex: 1;
            min-width: 250px;
        }
    }

    .projects-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        @media (width > 640px) {
            grid-template-columns: 1fr 1fr;
        }
        @media (width > 1024px) {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    .project {
        position: relative;
        border: 1px solid var(--border);
        border-radius: var(--round);
        background-color: var(--card);

        & .presentation {
            overflow: hidden;
            aspect-ratio: 4/3;
            border-radius: var(--round-top);
            & img {
                object-position: 0 10%;
            }
        }

        & .body {
            padding: var(--spacing-7);

            & p {
                margin-top: var(--spacing-4);
            }
        }

        &:hover {
            box-shadow: var(--shadow-glow);
            border-color: hsl(var(--primary-channels) / 0.4);
        }
    }

    #story {
        & .wrapper {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--mg-md);

            @media (width > 640px) {
                grid-template-columns: 1fr 1fr;
                & .story {
                    grid-column: 1/2;
                }
                & .time-line {
                    grid-column: 2/3;
                    /*border: 1px solid red;*/
                }
            }
        }

        & button {
            margin-top: var(--spacing-8);
        }
    }

    .time-line {
        position: relative;
        padding: 2rem;
        border-left: 1px solid hsl(var(--primary-channels) / 0.4);

        & li {
            margin-top: 1.5rem;
            line-height: 1.25rem;
        }
        & .text-gold {
            font-family: var(--font-title);
            font-weight: bolder;
        }
    }

    .contact-wrapper {
        max-inline-size: 768px;
        margin-inline: auto;
    }

    .section-img {
        height: clamp(100px, 20vw, 110px);
        display: block;
        overflow: clip;
        & img {
            height: 100%;
            object-fit: cover;
        }
    }
    .story-img {
        object-position: 0% 69%;
        filter: brightness(40%) saturate(140%);
    }
    .contact-img {
        object-position: 0% 70%;
        filter: brightness(60%);
    }

    .footer-img {
        height: clamp(100px, 20vw, 110px);
        z-index: -1;
        grid-column: 1 / -1;
        grid-row: 1 / -1;

        & img {
            object-position: 0% 65%;
            filter: brightness(50%);
        }
    }
}

@layer components {
    form {
        display: grid;
        gap: var(--spacing-4);
        grid-template-columns: 1fr;
        @media (width > 640px) {
            grid-template-columns: repeat(2, 1fr);
        }

        margin-top: clamp(2.5rem, 2rem + 2vw, 5rem);
    }

    .form-group {
        display: grid;
        gap: var(--spacing-3);

        & label {
            text-align: left;
            display: none;
        }
    }

    input,
    textarea {
        resize: vertical;
        background-color: var(--background);
        width: 100%;
        padding: 1em 1.5em;
        color: var(--muted-foreground);
        font-size: var(--body);
        font-family: inherit;
        border-radius: var(--round);
        border-color: var(--border);
    }

    button {
        border: 0;
        padding: 0.75em 1.5em;
        border-radius: var(--pill);
        background: linear-gradient(135deg, var(--gold), var(--ember));
        color: hsl(230 50% 8%);
        font-weight: 600;
        font-size: var(--body);

        &:hover {
            background: linear-gradient(135deg, var(--ember), var(--ember));
            color: var(--foreground);
        }
    }

    button[type="submit"] {
        width: 100%;
    }

    .theme-toggle {
        /* reset */
        appearance: none;
        border: none;
        cursor: pointer;

        /* layout / sizing (shadcn "icon" size ≈ 40×40 px) */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem; /* 40px */
        height: 2.5rem; /* 40px */
        padding: 0.5rem; /* 8px */

        /* appearance */
        border-radius: 9999px;
        /*background-color: transparent;*/
        background: transparent;
        color: var(--foreground);
        transition:
            background-color 200ms ease,
            color 200ms ease;

        /* focus ring using your existing --ring token */
        outline: var(--ring);

        &:hover {
            /*background: hsl(var(--primary) / 0.1);*/
            color: var(--primary);
            background: hsl(var(--gold-soft-channels) / 0.2);
        }
    }
}

@layer utility-class {
    .glass {
        /* used for floating nav and any panel that should sit over the starfield.*/

        background: hsl(var(--card-channels) / 0.55);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border: 1px solid hsl(var(--border-channels) / 0.7);
    }
    .text-gold {
        color: var(--gold);
    }
    .text-muted {
        color: var(--muted);
    }
    .text-gold-soft {
        color: var(--gold-soft);
    }

    .gold-glow-feint {
        box-shadow: 0 0 60px hsl(var(--gold-channels) / 0.35);
    }
    .gold-glow-strong {
        box-shadow: 0 0 80px hsl(var(--gold-channels) / 0.4);
    }

    .btn-group {
        display: flex;
        gap: var(--spacing-3);
        flex-wrap: wrap;
        @media (width <= 640px) {
            justify-content: center;

            & > * {
                flex: 0 1 auto;
            }
        }
    }
    .btn-transparent {
        background: none;
        color: var(--foreground);
        border: 1px solid var(--gold-soft);
        &:hover {
            background-color: hsl(var(--gold-soft-channels) / 0.2);
            color: var(--gold);
        }
    }
    .skills-pill {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
        justify-content: flex-start;
        margin-top: var(--spacing-4);
        & > * {
            padding: 0.5em 1em;
            font-size: var(--body-sm);
            letter-spacing: 0.025em;
            text-transform: capitalize;
            border-radius: var(--pill);
        }
    }
    .skills-plain {
        & > * {
            border: 1px solid var(--border);
        }
    }
    .skills-golden {
        & > * {
            background-color: hsl(var(--primary-channels) / 0.05);
            color: var(--gold-soft);
            border: 1px solid hsl(var(--primary-channels) / 0.2);
        }
    }
    .social-icon-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        justify-content: center;
        padding: 1em;
        margin-bottom: var(--margin-small);
        & .social-icon {
            text-decoration: none;
            padding: 0.5em;
            color: var(--foreground);
            font-size: var(--social-icon-size);
            border: 1px solid;
            border-radius: 999px;
            border-color: var(--border);
        }
        & .social-icon:hover {
            color: var(--gold);
            border-color: var(--gold);
        }
    }
    .bullet {
        position: absolute;
        left: -0.5rem;
        height: 1rem;
        width: 1rem;
        border-color: hsl(var(--primary-channels) / 0.4);
        border: 1px solid;
        border-radius: var(--pill);
        background-color: var(--background);
        display: grid;
        place-items: center;

        & > * {
            height: 0.375rem;
            width: 0.375rem;
            background-color: var(--primary);
            border-radius: var(--pill);
        }
    }

    .span-all {
        grid-column: 1 / -1;
    }
    .capitalize {
        text-transform: capitalize;
    }
    .chapter {
        text-transform: uppercase;
        margin-bottom: var(--spacing-2);
    }
    .center {
        text-align: center;
    }

    .mt-sm {
        margin-top: 2.5rem;
    }

    /* ========================================
       Stars creation and animation
       ======================================== */

    .starfield {
        position: absolute; /* or `fixed` for a full-viewport sky */
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        will-change: transform; /* primed for parallax */
    }

    .star {
        position: absolute;
        width: 1.5px;
        height: 1.5px;
        border-radius: 9999px;
        background: var(--foreground);
        box-shadow: 0 0 4px hsl(var(--foreground-channels) / 0.4);
        opacity: 0.9;
        animation: twinkle 3.5s ease-in-out infinite;
        will-change: transform, opacity;
    }

    /* ---------- Twinkle keyframes ---------- */
    @keyframes twinkle {
        0%,
        100% {
            opacity: 0.2;
            transform: scale(0.9);
        }
        50% {
            opacity: 1;
            transform: scale(1.15);
        }
    }

    /* ============================================================
       Per-star placement, size, color, and timing.
       Every ~3rd star is "gold" with a warmer glow.
       Sizes range 0.5px → 2.5px. Delays 0s → 4s. Durations 2.5s → 5.5s.
       ============================================================ */

    /* REFACTOR: .star:nth-child(1..60) — 60 nearly identical blocks that differ only in
       top, left, width, height, animation-delay, animation-duration values.
       Generate these with a preprocessor loop (Sass/PostCSS) or generate them via a
       JS script that writes the CSS. Maintain the data in a JS/JSON array instead. */

    .star:nth-child(1) {
        top: 4%;
        left: 7%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.2s;
        animation-duration: 3.2s;
    }
    .star:nth-child(2) {
        top: 9%;
        left: 22%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 1.4s;
        animation-duration: 4.7s;
    }
    .star:nth-child(3) {
        top: 6%;
        left: 41%;
        width: 2px;
        height: 2px;
        animation-delay: 0.9s;
        animation-duration: 2.8s;
    }
    .star:nth-child(4) {
        top: 12%;
        left: 58%;
        width: 1px;
        height: 1px;
        animation-delay: 2.3s;
        animation-duration: 5.1s;
    }
    .star:nth-child(5) {
        top: 3%;
        left: 73%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0s;
        animation-duration: 3.9s;
    }
    .star:nth-child(6) {
        top: 8%;
        left: 88%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 1.1s;
        animation-duration: 4.4s;
    }
    .star:nth-child(7) {
        top: 17%;
        left: 3%;
        width: 1px;
        height: 1px;
        animation-delay: 3s;
        animation-duration: 2.6s;
    }
    .star:nth-child(8) {
        top: 15%;
        left: 15%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.6s;
        animation-duration: 5.5s;
    }
    .star:nth-child(9) {
        top: 20%;
        left: 31%;
        width: 2px;
        height: 2px;
        animation-delay: 1.8s;
        animation-duration: 3.4s;
    }
    .star:nth-child(10) {
        top: 18%;
        left: 49%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 2.7s;
        animation-duration: 4s;
    }
    .star:nth-child(11) {
        top: 22%;
        left: 66%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.4s;
        animation-duration: 3.1s;
    }
    .star:nth-child(12) {
        top: 14%;
        left: 81%;
        width: 1px;
        height: 1px;
        animation-delay: 1.6s;
        animation-duration: 4.8s;
    }
    .star:nth-child(13) {
        top: 27%;
        left: 9%;
        width: 2px;
        height: 2px;
        animation-delay: 2.1s;
        animation-duration: 2.9s;
    }
    .star:nth-child(14) {
        top: 31%;
        left: 24%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.4s;
        animation-duration: 3.7s;
    }
    .star:nth-child(15) {
        top: 29%;
        left: 42%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 0.8s;
        animation-duration: 5.2s;
    }
    .star:nth-child(16) {
        top: 34%;
        left: 55%;
        width: 1px;
        height: 1px;
        animation-delay: 1.3s;
        animation-duration: 2.7s;
    }
    .star:nth-child(17) {
        top: 26%;
        left: 70%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.5s;
        animation-duration: 4.2s;
    }
    .star:nth-child(18) {
        top: 33%;
        left: 86%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 0.1s;
        animation-duration: 5s;
    }
    .star:nth-child(19) {
        top: 39%;
        left: 5%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 1.9s;
        animation-duration: 3.3s;
    }
    .star:nth-child(20) {
        top: 42%;
        left: 19%;
        width: 2px;
        height: 2px;
        animation-delay: 2.8s;
        animation-duration: 4.5s;
    }
    .star:nth-child(21) {
        top: 37%;
        left: 36%;
        width: 1px;
        height: 1px;
        animation-delay: 0.5s;
        animation-duration: 2.5s;
    }
    .star:nth-child(22) {
        top: 44%;
        left: 52%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.7s;
        animation-duration: 5.4s;
    }
    .star:nth-child(23) {
        top: 40%;
        left: 68%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 1s;
        animation-duration: 3s;
    }
    .star:nth-child(24) {
        top: 46%;
        left: 83%;
        width: 1px;
        height: 1px;
        animation-delay: 2.2s;
        animation-duration: 4.6s;
    }
    .star:nth-child(25) {
        top: 51%;
        left: 11%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.7s;
        animation-duration: 3.5s;
    }
    .star:nth-child(26) {
        top: 49%;
        left: 27%;
        width: 2px;
        height: 2px;
        animation-delay: 1.5s;
        animation-duration: 2.8s;
    }
    .star:nth-child(27) {
        top: 54%;
        left: 44%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 3.1s;
        animation-duration: 5.3s;
    }
    .star:nth-child(28) {
        top: 47%;
        left: 60%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.3s;
        animation-duration: 4.1s;
    }
    .star:nth-child(29) {
        top: 56%;
        left: 76%;
        width: 2px;
        height: 2px;
        animation-delay: 2.6s;
        animation-duration: 3.6s;
    }
    .star:nth-child(30) {
        top: 52%;
        left: 91%;
        width: 1px;
        height: 1px;
        animation-delay: 1.2s;
        animation-duration: 4.9s;
    }
    .star:nth-child(31) {
        top: 61%;
        left: 6%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.3s;
        animation-duration: 2.6s;
    }
    .star:nth-child(32) {
        top: 64%;
        left: 21%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 0.4s;
        animation-duration: 5.1s;
    }
    .star:nth-child(33) {
        top: 59%;
        left: 38%;
        width: 1px;
        height: 1px;
        animation-delay: 1.7s;
        animation-duration: 3.2s;
    }
    .star:nth-child(34) {
        top: 66%;
        left: 53%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.9s;
        animation-duration: 4.3s;
    }
    .star:nth-child(35) {
        top: 62%;
        left: 69%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 0.9s;
        animation-duration: 3.8s;
    }
    .star:nth-child(36) {
        top: 68%;
        left: 84%;
        width: 2px;
        height: 2px;
        animation-delay: 2s;
        animation-duration: 2.5s;
    }
    .star:nth-child(37) {
        top: 73%;
        left: 13%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.5s;
        animation-duration: 5.5s;
    }
    .star:nth-child(38) {
        top: 71%;
        left: 29%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 0.6s;
        animation-duration: 3.4s;
    }
    .star:nth-child(39) {
        top: 76%;
        left: 46%;
        width: 1px;
        height: 1px;
        animation-delay: 1.4s;
        animation-duration: 4.7s;
    }
    .star:nth-child(40) {
        top: 70%;
        left: 62%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.4s;
        animation-duration: 2.9s;
    }
    .star:nth-child(41) {
        top: 78%;
        left: 78%;
        width: 2px;
        height: 2px;
        animation-delay: 0.2s;
        animation-duration: 4s;
    }
    .star:nth-child(42) {
        top: 74%;
        left: 93%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 1.8s;
        animation-duration: 5.2s;
    }
    .star:nth-child(43) {
        top: 83%;
        left: 8%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3s;
        animation-duration: 3.1s;
    }
    .star:nth-child(44) {
        top: 86%;
        left: 23%;
        width: 2px;
        height: 2px;
        animation-delay: 0.5s;
        animation-duration: 4.4s;
    }
    .star:nth-child(45) {
        top: 81%;
        left: 40%;
        width: 1px;
        height: 1px;
        animation-delay: 1.6s;
        animation-duration: 2.7s;
    }
    .star:nth-child(46) {
        top: 88%;
        left: 56%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.7s;
        animation-duration: 5s;
    }
    .star:nth-child(47) {
        top: 84%;
        left: 72%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 0.8s;
        animation-duration: 3.6s;
    }
    .star:nth-child(48) {
        top: 90%;
        left: 87%;
        width: 1px;
        height: 1px;
        animation-delay: 2.1s;
        animation-duration: 4.5s;
    }
    .star:nth-child(49) {
        top: 94%;
        left: 17%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.2s;
        animation-duration: 3.3s;
    }
    .star:nth-child(50) {
        top: 96%;
        left: 34%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 0s;
        animation-duration: 4.8s;
    }
    .star:nth-child(51) {
        top: 92%;
        left: 50%;
        width: 2px;
        height: 2px;
        animation-delay: 1.1s;
        animation-duration: 2.6s;
    }
    .star:nth-child(52) {
        top: 97%;
        left: 65%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.3s;
        animation-duration: 5.4s;
    }
    .star:nth-child(53) {
        top: 93%;
        left: 80%;
        width: 1px;
        height: 1px;
        animation-delay: 3.6s;
        animation-duration: 3.9s;
    }
    .star:nth-child(54) {
        top: 98%;
        left: 95%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 0.7s;
        animation-duration: 4.2s;
    }
    .star:nth-child(55) {
        top: 11%;
        left: 97%;
        width: 2px;
        height: 2px;
        animation-delay: 1.9s;
        animation-duration: 2.8s;
    }
    .star:nth-child(56) {
        top: 24%;
        left: 99%;
        width: 0.5px;
        height: 0.5px;
        animation-delay: 2.5s;
        animation-duration: 5.1s;
    }
    .star:nth-child(57) {
        top: 36%;
        left: 1%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 3.8s;
        animation-duration: 3s;
    }
    .star:nth-child(58) {
        top: 58%;
        left: 2%;
        width: 1px;
        height: 1px;
        animation-delay: 0.3s;
        animation-duration: 4.6s;
    }
    .star:nth-child(59) {
        top: 79%;
        left: 99%;
        width: 2.5px;
        height: 2.5px;
        animation-delay: 1.3s;
        animation-duration: 3.7s;
    }
    .star:nth-child(60) {
        top: 45%;
        left: 30%;
        width: 1.5px;
        height: 1.5px;
        animation-delay: 2.8s;
        animation-duration: 5.3s;
    }

    /* ---------- Gold stars (warm accent — every 3rd) ---------- */
    .star:nth-child(3n) {
        background: var(--gold-soft);
        box-shadow: 0 0 6px hsl(var(--gold-channels) / 0.7);
    }

    /* ---------- Accessibility ---------- */
    @media (prefers-reduced-motion: reduce) {
        .star {
            animation: none;
            opacity: 0.7;
        }
    }
}