/* ══════════════════════════════════════════════════════════
   WEATHER BACKGROUND EFFECTS
   Atmospheric background layers for rain, sunny, snow, cloudy & stormy.
   Driven by <html data-weather="rain|sunny|snow|cloudy|stormy">.
   Stacks with seasonal themes (<html data-site-theme="...">).
   ══════════════════════════════════════════════════════════ */

.weather-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 0; /* Sits behind centered content cards and seasonal side rails */
    overflow: hidden;
    display: none;
}

[data-weather] .weather-backdrop,
[data-weather-theme] .weather-backdrop {
    display: block;
}

.weather-layer {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   1. RAIN WEATHER EFFECT
   Minimal, calm retro pixel art rain with dual-plane depth.
   Sparse, gentle raindrops with crisp visibility across light & dark themes.
   ══════════════════════════════════════════════════════════ */

[data-weather="rain"] .weather-layer--rain,
[data-weather-theme="rain"] .weather-layer--rain {
    display: block;
}

/* Soft overcast ambient wash */
[data-weather="rain"] {
    --weather-tint: rgba(30, 58, 138, 0.015);
}

[data-theme="dark"][data-weather="rain"],
[data-theme="dark"] [data-weather="rain"],
[data-weather="rain"][data-theme="dark"] {
    --weather-tint: rgba(147, 197, 253, 0.02);
}

.weather-rain-plane {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Layer 1: Background distant whisper drizzle (ultra sparse & faint) */
.weather-rain-plane--back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='540' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(46,102,175,0.20)' d='M30,90h1v3h-1z M140,270h1v3h-1z M85,450h1v3h-1z'/%3E%3Cpath fill='rgba(37,99,175,0.45)' d='M31,93h1v3h-1z M141,273h1v3h-1z M86,453h1v3h-1z'/%3E%3Cpath fill='rgba(29,87,156,0.70)' d='M32,96h1v3h-1z M142,276h1v3h-1z M87,456h1v3h-1z'/%3E%3C/svg%3E");
    background-size: 180px 540px;
    animation: pixelRainBack 4.2s linear infinite;
    opacity: 0.25;
}

/* Layer 2: Foreground gentle pixel raindrops (sparse, calm descent) */
.weather-rain-plane--front {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='720' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(37,99,175,0.25)' d='M45,60h1.5v3h-1.5z M185,230h1.5v3h-1.5z M80,420h1.5v3h-1.5z M200,590h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(37,99,175,0.45)' d='M46,63h1.5v3h-1.5z M186,233h1.5v3h-1.5z M81,423h1.5v3h-1.5z M201,593h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(29,87,156,0.70)' d='M47,66h1.5v3h-1.5z M187,236h1.5v3h-1.5z M82,426h1.5v3h-1.5z M202,596h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(26,75,138,0.92)' d='M48,69h1.5v3h-1.5z M188,239h1.5v3h-1.5z M83,429h1.5v3h-1.5z M203,599h1.5v3h-1.5z'/%3E%3C/svg%3E");
    background-size: 240px 720px;
    animation: pixelRainFront 2.6s linear infinite;
    opacity: 0.50;
}

[data-theme="dark"] .weather-rain-plane--back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='540' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(56,189,248,0.16)' d='M30,90h1v3h-1z M140,270h1v3h-1z M85,450h1v3h-1z'/%3E%3Cpath fill='rgba(125,211,252,0.40)' d='M31,93h1v3h-1z M141,273h1v3h-1z M86,453h1v3h-1z'/%3E%3Cpath fill='rgba(186,230,253,0.70)' d='M32,96h1v3h-1z M142,276h1v3h-1z M87,456h1v3h-1z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .weather-rain-plane--front {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='720' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(56,189,248,0.22)' d='M45,60h1.5v3h-1.5z M185,230h1.5v3h-1.5z M80,420h1.5v3h-1.5z M200,590h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(56,189,248,0.45)' d='M46,63h1.5v3h-1.5z M186,233h1.5v3h-1.5z M81,423h1.5v3h-1.5z M201,593h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(125,211,252,0.70)' d='M47,66h1.5v3h-1.5z M187,236h1.5v3h-1.5z M82,426h1.5v3h-1.5z M202,596h1.5v3h-1.5z'/%3E%3Cpath fill='rgba(224,242,254,0.92)' d='M48,69h1.5v3h-1.5z M188,239h1.5v3h-1.5z M83,429h1.5v3h-1.5z M203,599h1.5v3h-1.5z'/%3E%3C/svg%3E");
}

@keyframes pixelRainFront {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 240px 720px;
    }
}

@keyframes pixelRainBack {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 180px 540px;
    }
}

/* Soft ground mist along bottom */
.weather-rain-mist {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(46, 91, 136, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .weather-rain-mist {
    background: linear-gradient(to top, rgba(147, 197, 253, 0.025) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════
   2. SUNNY WEATHER EFFECT
   Warm ambient solar flare & streaming diagonal sunbeams
   ══════════════════════════════════════════════════════════ */

[data-weather="sunny"] .weather-layer--sunny,
[data-weather-theme="sunny"] .weather-layer--sunny {
    display: block;
}

/* Radiant sun flare at top right */
.weather-sun-flare {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(253, 224, 71, 0.28) 0%, 
        rgba(251, 191, 36, 0.16) 35%, 
        rgba(245, 158, 11, 0.06) 60%, 
        transparent 80%
    );
    filter: blur(25px);
    pointer-events: none;
    animation: sunPulse 9s ease-in-out infinite alternate;
}

/* Streaming diagonal sunbeams across the page background */
.weather-sun-beams {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(
        138deg,
        rgba(254, 240, 138, 0.06) 0px,
        rgba(254, 240, 138, 0.14) 70px,
        rgba(253, 224, 71, 0.04) 140px,
        transparent 210px,
        transparent 290px
    );
    opacity: 0.85;
    pointer-events: none;
    animation: sunbeamsDrift 14s ease-in-out infinite alternate;
}

.weather-sun-shimmer {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(254, 240, 138, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .weather-sun-flare {
    background: radial-gradient(circle, 
        rgba(251, 191, 36, 0.2) 0%, 
        rgba(217, 119, 6, 0.1) 40%, 
        transparent 75%
    );
}

[data-theme="dark"] .weather-sun-beams {
    background: repeating-linear-gradient(
        138deg,
        rgba(251, 191, 36, 0.04) 0px,
        rgba(251, 191, 36, 0.09) 70px,
        transparent 160px,
        transparent 260px
    );
}

@keyframes sunPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes sunbeamsDrift {
    0% {
        opacity: 0.75;
        transform: rotate(0deg) scale(1);
    }
    100% {
        opacity: 0.95;
        transform: rotate(2deg) scale(1.03);
    }
}

/* ══════════════════════════════════════════════════════════
   3. SNOW WEATHER EFFECT
   Soft drifting background snow flurries
   ══════════════════════════════════════════════════════════ */

[data-weather="snow"] .weather-layer--snow,
[data-weather-theme="snow"] .weather-layer--snow {
    display: block;
}

.weather-snow-plane {
    position: absolute;
    inset: -60px 0;
    width: 100%;
    height: calc(100% + 120px);
    pointer-events: none;
}

/* Layer 1: Distant fine snowflakes */
.weather-snow-plane--back {
    background-image: 
        radial-gradient(2px 2px at 30px 45px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2.5px 2.5px at 120px 90px, rgba(224, 242, 254, 0.85), transparent),
        radial-gradient(2px 2px at 210px 180px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.8px 1.8px at 70px 240px, rgba(224, 242, 254, 0.8), transparent),
        radial-gradient(2px 2px at 280px 110px, rgba(255, 255, 255, 0.85), transparent);
    background-size: 320px 320px;
    animation: snowDriftSlow 16s linear infinite;
    opacity: 0.85;
}

/* Layer 2: Near larger soft flakes */
.weather-snow-plane--front {
    background-image: 
        radial-gradient(3.5px 3.5px at 60px 80px, #ffffff, transparent),
        radial-gradient(4px 4px at 180px 160px, rgba(240, 249, 255, 0.95), transparent),
        radial-gradient(3px 3px at 300px 280px, #ffffff, transparent),
        radial-gradient(4.5px 4.5px at 140px 380px, rgba(240, 249, 255, 0.9), transparent);
    background-size: 440px 440px;
    animation: snowDriftFast 10s linear infinite;
    opacity: 0.92;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes snowDriftSlow {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(18px, 160px, 0);
    }
    100% {
        transform: translate3d(0, 320px, 0);
    }
}

@keyframes snowDriftFast {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-24px, 220px, 0);
    }
    100% {
        transform: translate3d(0, 440px, 0);
    }
}

/* ══════════════════════════════════════════════════════════
   4. CLOUDY / FOG WEATHER EFFECT
   Drifting atmospheric haze & cloud shadows
   ══════════════════════════════════════════════════════════ */

[data-weather="cloudy"] .weather-layer--cloudy,
[data-weather-theme="cloudy"] .weather-layer--cloudy {
    display: block;
}

.weather-cloud-haze {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0%, rgba(203, 213, 225, 0.05) 60%, transparent 100%);
    pointer-events: none;
}

.weather-cloud-drift {
    position: absolute;
    top: -80px;
    left: -20%;
    width: 140%;
    height: 400px;
    background: radial-gradient(ellipse at 50% 50%, rgba(203, 213, 225, 0.22) 0%, transparent 70%);
    filter: blur(40px);
    animation: cloudDriftSlow 32s ease-in-out infinite alternate;
}

@keyframes cloudDriftSlow {
    0% {
        transform: translateX(-40px);
    }
    100% {
        transform: translateX(60px);
    }
}

/* ══════════════════════════════════════════════════════════
   5. STORMY WEATHER EFFECT
   Heavy rain + dramatic ambient thunder lightning flash
   ══════════════════════════════════════════════════════════ */

[data-weather="stormy"] .weather-layer--stormy,
[data-weather-theme="stormy"] .weather-layer--stormy {
    display: block;
}

[data-weather="stormy"] .weather-rain-plane--front,
[data-weather-theme="stormy"] .weather-rain-plane--front {
    animation-duration: 0.9s;
    opacity: 0.75;
}

[data-weather="stormy"] .weather-rain-plane--back,
[data-weather-theme="stormy"] .weather-rain-plane--back {
    animation-duration: 1.5s;
    opacity: 0.50;
}

.weather-storm-flash {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0);
    animation: stormFlash 16s infinite;
    pointer-events: none;
}

@keyframes stormFlash {
    0%, 94%, 97%, 100% {
        background-color: rgba(255, 255, 255, 0);
    }
    95% {
        background-color: rgba(224, 242, 254, 0.22);
    }
    96% {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .weather-rain-plane,
    .weather-sun-flare,
    .weather-sun-beams,
    .weather-snow-plane,
    .weather-cloud-drift,
    .weather-storm-flash {
        animation: none !important;
    }
}