/* ══════════════════════════════════════════════════════════════════════════════
   Profile Animated Themes — SideURL (v4 — Dedicated Layer)
   All patterns live on .pt-layer, a fixed full-screen <div> injected by PHP.
   This is a real DOM element — no pseudo-elements, no body tricks.
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Content sits above the theme layer */
.pt-layer ~ * {
    position: relative;
    z-index: 1;
}


/* ══════════════════════════════════════════════════════════════════════════════
   1. STARRY NIGHT
   Deep navy sky with twinkling stars that slowly drift
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-starry-night {
    background-color: #020111;
    background-image:
        radial-gradient(2px 2px at 20px 15px, #fff 60%, transparent),
        radial-gradient(1.5px 1.5px at 70px 48px, rgba(255,255,255,.8), transparent),
        radial-gradient(2.5px 2.5px at 130px 10px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 180px 58px, rgba(200,220,255,.9), transparent),
        radial-gradient(2px 2px at 240px 35px, #fff, transparent),
        radial-gradient(1px 1px at 300px 68px, rgba(255,255,255,.7), transparent),
        radial-gradient(3px 3px at 360px 18px, rgba(255,240,200,.95), transparent),
        radial-gradient(1.5px 1.5px at 420px 52px, #fff, transparent),
        radial-gradient(2px 2px at 490px 8px, rgba(200,200,255,.9), transparent),
        radial-gradient(1px 1px at 540px 42px, #fff, transparent),
        radial-gradient(2.5px 2.5px at 610px 65px, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 670px 22px, #fff, transparent),
        radial-gradient(3px 3px at 740px 55px, rgba(255,240,200,.9), transparent),
        radial-gradient(1px 1px at 800px 38px, #fff, transparent),
        radial-gradient(2px 2px at 870px 12px, rgba(200,220,255,.9), transparent),
        radial-gradient(1.5px 1.5px at 930px 60px, #fff, transparent),
        radial-gradient(2px 2px at 1000px 28px, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 1060px 50px, #fff, transparent),
        radial-gradient(2.5px 2.5px at 1130px 72px, rgba(255,240,200,.95), transparent),
        radial-gradient(1.5px 1.5px at 1190px 18px, #fff, transparent),
        radial-gradient(4px 4px at 1250px 40px, rgba(255,255,255,.5), rgba(255,255,255,.15) 50%, transparent 70%),
        radial-gradient(3.5px 3.5px at 1350px 30px, rgba(255,240,200,.4), transparent 60%),
        linear-gradient(180deg, #020111 0%, #0a0e27 30%, #141852 60%, #0b0e2a 100%);
    background-size:
        1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px,
        1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px,
        1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px,
        1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px,
        1400px 80px,
        100% 100%;
    animation: starDrift 200s linear infinite;
}

@keyframes starDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 1400px 80px, 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. CLOUDS & SKY
   Realistic puffy cumulus clouds drifting across a blue sky.
   Each cloud = multiple overlapping radial-gradients (flat base + bumps).
   ALL gradients on the element itself — no pseudo-elements.
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-clouds-sky {
    background-color: #4a90d9;
    background-image:
        /* ── Cloud A — large cumulus ── */
        radial-gradient(ellipse 240px 80px at 320 370, rgba(255,255,255,.92), transparent 70%),
        radial-gradient(ellipse 110px 100px at 245 285, rgba(255,255,255,.85), transparent 65%),
        radial-gradient(ellipse 130px 110px at 335 268, rgba(255,255,255,.9), transparent 65%),
        radial-gradient(ellipse 95px 80px at 415 300, rgba(255,255,255,.82), transparent 65%),
        radial-gradient(ellipse 70px 58px at 475 335, rgba(255,255,255,.68), transparent 65%),
        /* ── Cloud B — medium cumulus ── */
        radial-gradient(ellipse 190px 65px at 1100 200, rgba(255,255,255,.88), transparent 70%),
        radial-gradient(ellipse 85px 78px at 1040 142, rgba(255,255,255,.8), transparent 65%),
        radial-gradient(ellipse 100px 88px at 1110 130, rgba(255,255,255,.85), transparent 65%),
        radial-gradient(ellipse 75px 65px at 1170 160, rgba(255,255,255,.75), transparent 65%),
        /* ── Cloud C — large cumulus ── */
        radial-gradient(ellipse 210px 72px at 1900 480, rgba(255,255,255,.9), transparent 70%),
        radial-gradient(ellipse 95px 88px at 1830 405, rgba(255,255,255,.82), transparent 65%),
        radial-gradient(ellipse 115px 98px at 1915 388, rgba(255,255,255,.88), transparent 65%),
        radial-gradient(ellipse 85px 72px at 1985 415, rgba(255,255,255,.78), transparent 65%),
        radial-gradient(ellipse 65px 52px at 2050 450, rgba(255,255,255,.65), transparent 65%),
        /* ── Cloud D — small wispy ── */
        radial-gradient(ellipse 140px 45px at 500 700, rgba(255,255,255,.5), transparent 70%),
        radial-gradient(ellipse 60px 55px at 465 655, rgba(255,255,255,.45), transparent 65%),
        radial-gradient(ellipse 70px 58px at 510 648, rgba(255,255,255,.5), transparent 65%),
        /* ── Cloud E — tiny distant ── */
        radial-gradient(ellipse 110px 38px at 1500 120, rgba(255,255,255,.4), transparent 70%),
        radial-gradient(ellipse 50px 45px at 1475 92, rgba(255,255,255,.35), transparent 65%),
        radial-gradient(ellipse 55px 48px at 1510 85, rgba(255,255,255,.4), transparent 65%),
        /* ── Cloud F — medium ── */
        radial-gradient(ellipse 170px 55px at 700 550, rgba(255,255,255,.6), transparent 70%),
        radial-gradient(ellipse 80px 70px at 650 498, rgba(255,255,255,.55), transparent 65%),
        radial-gradient(ellipse 88px 75px at 710 488, rgba(255,255,255,.6), transparent 65%),
        radial-gradient(ellipse 65px 55px at 770 515, rgba(255,255,255,.48), transparent 65%),
        /* ── Cloud G — small wispy ── */
        radial-gradient(ellipse 120px 40px at 1700 620, rgba(255,255,255,.45), transparent 70%),
        radial-gradient(ellipse 55px 50px at 1675 585, rgba(255,255,255,.4), transparent 65%),
        radial-gradient(ellipse 60px 52px at 1710 578, rgba(255,255,255,.45), transparent 65%),
        /* ── Cloud H — tiny ── */
        radial-gradient(ellipse 100px 35px at 2200 280, rgba(255,255,255,.38), transparent 70%),
        radial-gradient(ellipse 48px 42px at 2180 252, rgba(255,255,255,.32), transparent 65%),
        radial-gradient(ellipse 52px 44px at 2210 248, rgba(255,255,255,.38), transparent 65%),
        /* ── Sky gradient (bottom layer) ── */
        linear-gradient(180deg, #4a90d9 0%, #6cb4f5 30%, #87ceeb 60%, #b8dcf5 100%);
    background-size:
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px, 2400px 1000px,
        100% 100%;
    animation: cloudDrift 90s linear infinite;
}

@keyframes cloudDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 2400px 0, 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. SUNSET GLOW
   Warm gradient with a visible sun disc and light rays
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-sunset-glow {
    background-color: #1a0533;
    background-image:
        radial-gradient(circle 55px at 50% 88%, rgba(251,191,36,.95), rgba(251,191,36,.4) 55%, transparent 80%),
        linear-gradient(168deg, transparent 55%, rgba(251,191,36,.18) 72%, rgba(251,191,36,.06) 82%, transparent 90%),
        linear-gradient(188deg, transparent 50%, rgba(249,115,22,.14) 68%, rgba(249,115,22,.04) 80%, transparent 88%),
        linear-gradient(152deg, transparent 60%, rgba(251,191,36,.12) 75%, transparent 85%),
        linear-gradient(172deg, transparent 58%, rgba(249,115,22,.1) 73%, transparent 83%),
        linear-gradient(180deg, #1a0533 0%, #3d1155 20%, #b91c5c 45%, #f97316 70%, #fbbf24 90%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: sunsetPulse 8s ease-in-out infinite alternate;
}

@keyframes sunsetPulse {
    0%   { opacity: .85; }
    100% { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   4. POLKA DOTS
   Big colorful clearly-visible dots in a repeating grid
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-polka-dots {
    background-color: #fdf2f8;
    background-image:
        radial-gradient(circle 16px at 40px 40px, rgba(236,72,153,.55), rgba(236,72,153,.12) 12px, transparent 16px),
        radial-gradient(circle 12px at 120px 120px, rgba(168,85,247,.5), rgba(168,85,247,.1) 9px, transparent 12px),
        radial-gradient(circle 16px at 200px 40px, rgba(59,130,246,.45), rgba(59,130,246,.08) 12px, transparent 16px),
        radial-gradient(circle 12px at 280px 120px, rgba(236,72,153,.45), rgba(236,72,153,.08) 9px, transparent 12px),
        radial-gradient(circle 16px at 360px 40px, rgba(168,85,247,.5), rgba(168,85,247,.1) 12px, transparent 16px),
        radial-gradient(circle 12px at 440px 120px, rgba(59,130,246,.45), rgba(59,130,246,.08) 9px, transparent 12px),
        radial-gradient(circle 16px at 520px 40px, rgba(244,114,182,.5), rgba(244,114,182,.1) 12px, transparent 16px),
        radial-gradient(circle 12px at 600px 120px, rgba(139,92,246,.45), rgba(139,92,246,.08) 9px, transparent 12px),
        radial-gradient(circle 16px at 680px 40px, rgba(96,165,250,.45), rgba(96,165,250,.08) 12px, transparent 16px),
        radial-gradient(circle 12px at 760px 120px, rgba(236,72,153,.45), rgba(236,72,153,.08) 9px, transparent 12px);
    background-size: 800px 160px;
    animation: dotsScroll 40s linear infinite;
}

@keyframes dotsScroll {
    from { background-position: 0 0; }
    to   { background-position: 800px 160px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   5. NORTHERN LIGHTS (Aurora Borealis)
   Dark sky with vivid flowing green/teal/purple aurora curtains
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-northern-lights {
    background-color: #020b1a;
    background-image:
        linear-gradient(115deg,
            transparent 5%,
            rgba(16,185,129,.18) 18%,
            rgba(52,211,153,.45) 28%,
            rgba(16,185,129,.22) 38%,
            transparent 48%,
            rgba(124,58,237,.14) 58%,
            rgba(168,85,247,.4) 68%,
            rgba(139,92,246,.2) 78%,
            transparent 90%),
        linear-gradient(145deg,
            transparent 10%,
            rgba(34,197,94,.14) 22%,
            rgba(20,184,166,.35) 35%,
            rgba(6,182,212,.22) 45%,
            transparent 55%,
            rgba(99,102,241,.12) 65%,
            rgba(139,92,246,.32) 78%,
            transparent 92%),
        radial-gradient(2px 2px at 8% 15%, rgba(255,255,255,.9), transparent),
        radial-gradient(1.5px 1.5px at 22% 42%, rgba(255,255,255,.7), transparent),
        radial-gradient(2.5px 2.5px at 35% 8%, rgba(200,220,255,.9), transparent),
        radial-gradient(1.5px 1.5px at 48% 55%, rgba(255,255,255,.6), transparent),
        radial-gradient(2px 2px at 62% 22%, rgba(255,255,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 78% 48%, rgba(255,255,255,.7), transparent),
        radial-gradient(2.5px 2.5px at 88% 12%, rgba(255,240,200,.9), transparent),
        radial-gradient(1.5px 1.5px at 95% 38%, rgba(255,255,255,.6), transparent),
        linear-gradient(180deg, #020b1a 0%, #071428 40%, #0a1628 100%);
    background-size:
        200% 100%, 200% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%;
    animation: auroraFlow 12s ease-in-out infinite alternate;
}

@keyframes auroraFlow {
    0%   { background-position: 0% 0%, 100% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 100% 0%, 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. DEEP OCEAN
   Deep blue with visible caustic light ripples
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-deep-ocean {
    background-color: #020617;
    background-image:
        radial-gradient(ellipse 150px 45px at 18% 22%, rgba(56,189,248,.25), transparent),
        radial-gradient(ellipse 100px 35px at 50% 42%, rgba(56,189,248,.18), transparent),
        radial-gradient(ellipse 180px 50px at 78% 18%, rgba(56,189,248,.22), transparent),
        radial-gradient(ellipse 120px 40px at 32% 62%, rgba(56,189,248,.15), transparent),
        radial-gradient(ellipse 110px 38px at 65% 72%, rgba(56,189,248,.18), transparent),
        radial-gradient(ellipse 140px 42px at 88% 55%, rgba(56,189,248,.14), transparent),
        linear-gradient(165deg, transparent 40%, rgba(56,189,248,.08) 48%, transparent 52%),
        linear-gradient(175deg, transparent 35%, rgba(56,189,248,.06) 45%, transparent 50%),
        linear-gradient(155deg, transparent 45%, rgba(56,189,248,.05) 52%, transparent 56%),
        linear-gradient(180deg, #020617 0%, #0c1e3a 35%, #0e3b5e 65%, #134e6f 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: causticShimmer 7s ease-in-out infinite alternate;
}

@keyframes causticShimmer {
    0%   { opacity: .7; }
    100% { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   7. GRADIENT MESH
   Large vivid color blobs that blend together
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-gradient-mesh {
    background-color: #1a1a2e;
    background-image:
        radial-gradient(circle 280px at 12% 22%, rgba(236,72,153,.5) 0%, transparent 70%),
        radial-gradient(circle 320px at 82% 12%, rgba(59,130,246,.5) 0%, transparent 70%),
        radial-gradient(circle 220px at 38% 72%, rgba(16,185,129,.4) 0%, transparent 70%),
        radial-gradient(circle 300px at 88% 78%, rgba(168,85,247,.45) 0%, transparent 70%),
        radial-gradient(circle 200px at 8% 88%, rgba(251,146,60,.35) 0%, transparent 70%),
        radial-gradient(circle 250px at 52% 32%, rgba(99,102,241,.35) 0%, transparent 70%),
        radial-gradient(circle 280px at 28% 85%, rgba(244,114,182,.3) 0%, transparent 70%),
        radial-gradient(circle 230px at 72% 58%, rgba(52,211,153,.3) 0%, transparent 70%);
    background-size: 100% 100%;
    animation: meshPulse 20s ease-in-out infinite alternate;
}

@keyframes meshPulse {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   8. NEON PULSE
   Dark background with bright neon grid lines and edge glows
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-neon-pulse {
    background-color: #0a0a0a;
    background-image:
        linear-gradient(rgba(0,255,136,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0,255,136,.4) 0%, rgba(0,255,136,.12) 6%, transparent 15%),
        linear-gradient(180deg, transparent 85%, rgba(0,255,136,.12) 94%, rgba(0,255,136,.4) 100%),
        linear-gradient(90deg, rgba(0,255,136,.3) 0%, rgba(0,255,136,.1) 6%, transparent 15%),
        linear-gradient(90deg, transparent 85%, rgba(0,255,136,.1) 94%, rgba(0,255,136,.3) 100%);
    background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: neonPulse 4s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    0%   { opacity: .6; }
    100% { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   9. SUNSET BEACH
   Purple-to-gold sky, glowing sun, stars, ocean, and sandy beach.
   Sand is baked into the main gradient so it's ALWAYS visible at the bottom.
   Layout:  sky 0-38% | sun/horizon ~38% | ocean 38-78% | sand 78-100%
   All layers are direct background-image — no pseudo-elements.
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-layer.pt-sunset-beach {
    background-color: #2d1b4e;
    background-image:
        /* ── Stars (upper sky only — above 35%) ── */
        radial-gradient(2.5px 2.5px at 4% 4%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 9% 10%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 16% 2%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 23% 12%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 30% 6%, rgba(255,255,255,.6), transparent),
        radial-gradient(2px 2px at 37% 15%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 44% 4%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 51% 11%, rgba(255,255,255,.4), transparent),
        radial-gradient(2px 2px at 58% 3%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.5px 1.5px at 65% 13%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.55), transparent),
        radial-gradient(2px 2px at 79% 16%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 86% 5%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 93% 10%, rgba(255,255,255,.45), transparent),
        radial-gradient(1px 1px at 98% 3%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 7% 22%, rgba(255,255,255,.25), transparent),
        radial-gradient(1.5px 1.5px at 20% 25%, rgba(255,255,255,.22), transparent),
        radial-gradient(1px 1px at 34% 20%, rgba(255,255,255,.18), transparent),
        radial-gradient(1.5px 1.5px at 48% 24%, rgba(255,255,255,.15), transparent),
        radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.12), transparent),
        radial-gradient(1px 1px at 76% 27%, rgba(255,255,255,.08), transparent),
        radial-gradient(1.5px 1.5px at 90% 23%, rgba(255,255,255,.1), transparent),
        /* Two brighter accent stars */
        radial-gradient(3px 3px at 45% 1%, rgba(255,240,200,.55), transparent),
        radial-gradient(3px 3px at 72% 8%, rgba(255,240,200,.45), transparent),

        /* ── Sun outer glow (positioned at horizon ~38%) ── */
        radial-gradient(circle 220px at 50% 38%, rgba(255,107,107,.18), transparent),
        radial-gradient(circle 140px at 50% 38%, rgba(255,159,67,.25), transparent),
        radial-gradient(circle 80px at 50% 38%, rgba(255,205,86,.4), transparent),

        /* ── Sun disc (at horizon) ── */
        radial-gradient(circle 40px at 50% 38%, #fff5e6 15%, #ffcd56 40%, #ff9f43 70%, transparent 100%),

        /* ── Cloud wisps (in the sky zone) ── */
        radial-gradient(ellipse 140px 35px at 12% 28%, rgba(255,255,255,.14), transparent 70%),
        radial-gradient(ellipse 100px 28px at 33% 24%, rgba(255,200,200,.12), transparent 70%),
        radial-gradient(ellipse 120px 30px at 72% 26%, rgba(255,255,255,.1), transparent 70%),
        radial-gradient(ellipse 90px 24px at 90% 22%, rgba(255,220,200,.08), transparent 70%),

        /* ── Sun reflection shimmer on water ── */
        radial-gradient(ellipse 40px 100px at 50% 52%, rgba(255,205,86,.15), transparent),
        radial-gradient(ellipse 20px 60px at 50% 58%, rgba(255,159,67,.1), transparent),
        radial-gradient(ellipse 12px 30px at 50% 64%, rgba(255,205,86,.06), transparent),

        /* ── Water ripple highlights ── */
        radial-gradient(ellipse 80px 6px at 25% 52%, rgba(255,255,255,.04), transparent),
        radial-gradient(ellipse 60px 5px at 70% 55%, rgba(255,255,255,.035), transparent),
        radial-gradient(ellipse 100px 5px at 40% 62%, rgba(255,255,255,.025), transparent),

        /* ── MAIN GRADIENT: sky → sun → ocean → sand (all in one, sand always visible) ── */
        linear-gradient(180deg,
            #1a0e2e 0%,
            #2d1b4e 6%,
            #5c2652 14%,
            #9b3a6e 22%,
            #c44569 30%,
            #e8734a 36%,
            #f8b500 38%,
            #ff9f43 40%,
            #c4621a 42%,
            #1e3a5f 44%,
            #163350 52%,
            #0f2847 62%,
            #0c2240 70%,
            #1a4a5e 74%,
            #3d6e6a 76%,
            #c4a35a 78%,
            #d4b76a 82%,
            #debb72 86%,
            #e6ca88 91%,
            #f0ddb0 96%,
            #f5e6c0 100%
        );
    /* All layers are 100% 100% — CSS repeats for all 39 gradients */
    background-size: 100% 100%;
    animation: sunsetBeachPulse 6s ease-in-out infinite alternate;
}

@keyframes sunsetBeachPulse {
    0%   { opacity: .88; }
    100% { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Respect prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pt-layer { animation: none !important; }
}