/* =========================================================
   Pixel SMP — pixel art utilities + sky/cloud animations
   ========================================================= */

.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* =========================================================
   Sky + Sun + Pixel mountains in the hero
   ========================================================= */
.sky {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.sun {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 90px;
    background: radial-gradient(circle at 50% 50%,
        #fff 0 18%, var(--c-sun) 18% 55%, transparent 60%);
    image-rendering: pixelated;
    filter: drop-shadow(0 0 30px rgba(255,226,122,.85));
    animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(255,226,122,.7)); }
    50%      { filter: drop-shadow(0 0 50px rgba(255,226,122,1)); }
}

/* =========================================================
   Pixel clouds (built with box-shadow chunks)
   Each cloud uses :before/:after blocks of CSS to draw
   chunky 8-bit silhouettes — cheap and crisp at any zoom.
   ========================================================= */

.cloud {
    --u: 8px;             /* unit size */
    --c1: #ffffff;
    --c2: #d6efff;
    position: absolute;
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 4);
    background: var(--c1);
    image-rendering: pixelated;
    box-shadow:
        /* top bumps */
        calc(var(--u) * 2)  calc(var(--u) * -2) 0 0 var(--c1),
        calc(var(--u) * 4)  calc(var(--u) * -2) 0 0 var(--c1),
        calc(var(--u) * 6)  calc(var(--u) * -2) 0 0 var(--c1),
        calc(var(--u) * 3)  calc(var(--u) * -3) 0 0 var(--c1),
        calc(var(--u) * 5)  calc(var(--u) * -3) 0 0 var(--c1),
        /* shadow underline */
        0                    calc(var(--u) * 1)  0 0 var(--c2),
        calc(var(--u) * 2)   calc(var(--u) * 1)  0 0 var(--c2),
        calc(var(--u) * 4)   calc(var(--u) * 1)  0 0 var(--c2),
        calc(var(--u) * 6)   calc(var(--u) * 1)  0 0 var(--c2),
        calc(var(--u) * 8)   calc(var(--u) * 1)  0 0 var(--c2);
    will-change: transform;
}

.cloud-1 { top: 14%; left: -200px; --u: 9px;  animation: drift 60s linear infinite; }
.cloud-2 { top: 28%; left: -260px; --u: 6px;  animation: drift 45s linear infinite; animation-delay: -12s; opacity: .85; }
.cloud-3 { top: 42%; left: -320px; --u: 12px; animation: drift 80s linear infinite; animation-delay: -30s; opacity: .9; }
.cloud-4 { top: 56%; left: -180px; --u: 7px;  animation: drift 52s linear infinite; animation-delay: -22s; opacity: .8; }
.cloud-5 { top: 70%; left: -240px; --u: 10px; animation: drift 70s linear infinite; animation-delay: -50s; opacity: .75; }
.cloud-6 { top: 20%; left: -300px; --u: 5px;  animation: drift 38s linear infinite; animation-delay: -8s;  opacity: .7; }

@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 360px)); }
}

/* =========================================================
   Pixel mountain silhouette at bottom of hero
   ========================================================= */
.mountains {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    background:
        linear-gradient(180deg, transparent 0, transparent 30%, #2a7d3a 30%, #1c5828 100%);
    -webkit-mask:
        radial-gradient(circle at 10% 100%, #000 60px, transparent 60px),
        radial-gradient(circle at 30% 100%, #000 90px, transparent 90px),
        radial-gradient(circle at 55% 100%, #000 120px, transparent 120px),
        radial-gradient(circle at 78% 100%, #000 80px, transparent 80px),
        radial-gradient(circle at 95% 100%, #000 70px, transparent 70px),
        linear-gradient(#000 0 0);
    -webkit-mask-composite: source-over;
            mask:
        radial-gradient(circle at 10% 100%, #000 60px, transparent 60px),
        radial-gradient(circle at 30% 100%, #000 90px, transparent 90px),
        radial-gradient(circle at 55% 100%, #000 120px, transparent 120px),
        radial-gradient(circle at 78% 100%, #000 80px, transparent 80px),
        radial-gradient(circle at 95% 100%, #000 70px, transparent 70px),
        linear-gradient(#000 0 0);
    z-index: 2;
    image-rendering: pixelated;
    opacity: .55;
}

/* =========================================================
   Pixel divider — chunky bottom edge for sections
   ========================================================= */
.pixel-divider {
    height: 12px;
    background:
        repeating-linear-gradient(90deg,
            var(--c-purple) 0 12px,
            var(--c-cyan)   12px 24px,
            var(--c-green)  24px 36px);
    image-rendering: pixelated;
}

/* =========================================================
   Neon text utility
   ========================================================= */
.neon-cyan   { color: var(--c-cyan);   text-shadow: 0 0 8px rgba(41,199,230,.7), 3px 3px 0 #000; }
.neon-green  { color: var(--c-green);  text-shadow: 0 0 8px rgba(109,255,92,.7), 3px 3px 0 #000; }
.neon-purple { color: var(--c-purple); text-shadow: 0 0 8px rgba(139,47,201,.7), 3px 3px 0 #000; }