/* ═══ WEATHER LIVE — Cinematic Atmospheric Experience ═══ */

/* ───── MODAL WRAPPER ───── */
.weather-experience {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s ease;
    padding: 1.5rem;
}

.weather-experience.active {
    opacity: 1;
    visibility: visible;
}

.weather-experience .weather-live--modal {
    width: 100%;
    max-width: 720px;
    height: min(86vh, 880px);
    min-height: 560px;
    border-radius: 28px;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    box-shadow:
        0 50px 120px -20px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 0 rgba(255, 255, 255, 0.08) inset;
}

.weather-experience.active .weather-live--modal {
    transform: scale(1) translateY(0);
}

.weather-experience .weather-live--modal:hover {
    transform: none;
}

.weather-live {
    position: relative;
    width: 100%;
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #0c0e15;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.6),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    cursor: pointer;
    /* Fallback values — overridden inline by JS sky engine (continuous TOD shift) */
    --sky-1: #0a0c1c;
    --sky-2: #1a1d35;
    --sky-3: #2d2547;
    --tint: rgba(168, 85, 247, 0.12);
    --particle: rgba(173, 196, 224, 0.7);
    --sun-op: 0;
    --moon-op: 0;
    --cloud-dur-a: 80s;
    --cloud-dur-b: 108s;
    --cloud-dur-c: 58s;
    --rain-skew: -14deg;
    --rain-drift: -26px;
}

.weather-live:hover {
    transform: translateY(-2px);
    box-shadow:
        0 30px 70px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--primary-rgb), 0.15),
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* ───── LAYER 1 — Sky gradient ───── */
.weather-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
    transition: background 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.weather-sky::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 70%, var(--tint), transparent 60%);
    pointer-events: none;
    animation: skyDrift 80s linear infinite;
}

@keyframes skyDrift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(0, 0, 0) rotate(360deg); }
}

/* Subtle vignette for text contrast */
.weather-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ───── LAYER 2 — Sun (multi-layer: core + corona + 12 volumetric rays) ───── */
.weather-sun {
    position: absolute;
    top: 14%;
    right: 18%;
    width: 110px;
    height: 110px;
    z-index: 1;
    opacity: var(--sun-op, 0);
    transition: opacity 1.6s ease;
    pointer-events: none;
}

.weather-sun .sun-core {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff8e3 0%, #ffe89a 30%, #ffb24c 65%, #ff7a1c 90%);
    box-shadow:
        0 0 40px 8px rgba(255, 220, 130, 0.7),
        0 0 80px 20px rgba(255, 180, 80, 0.45),
        0 0 140px 40px rgba(255, 130, 50, 0.2);
    animation: sunCorePulse 4.5s ease-in-out infinite;
}

.weather-sun .sun-corona {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.35) 35%, rgba(255, 180, 80, 0.15) 55%, transparent 75%);
    filter: blur(6px);
    animation: sunCoronaSwell 8s ease-in-out infinite;
}

.weather-sun .sun-rays-container {
    position: absolute;
    inset: 0;
    animation: sunRaysRotate 90s linear infinite;
}

.weather-sun .sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    background: linear-gradient(90deg, rgba(255, 220, 140, 0.6) 0%, rgba(255, 200, 100, 0.2) 40%, transparent 100%);
    transform-origin: 3px 50%;
    transform: rotate(var(--angle, 0deg));
    filter: blur(5px);
    opacity: 0;
    animation: sunRayPulse 4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    border-radius: 3px;
}

@keyframes sunCorePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.05); filter: brightness(1.12); }
}

@keyframes sunCoronaSwell {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.7; }
}

@keyframes sunRaysRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes sunRayPulse {
    0%, 100% { opacity: 0.25; transform: rotate(var(--angle, 0deg)) scaleX(0.85); }
    50%      { opacity: 0.85; transform: rotate(var(--angle, 0deg)) scaleX(1.15); }
}

/* ───── LAYER 3 — Moon (bigger, more dramatic) ───── */
.weather-moon {
    position: absolute;
    top: 12%;
    right: 16%;
    width: 110px;
    height: 110px;
    z-index: 1;
    opacity: var(--moon-op, 0);
    transition: opacity 1.6s ease;
    pointer-events: none;
}

.weather-moon .moon-surface {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 33%, #fafaf0 0%, #e0dccc 45%, #b0aa98 85%, #888272 100%);
    box-shadow:
        inset -14px -10px 22px rgba(0, 0, 0, 0.5),
        0 0 60px 12px rgba(240, 240, 255, 0.45),
        0 0 130px 32px rgba(220, 230, 255, 0.25);
}

/* Craters via box-shadow on a single pseudo-element */
.weather-moon .moon-surface::before {
    content: '';
    position: absolute;
    top: 28%;
    left: 22%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.20);
    box-shadow:
        20px 24px 0 -1px rgba(0, 0, 0, 0.18),
        28px 8px 0 -2px rgba(0, 0, 0, 0.15),
        9px 40px 0 -1px rgba(0, 0, 0, 0.18),
        44px 28px 0 -3px rgba(0, 0, 0, 0.12),
        36px 46px 0 -2px rgba(0, 0, 0, 0.16),
        15px 14px 0 -4px rgba(0, 0, 0, 0.12),
        50px 12px 0 -4px rgba(0, 0, 0, 0.10);
}

.weather-moon .moon-glow {
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(235, 240, 255, 0.45) 0%, rgba(200, 215, 255, 0.18) 40%, rgba(180, 200, 255, 0.06) 65%, transparent 78%);
    filter: blur(10px);
    animation: moonGlowPulse 6s ease-in-out infinite;
}

@keyframes moonGlowPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* ───── LAYER 3b — Stars (three depth tiers) ───── */
.weather-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--moon-op, 0);
    transition: opacity 1.6s ease;
    pointer-events: none;
}

.weather-stars .star {
    position: absolute;
    width: var(--s, 2px);
    height: var(--s, 2px);
    border-radius: 50%;
    background: #fff;
    animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.weather-stars .star--back  {
    opacity: 0.7;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 6px rgba(200, 220, 255, 0.4);
}
.weather-stars .star--mid   {
    opacity: 0.95;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1), 0 0 10px rgba(200, 220, 255, 0.5);
}
.weather-stars .star--front {
    opacity: 1;
    background: radial-gradient(circle at center,
        #fff 0%,
        rgba(255, 255, 255, 0.92) 22%,
        rgba(220, 235, 255, 0.55) 50%,
        rgba(180, 210, 255, 0.18) 75%,
        transparent 92%);
    box-shadow:
        0 0 8px 1px rgba(255, 255, 255, 1),
        0 0 20px 3px rgba(220, 235, 255, 0.75),
        0 0 40px 6px rgba(180, 210, 255, 0.45),
        0 0 70px 12px rgba(150, 180, 240, 0.22);
}

/* Pure brightness shimmer — no scale, no cross lines, just heller↔dunkler */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ───── LAYER 3c — Shooting Stars (visible on clear/partly nights) ───── */
.weather-shooting {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--moon-op, 0);
    transition: opacity 1.6s ease;
    pointer-events: none;
    overflow: hidden;
}

.weather-shooting .shooting {
    position: absolute;
    left: -8%;
    width: 90px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 80%, rgba(180, 220, 255, 1) 100%);
    transform: rotate(var(--rot, 18deg));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    opacity: 0;
    animation: shootingStar 28s linear infinite;
    animation-delay: var(--d, 0s);
}

.weather-shooting .shooting::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
}

@keyframes shootingStar {
    0%   { transform: translate(0, 0) rotate(var(--rot, 18deg)); opacity: 0; }
    1%   { opacity: 0; }
    2%   { opacity: 1; }
    5%   { transform: translate(140vw, 28vh) rotate(var(--rot, 18deg)); opacity: 0; }
    100% { transform: translate(140vw, 28vh) rotate(var(--rot, 18deg)); opacity: 0; }
}

/* ───── LAYER 3d — Aurora ribbons (subtle, drifting) ───── */
.weather-aurora {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
    mix-blend-mode: screen;
    overflow: hidden;
}

.weather-aurora .aurora-band {
    position: absolute;
    width: 180%;
    height: 80px;
    left: -40%;
    border-radius: 50%;
    filter: blur(28px);
}

.weather-aurora .aurora-band--1 {
    top: 18%;
    background: linear-gradient(90deg, transparent, rgba(120, 220, 180, 0.3), rgba(140, 180, 255, 0.25), transparent);
    animation: auroraDrift 22s ease-in-out infinite;
}

.weather-aurora .aurora-band--2 {
    top: 30%;
    background: linear-gradient(90deg, transparent, rgba(180, 140, 255, 0.25), rgba(220, 120, 200, 0.2), transparent);
    animation: auroraDrift 28s ease-in-out infinite reverse;
    animation-delay: -8s;
}

@keyframes auroraDrift {
    0%, 100% { transform: translate3d(-5%, 0, 0) skewY(-2deg); }
    50%      { transform: translate3d(5%, -8px, 0) skewY(3deg); }
}

/* Aurora visible only on clear nights — JS-driven via --moon-op > 0.6 */
.weather-live[data-condition="clear-night"] .weather-aurora { opacity: 0.6; }

/* ───── LAYER 4 — Clouds (drifting) ───── */
.weather-clouds {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.weather-clouds .cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    /* Duration driven by wind speed via JS (--cloud-dur-X). Fallback = calm baseline. */
    animation: cloudDrift var(--cloud-dur, 80s) linear infinite;
    animation-delay: var(--d, 0s);
}

.weather-clouds .cloud--a {
    top: 12%;
    left: -25%;
    width: 220px;
    height: 80px;
    background: radial-gradient(ellipse, rgba(225, 230, 240, 0.42), transparent 65%);
    --cloud-dur: var(--cloud-dur-a, 80s);
}
.weather-clouds .cloud--b {
    top: 28%;
    left: -35%;
    width: 280px;
    height: 100px;
    background: radial-gradient(ellipse, rgba(210, 215, 230, 0.32), transparent 65%);
    --cloud-dur: var(--cloud-dur-b, 108s);
    --d: -30s;
}
.weather-clouds .cloud--c {
    top: 8%;
    left: -20%;
    width: 180px;
    height: 65px;
    background: radial-gradient(ellipse, rgba(235, 240, 250, 0.48), transparent 65%);
    --cloud-dur: var(--cloud-dur-c, 58s);
    --d: -15s;
}
.weather-clouds .cloud--d {
    top: 22%;
    left: -30%;
    width: 240px;
    height: 90px;
    background: radial-gradient(ellipse, rgba(220, 225, 235, 0.30), transparent 65%);
    --cloud-dur: var(--cloud-dur-b, 108s);
    --d: -60s;
}
.weather-clouds .cloud--e {
    top: 5%;
    left: -15%;
    width: 140px;
    height: 50px;
    background: radial-gradient(ellipse, rgba(245, 248, 255, 0.55), transparent 65%);
    --cloud-dur: var(--cloud-dur-c, 58s);
    --d: -42s;
}

@keyframes cloudDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(170vw, 0, 0); }
}

/* ───── LAYER 5 — Rain (multi-tier with depth parallax) ───── */
.weather-rain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

.weather-rain .drop {
    position: absolute;
    top: -20%;
    left: var(--x, 50%);
    width: var(--w, 1px);
    height: var(--h, 16px);
    background: linear-gradient(180deg, transparent, var(--particle));
    border-radius: 0 0 2px 2px;
    transform-origin: top;
    animation: rainFall var(--dur, 0.9s) linear infinite;
    animation-delay: var(--d, 0s);
    will-change: transform, opacity;
    opacity: var(--op, 0.8);
}

.weather-rain .drop--back  { filter: blur(0.4px); }
.weather-rain .drop--front { filter: drop-shadow(0 0 2px rgba(180, 200, 230, 0.4)); }

@keyframes rainFall {
    /* Skew + horizontal drift are wind-driven (set via JS as --rain-skew / --rain-drift). */
    0%   { transform: translate3d(0, -20vh, 0) skewX(var(--rain-skew, -14deg)); opacity: 0; }
    8%   { opacity: var(--op, 0.8); }
    92%  { opacity: var(--op, 0.8); }
    100% { transform: translate3d(var(--rain-drift, -26px), 130vh, 0) skewX(var(--rain-skew, -14deg)); opacity: 0; }
}

/* ───── LAYER 5b — Ground splashes (concentric ripples at the bottom edge) ───── */
.weather-splashes {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

.weather-splashes .splash {
    position: absolute;
    bottom: 4%;
    left: var(--x, 50%);
    width: 14px;
    height: 4px;
    border: 1.2px solid rgba(190, 210, 235, 0.7);
    border-radius: 50%;
    transform: translateX(-50%) scale(0);
    animation: splashExpand var(--dur, 2s) ease-out infinite;
    animation-delay: var(--d, 0s);
    opacity: 0;
}

@keyframes splashExpand {
    0%   { transform: translateX(-50%) scale(0); opacity: 0; }
    10%  { transform: translateX(-50%) scale(0.3); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(2.5); opacity: 0; }
}

/* ───── LAYER 6 — Snow (multi-tier with figure-8 sway) ───── */
.weather-snow {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    overflow: hidden;
}

.weather-snow .flake {
    position: absolute;
    top: -10%;
    left: var(--x, 50%);
    width: var(--s, 4px);
    height: var(--s, 4px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.4));
    border-radius: 50%;
    animation:
        snowFall var(--dur, 7s) linear infinite,
        snowSway var(--sway-dur, 4s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
    will-change: transform;
    opacity: var(--op, 0.8);
}

.weather-snow .flake--back  { filter: blur(1.2px); }
.weather-snow .flake--mid   { filter: blur(0.6px); }
.weather-snow .flake--front {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.8);
}

@keyframes snowFall {
    0%   { transform: translate3d(0, -10vh, 0); opacity: 0; }
    6%   { opacity: var(--op, 0.8); }
    100% { transform: translate3d(0, 120vh, 0); opacity: var(--op, 0.5); }
}

@keyframes snowSway {
    0%, 100% { margin-left: 0; }
    25%      { margin-left: calc(var(--sway-amp, 14px) * 1); }
    50%      { margin-left: 0; }
    75%      { margin-left: calc(var(--sway-amp, 14px) * -1); }
}

/* ───── LAYER 7 — Fog ───── */
.weather-fog {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
    overflow: hidden;
}

.weather-fog .mist {
    position: absolute;
    width: 200%;
    height: 30%;
    left: -50%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 210, 225, 0.18) 30%,
        rgba(220, 225, 235, 0.22) 50%,
        rgba(200, 210, 225, 0.18) 70%,
        transparent 100%);
    filter: blur(14px);
    animation: fogDrift var(--dur, 40s) linear infinite;
    animation-delay: var(--d, 0s);
}

.weather-fog .mist--1 { top: 30%; --dur: 50s; }
.weather-fog .mist--2 { top: 50%; --dur: 70s; --d: -25s; opacity: 0.7; }
.weather-fog .mist--3 { top: 65%; --dur: 90s; --d: -45s; opacity: 0.5; }

@keyframes fogDrift {
    from { transform: translate3d(-25%, 0, 0); }
    to   { transform: translate3d(25%, 0, 0); }
}

/* ───── LAYER 7b — Storm clouds (dark dense formations) ───── */
.weather-storm-clouds {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
    overflow: hidden;
}

.weather-storm-clouds .storm-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    animation: cloudDrift var(--cloud-dur, 50s) linear infinite;
}

.weather-storm-clouds .storm-cloud--a {
    top: 5%; left: -30%;
    width: 320px; height: 130px;
    background: radial-gradient(ellipse, rgba(15, 18, 28, 0.85), transparent 65%);
    --cloud-dur: var(--cloud-dur-b, 60s);
}
.weather-storm-clouds .storm-cloud--b {
    top: 18%; left: -25%;
    width: 380px; height: 150px;
    background: radial-gradient(ellipse, rgba(10, 12, 22, 0.78), transparent 60%);
    --cloud-dur: var(--cloud-dur-a, 45s);
    animation-delay: -20s;
}
.weather-storm-clouds .storm-cloud--c {
    top: 12%; left: -20%;
    width: 260px; height: 110px;
    background: radial-gradient(ellipse, rgba(20, 22, 35, 0.7), transparent 65%);
    --cloud-dur: var(--cloud-dur-c, 35s);
    animation-delay: -12s;
}

.weather-live[data-condition="storm"] .weather-storm-clouds { opacity: 1; }

/* ───── LAYER 8 — Lightning (uniform full-scene flash, no gradient edge) ───── */
.weather-lightning {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    /* Uniform pale-blue overlay — real lightning brightens the whole sky evenly.
       A gradient here was creating a visible mid-modal boundary line during the flash. */
    background: rgba(220, 230, 255, 0.42);
    opacity: 0;
    mix-blend-mode: screen;
}

.weather-live[data-condition="storm"] .weather-lightning {
    animation: lightningFlash 7s ease-in-out infinite;
}

@keyframes lightningFlash {
    0%, 78%   { opacity: 0; }
    79%       { opacity: 0.8; }
    80%       { opacity: 0.1; }
    81%       { opacity: 0.95; }
    82%       { opacity: 0.05; }
    83%       { opacity: 0.7; }
    84%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* ───── LAYER 8b — Lightning bolts (SVG jagged paths drawn across the sky) ───── */
.weather-lightning-bolts {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.weather-lightning-bolts .bolt {
    position: absolute;
    width: 80px;
    height: 65%;
    transform: translateX(-50%) scale(var(--sc, 1));
    opacity: 0;
    animation: boltStrike 7s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    filter: drop-shadow(0 0 6px rgba(180, 220, 255, 0.9))
            drop-shadow(0 0 16px rgba(140, 190, 255, 0.6));
}

@keyframes boltStrike {
    0%, 78%   { opacity: 0; }
    79%       { opacity: 0.95; transform: translateX(-50%) scale(var(--sc, 1)); }
    80%       { opacity: 0.2;  transform: translateX(-50%) scale(calc(var(--sc, 1) * 1.05)); }
    81%       { opacity: 1;    transform: translateX(-50%) scale(calc(var(--sc, 1) * 1.08)); }
    82%       { opacity: 0.4;  transform: translateX(-50%) scale(var(--sc, 1)); }
    83%       { opacity: 0.85; }
    84%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* ───── LAYER 9 — Heat shimmer (clear days, subtle horizon distortion) ───── */
.weather-heat {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
    background: linear-gradient(180deg, transparent, rgba(255, 220, 160, 0.06) 50%, rgba(255, 200, 130, 0.10));
    filter: blur(2px);
    animation: heatShimmer 4s ease-in-out infinite;
}

@keyframes heatShimmer {
    0%, 100% { transform: skewY(0deg) translateY(0); }
    33%      { transform: skewY(0.4deg) translateY(-2px); }
    66%      { transform: skewY(-0.3deg) translateY(1px); }
}

.weather-live[data-condition="clear-day"] .weather-heat { opacity: 0.7; }

/* ───── LAYER 9b — Dust motes (floating particles, clear day atmosphere) ───── */
.weather-motes {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
    overflow: hidden;
}

.weather-motes .mote {
    position: absolute;
    width: var(--s, 1.5px);
    height: var(--s, 1.5px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 180, 0.9), rgba(255, 210, 140, 0.3) 70%, transparent);
    box-shadow: 0 0 4px rgba(255, 220, 140, 0.4);
    opacity: var(--op, 0.5);
    animation: moteFloat var(--dur, 18s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes moteFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25%      { transform: translate3d(15px, -22px, 0); }
    50%      { transform: translate3d(-8px, -40px, 0); }
    75%      { transform: translate3d(-20px, -20px, 0); }
}

.weather-live[data-condition="clear-day"] .weather-motes { opacity: 1; }

/* ───── CONTENT LAYER ───── */
.weather-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 380px;
    padding: 1.5rem 1.6rem 1.3rem;
    color: #fff;
    font-family: var(--font-main);
}

.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.weather-city {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.01em;
}

.weather-city svg {
    width: 14px;
    height: 14px;
    opacity: 0.85;
    flex-shrink: 0;
}

.weather-actions {
    display: flex;
    gap: 0.4rem;
}

.weather-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
}

.weather-action-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.weather-action-btn--close {
    background: rgba(0, 0, 0, 0.25);
}
.weather-action-btn--close:hover {
    background: rgba(255, 80, 80, 0.3);
    border-color: rgba(255, 100, 100, 0.5);
}

.weather-action-btn svg {
    width: 14px;
    height: 14px;
}

.weather-action-btn.is-spinning svg {
    animation: spinIcon 0.8s linear infinite;
}

@keyframes spinIcon {
    to { transform: rotate(360deg); }
}

/* ── Main display ── */
.weather-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}

.weather-live .weather-temp {
    font-family: var(--font-mono);
    font-size: clamp(2.75rem, 6.5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    gap: 1px;
}

.weather-live .weather-temp-deg {
    font-size: 0.45em;
    font-weight: 300;
    margin-top: 0.18em;
    opacity: 0.75;
}

.weather-condition {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.005em;
}

.weather-feels {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Stats Bar ── */
.weather-stats {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.weather-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.weather-stat svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

.weather-stat-content {
    min-width: 0;
}

.weather-stat-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    font-feature-settings: "tnum";
}

.weather-stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}

/* ── Forecast Strip ── */
.weather-forecast-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.weather-forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.weather-forecast-day:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.weather-forecast-day-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.weather-forecast-day-icon {
    font-size: 1.2rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.weather-forecast-day-temps {
    display: flex;
    gap: 5px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}

.weather-forecast-day-max { color: #fff; font-weight: 600; }
.weather-forecast-day-min { color: rgba(255, 255, 255, 0.45); }

/* ───── EMPTY STATE (no location) ───── */
.weather-empty {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 380px;
    padding: 2rem 1.5rem;
    color: #fff;
}

.weather-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.55);
}

.weather-empty-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.weather-empty-desc {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 280px;
    line-height: 1.5;
    margin-bottom: 1.4rem;
}

.weather-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 300px;
}

.weather-empty-btn {
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.weather-empty-btn--primary {
    background: rgba(var(--primary-rgb), 0.45);
    border-color: rgba(var(--primary-rgb), 0.7);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
}

.weather-empty-btn--primary:hover {
    background: rgba(var(--primary-rgb), 0.6);
    transform: translateY(-1px);
}

.weather-empty-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.weather-empty-btn svg { width: 14px; height: 14px; }

.weather-empty-input-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.weather-empty-input {
    flex: 1;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 0.86rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.weather-empty-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.weather-empty-input:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
}

/* ───── CONDITION VARIANTS ───── */

/*
 * NOTE: Sky-1/2/3 + tint + sun-op + moon-op come from JS (continuous time-of-day shift in weather.js).
 * Per-condition rules below only control particle-layer visibility (rain/snow/clouds/fog/lightning).
 * Particle colors (`--particle`) stay condition-specific.
 */

/* CLEAR DAY / NIGHT — sky alone, sun/moon driven by JS */
.weather-live[data-condition="clear-day"]   { --particle: rgba(255, 255, 255, 0.6); }
.weather-live[data-condition="clear-night"] { --particle: rgba(200, 220, 255, 0.7); }

/* PARTLY — sun/moon dim (via JS cap), plus visible clouds */
.weather-live[data-condition="partly-day"]   .weather-clouds { opacity: 0.7; }
.weather-live[data-condition="partly-night"] .weather-clouds { opacity: 0.6; }

/* CLOUDY */
.weather-live[data-condition="cloudy"] .weather-clouds { opacity: 1; }

/* RAIN */
.weather-live[data-condition="rain"] {
    --particle: rgba(180, 200, 230, 0.75);
}
.weather-live[data-condition="rain"] .weather-rain   { opacity: 1; }
.weather-live[data-condition="rain"] .weather-clouds { opacity: 0.8; }

/* STORM */
.weather-live[data-condition="storm"] {
    --particle: rgba(170, 190, 220, 0.85);
}
.weather-live[data-condition="storm"] .weather-rain   { opacity: 1; }
.weather-live[data-condition="storm"] .weather-clouds { opacity: 0.9; }

/* SNOW */
.weather-live[data-condition="snow"] {
    --particle: rgba(255, 255, 255, 0.9);
}
.weather-live[data-condition="snow"] .weather-snow   { opacity: 1; }
.weather-live[data-condition="snow"] .weather-clouds { opacity: 0.6; }

/* FOG */
.weather-live[data-condition="fog"] .weather-fog { opacity: 1; }

/* ───── REDUCED MOTION ───── */
@media (prefers-reduced-motion: reduce) {
    .weather-sky::before,
    .weather-sun .sun-core,
    .weather-sun .sun-corona,
    .weather-sun .sun-rays-container,
    .weather-sun .sun-ray,
    .weather-moon .moon-glow,
    .weather-stars .star,
    .weather-shooting .shooting,
    .weather-aurora .aurora-band,
    .weather-clouds .cloud,
    .weather-storm-clouds .storm-cloud,
    .weather-rain .drop,
    .weather-splashes .splash,
    .weather-snow .flake,
    .weather-fog .mist,
    .weather-lightning,
    .weather-lightning-bolts .bolt,
    .weather-heat,
    .weather-motes .mote,
    .weather-character .char-body,
    .weather-character .char-shadow,
    .weather-character .char-sunscreen-spark,
    .weather-character[data-shiver="1"] .char-body,
    .weather-character .char-eyes ellipse,
    .weather-character .char-head-group,
    .weather-landscape .tree-pivot,
    .weather-plane .plane-wrap,
    .weather-tornado,
    .weather-tornado .tornado-svg,
    .weather-tornado .tornado-swirl,
    .weather-landscape .firefly,
    .weather-landscape .cottage-smoke ellipse,
    .weather-landscape .ls-birds .bird {
        animation: none !important;
    }
}

/* ═══ LANDSCAPE + CHARACTER ═══ */

.weather-landscape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    z-index: 2;
    pointer-events: none;
    /* 5-layer parallax color tokens */
    --landscape-far:        rgba(0, 0, 0, 0.22);
    --landscape-mountains:  rgba(0, 0, 0, 0.40);
    --landscape-mid:        rgba(0, 0, 0, 0.58);
    --landscape-trees:      rgba(0, 0, 0, 0.70);
    --landscape-front:      rgba(0, 0, 0, 0.82);
    --landscape-snow:       rgba(255, 255, 255, 0.88);
    --landscape-wet:        rgba(160, 190, 220, 0.22);
    --landscape-cottage:    rgba(0, 0, 0, 0.66);
    --landscape-warm:       rgba(255, 200, 120, 0.85);
    --landscape-path:       rgba(180, 150, 110, 0.55);
}

.weather-landscape .landscape-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── LANDSCAPE LAYER FILLS ── */
.weather-landscape .ls-mountains-far { fill: var(--landscape-far); }
.weather-landscape .ls-mountains     { fill: var(--landscape-mountains); }
.weather-landscape .ls-hills         { fill: var(--landscape-mid); }
.weather-landscape .ls-tree-spruce,
.weather-landscape .ls-tree-leafy ellipse,
.weather-landscape .ls-tree-leafy rect,
.weather-landscape .ls-bush          { fill: var(--landscape-trees); }
.weather-landscape .ls-foreground    { fill: var(--landscape-front); }
.weather-landscape .ls-rocks ellipse { fill: var(--landscape-front); opacity: 0.85; }

/* ── COTTAGE ── */
.weather-landscape .ls-cottage rect,
.weather-landscape .ls-cottage path { fill: var(--landscape-cottage); }
.weather-landscape .ls-cottage .cottage-door   { fill: rgba(0, 0, 0, 0.92); }
.weather-landscape .ls-cottage .cottage-window {
    fill: var(--landscape-warm);
    opacity: 0;
    transition: opacity 1.5s ease;
}
.weather-landscape .ls-cottage .cottage-window-frame {
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 0.4;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.weather-landscape .ls-cottage .cottage-door-glow {
    fill: var(--landscape-warm);
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: translate(0.8px, 0) scale(0.7);
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* Cottage interior lights — tied to pure --night-op (time-of-day), NOT --moon-op.
   That way the cottage glows at night even on overcast/stormy nights when the moon is hidden. */
.weather-landscape .ls-cottage .cottage-window,
.weather-landscape .ls-cottage .cottage-window-frame,
.weather-landscape .ls-cottage .cottage-door-glow {
    opacity: var(--night-op, 0);
}
.weather-landscape .ls-cottage .cottage-window {
    filter: drop-shadow(0 0 6px rgba(255, 195, 100, 0.95))
            drop-shadow(0 0 14px rgba(255, 170, 60, 0.55));
}
.weather-landscape .ls-cottage .cottage-window--attic {
    filter: drop-shadow(0 0 5px rgba(255, 200, 110, 0.9));
    opacity: calc(var(--night-op, 0) * 0.85);
}
.weather-landscape .ls-cottage .cottage-door-glow {
    filter: blur(2px) drop-shadow(0 0 8px rgba(255, 180, 80, 0.6));
    opacity: calc(var(--night-op, 0) * 0.7);
}

/* Chimney smoke — drifts up and fades, only on cold-ish conditions */
.weather-landscape .ls-cottage .cottage-smoke ellipse {
    fill: rgba(220, 220, 230, 0.4);
    opacity: 0;
    transform-origin: 12px 0;
    transition: opacity 2s ease;
}
.weather-live[data-condition="snow"]     .cottage-smoke ellipse,
.weather-live[data-condition="fog"]      .cottage-smoke ellipse,
.weather-live[data-condition="cloudy"]   .cottage-smoke ellipse,
.weather-live[data-condition="rain"]     .cottage-smoke ellipse,
.weather-live[data-condition="clear-night"] .cottage-smoke ellipse,
.weather-live[data-condition="partly-night"] .cottage-smoke ellipse {
    opacity: 1;
    animation: smokeRise 4s ease-in-out infinite;
}
.weather-landscape .cottage-smoke ellipse:nth-child(2) { animation-delay: -1.3s !important; }
.weather-landscape .cottage-smoke ellipse:nth-child(3) { animation-delay: -2.6s !important; }

@keyframes smokeRise {
    0%   { transform: translateY(4px) scale(0.5); opacity: 0; }
    20%  { opacity: 0.5; }
    100% { transform: translateY(-30px) scale(1.4); opacity: 0; }
}

/* ── BIRDS ── visible only on clear conditions */
.weather-landscape .ls-birds .bird {
    fill: none;
    stroke: var(--landscape-mountains);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.weather-live[data-condition="clear-day"] .ls-birds .bird,
.weather-live[data-condition="partly-day"] .ls-birds .bird {
    opacity: 0.85;
    animation: birdFly var(--bird-dur, 14s) linear infinite;
}
.weather-landscape .ls-birds .bird-1 { --bird-dur: 14s; animation-delay: 0s; }
.weather-landscape .ls-birds .bird-2 { --bird-dur: 18s; animation-delay: -4s; }
.weather-landscape .ls-birds .bird-3 { --bird-dur: 16s; animation-delay: -8s; }

@keyframes birdFly {
    0%   { transform: translateX(-50px) translateY(0); }
    50%  { transform: translateX(400px) translateY(-12px); }
    100% { transform: translateX(900px) translateY(0); }
}

/* ── PATH ── tapered dirt trail winding toward the cottage. Two layers + footstep speckles. */
.weather-landscape .ls-path-shadow {
    fill: rgba(60, 40, 25, 0.45);
    filter: blur(2.5px);
}
.weather-landscape .ls-path {
    fill: url(#pathGrad);
}
.weather-landscape .ls-path-speckles ellipse {
    fill: rgba(110, 80, 50, 0.5);
}

/* ── SNOW caps + ground + hills accumulation ── */
.weather-landscape .ls-snowcaps,
.weather-landscape .ls-snow-ground,
.weather-landscape .ls-snow-hills {
    fill: var(--landscape-snow);
    opacity: 0;
    transition: opacity 2s ease;
}
.weather-live[data-condition="snow"] .ls-snowcaps    { opacity: 0.95; }
.weather-live[data-condition="snow"] .ls-snow-ground { opacity: 0.75; }
.weather-live[data-condition="snow"] .ls-snow-hills  { opacity: 0.55; }

/* ── WET ground reflection for rain/storm ── */
.weather-landscape .ls-wet {
    fill: var(--landscape-wet);
    opacity: 0;
    transition: opacity 1.2s ease;
    mix-blend-mode: screen;
}
.weather-live[data-condition="rain"]  .ls-wet { opacity: 1; }
.weather-live[data-condition="storm"] .ls-wet { opacity: 1; }

/* ── FOG occludes distant layers ── */
.weather-landscape .ls-fog-veil {
    fill: rgba(220, 225, 235, 0);
    opacity: 0;
    transition: opacity 2s ease;
}
.weather-live[data-condition="fog"] .ls-fog-veil {
    opacity: 1;
    fill: rgba(220, 225, 235, 0.45);
}
.weather-live[data-condition="fog"] .ls-mountains-far { opacity: 0.25; }
.weather-live[data-condition="fog"] .ls-mountains     { opacity: 0.4; }
.weather-live[data-condition="fog"] .ls-hills         { opacity: 0.55; }
.weather-live[data-condition="fog"] .ls-cottage       { opacity: 0.4; }
.weather-live[data-condition="fog"] .ls-trees         { opacity: 0.6; }

/* ═══ TREES bending in wind ═══
   Inner <g class="tree-pivot"> has no SVG transform — fill-box gives the path's
   geometric bbox, with origin (50% 100%) = trunk base. CSS rotation pivots there.
   The outer <g transform="translate(...)"> stays unaffected, so trees stay positioned. */
.weather-landscape .tree-pivot {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: treeSway var(--sway-dur, 3s) ease-in-out infinite;
    animation-delay: var(--sway-d, 0s);
}
@keyframes treeSway {
    0%, 100% { transform: rotate(calc(var(--tree-sway, 0deg) * -1)); }
    50%      { transform: rotate(var(--tree-sway, 0deg)); }
}

/* ═══ PLANE crossing the sky ═══ */
.weather-plane {
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.weather-live[data-condition="clear-day"]  .weather-plane,
.weather-live[data-condition="partly-day"] .weather-plane {
    opacity: 1;
}
.weather-plane .plane-wrap {
    position: absolute;
    top: 0;
    left: -10%;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: planeCross 38s linear infinite;
    animation-delay: 6s;
}
.weather-plane .plane-svg {
    width: 78px;
    height: 28px;
    transform: scaleX(-1); /* facing right */
    overflow: visible;
}
.weather-plane .plane-body,
.weather-plane .plane-wing,
.weather-plane .plane-tail-fin,
.weather-plane .plane-stab {
    fill: rgba(248, 250, 255, 0.92);
    stroke: rgba(40, 50, 70, 0.32);
    stroke-width: 0.5;
    stroke-linejoin: round;
}
.weather-plane .plane-wing {
    fill: rgba(220, 228, 238, 0.92);
}
.weather-plane .plane-tail-fin {
    fill: rgba(232, 238, 248, 0.92);
}
.weather-plane .plane-engine {
    fill: rgba(60, 70, 88, 0.85);
    stroke: rgba(20, 30, 45, 0.5);
    stroke-width: 0.4;
}
.weather-plane .plane-windows {
    fill: rgba(100, 145, 200, 0.85);
    stroke: rgba(40, 60, 90, 0.5);
    stroke-width: 0.3;
}
.weather-plane .plane-window-dot {
    fill: rgba(100, 145, 200, 0.75);
}
.weather-plane .plane-contrail {
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 40%, transparent 100%);
    border-radius: 2px;
    filter: blur(1.5px);
    order: -1; /* contrail before plane */
    margin-right: -8px;
}
@keyframes planeCross {
    0%        { transform: translateX(0)      translateY(0); }
    4%        { transform: translateX(2vw)    translateY(-2px); }
    50%       { transform: translateX(60vw)   translateY(-8px); }
    96%       { transform: translateX(118vw)  translateY(-12px); }
    100%      { transform: translateX(120vw)  translateY(-12px); }
}

/* ═══ TORNADO (storm only, periodic) ═══ */
.weather-tornado {
    position: absolute;
    bottom: 22%;
    left: 10%;
    width: 80px;
    height: 200px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform-origin: 50% 100%;
}
/* Tornado requires storm condition AND wind ≥ 40 km/h (set by JS via data-tornado).
   A thunderstorm at 8 km/h doesn't spawn tornados in real life. */
.weather-live[data-tornado="1"] .weather-tornado {
    opacity: 1;
    animation: tornadoTraverse 22s ease-in-out infinite;
    animation-delay: 4s;
}
.weather-tornado .tornado-svg {
    width: 100%;
    height: 100%;
    display: block;
    animation: tornadoWobble 1.2s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.weather-tornado .tornado-body {
    fill: rgba(40, 45, 60, 0.7);
    filter: blur(0.6px);
}
.weather-tornado .tornado-swirl {
    fill: none;
    stroke: rgba(220, 225, 240, 0.55);
    stroke-width: 1.5;
    stroke-linecap: round;
    animation: tornadoSwirlSpin 0.8s linear infinite;
    transform-origin: 0 0;
}
.weather-tornado .tornado-swirl:nth-child(2) { animation-duration: 0.7s; }
.weather-tornado .tornado-swirl:nth-child(3) { animation-duration: 0.6s; }
.weather-tornado .tornado-swirl:nth-child(4) { animation-duration: 0.5s; }
.weather-tornado .tornado-swirl:nth-child(5) { animation-duration: 0.4s; }

@keyframes tornadoTraverse {
    0%, 6%   { transform: translateX(0)      scaleX(1)  scaleY(0.8); opacity: 0; }
    12%      { opacity: 1; }
    50%      { transform: translateX(35vw)   scaleX(-1) scaleY(1.1); opacity: 1; }
    88%      { opacity: 1; }
    94%, 100%{ transform: translateX(70vw)   scaleX(1)  scaleY(0.8); opacity: 0; }
}
@keyframes tornadoWobble {
    0%, 100% { transform: scaleX(1) skewX(-3deg); }
    50%      { transform: scaleX(1) skewX(3deg); }
}
@keyframes tornadoSwirlSpin {
    0%   { transform: scaleX(1); }
    50%  { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}

/* ═══ FIREFLIES — purely time-based, glow on any night (even stormy/cloudy ones) ═══ */
.weather-landscape .ls-fireflies {
    opacity: var(--night-op, 0);
    transition: opacity 2s ease;
}
.weather-landscape .firefly {
    fill: #d4ff64;
    filter: drop-shadow(0 0 4px rgba(212, 255, 100, 0.95));
    animation: fireflyFloat var(--ff-dur, 6s) ease-in-out infinite,
               fireflyGlow  var(--ff-glow, 2s) ease-in-out infinite;
}
.weather-landscape .firefly-1 { --ff-dur: 7s;  --ff-glow: 1.8s; animation-delay: 0s,    -0.3s; }
.weather-landscape .firefly-2 { --ff-dur: 9s;  --ff-glow: 2.4s; animation-delay: -1.5s, -1.1s; }
.weather-landscape .firefly-3 { --ff-dur: 6s;  --ff-glow: 1.6s; animation-delay: -3s,   -0.5s; }
.weather-landscape .firefly-4 { --ff-dur: 8s;  --ff-glow: 2.1s; animation-delay: -4.5s, -1.6s; }
.weather-landscape .firefly-5 { --ff-dur: 7.5s;--ff-glow: 1.9s; animation-delay: -2.2s, -0.8s; }
.weather-landscape .firefly-6 { --ff-dur: 6.5s;--ff-glow: 2.2s; animation-delay: -5s,   -1.4s; }

@keyframes fireflyFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25%      { transform: translate3d(18px, -22px, 0); }
    50%      { transform: translate3d(-12px, -38px, 0); }
    75%      { transform: translate3d(-26px, -18px, 0); }
}
@keyframes fireflyGlow {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

/* ═══ CHARACTER — Flat illustration with skin/hair/face/clothes ═══ */

.weather-character {
    position: absolute;
    bottom: 6px;
    right: 14%;
    width: 110px;
    height: 175px;
    z-index: 3;
    pointer-events: none;
    /* Character palette — overridable for variants */
    --skin:        #e8c4a0;
    --skin-shadow: #d4a98a;
    --hair:        #2b2530;
    --hair-shadow: #1a151c;
    --shirt:       #6c8fd0;
    --shirt-dark:  #4f6fa8;
    --pants:       #2a3848;
    --shoes:       #15191f;
    --coat:        #3a5670;
    --scarf:       #c83c4a;
    --scarf-stripe: #f0d6c0;
    --hat:         #a855f7;
    --hat-cuff:    #8e3fd9;
    --sunhat:      #f5d171;
    --sunhat-band: #c83c4a;
    --cheek:       rgba(232, 130, 130, 0.4);
}

.weather-character .char-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

/* ─── BODY base colors ─── */
.weather-character .char-skin            { fill: var(--skin); }
.weather-character .char-hair            { fill: var(--hair); }
.weather-character .char-hair-shadow     { fill: var(--hair-shadow); opacity: 0.4; }
.weather-character .char-shirt           { fill: var(--shirt); }
.weather-character .char-shirt-collar    { fill: var(--shirt-dark); }
.weather-character .char-shirt-sleeve    { fill: var(--shirt); }
.weather-character .char-pants           { fill: var(--pants); }
.weather-character .char-shoe            { fill: var(--shoes); }
.weather-character .char-eyes ellipse    { fill: var(--hair); }
.weather-character .char-eyebrows path   { fill: none; stroke: var(--hair); stroke-width: 1.6; stroke-linecap: round; }
.weather-character .char-mouth           { fill: none; stroke: #b85c5c; stroke-width: 1.8; stroke-linecap: round; }
.weather-character .char-cheek           { fill: var(--cheek); }
.weather-character .char-shadow          { fill: rgba(0, 0, 0, 0.35); }

/* Idle breathing */
.weather-character .char-body {
    transform-origin: 100px 305px;
    animation: charBreathe 4.5s ease-in-out infinite;
}

/* Arms stay at rest — body just breathes. Wave was unreadable.
   The head gets subtle "looking around" life instead — feels natural without unnatural arm motion. */

.weather-character .char-head-group {
    transform-box: fill-box;
    transform-origin: 50% 95%;  /* pivot at chin/neck */
    animation: headLife 13s ease-in-out infinite;
}
@keyframes headLife {
    0%        { transform: rotate(0deg)    translateY(0); }
    10%       { transform: rotate(-3deg)   translateY(0); }      /* turn left */
    22%       { transform: rotate(-4deg)   translateY(-1px); }   /* look up-left */
    32%       { transform: rotate(-1deg)   translateY(-0.5px); }
    44%       { transform: rotate(2.5deg)  translateY(0); }      /* turn right */
    56%       { transform: rotate(3.5deg)  translateY(-1.5px); } /* look up-right */
    66%       { transform: rotate(1deg)    translateY(-0.5px); }
    78%       { transform: rotate(0deg)    translateY(-2px); }   /* look straight up */
    88%       { transform: rotate(0deg)    translateY(-0.5px); }
    100%      { transform: rotate(0deg)    translateY(0); }
}
.weather-character .char-shadow {
    animation: charShadow 4.5s ease-in-out infinite;
    transform-origin: 100px 305px;
}
@keyframes charBreathe {
    0%, 100% { transform: scaleY(1)    translateY(0); }
    50%      { transform: scaleY(1.013) translateY(-1px); }
}
@keyframes charShadow {
    0%, 100% { transform: scaleX(1);    opacity: 0.35; }
    50%      { transform: scaleX(0.93); opacity: 0.28; }
}

/* Eye blink occasionally */
.weather-character .char-eyes ellipse {
    animation: blink 6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    94%, 96%      { transform: scaleY(0.1); }
}

/* Shiver — when freezing */
.weather-character[data-shiver="1"] .char-body {
    animation: charShiver 0.14s ease-in-out infinite;
}
@keyframes charShiver {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(1.5px); }
}

/* ─── ITEM DEFAULTS — all hidden with smooth close-transition ─── */
.weather-character .char-sunglasses,
.weather-character .char-scarf,
.weather-character .char-hat,
.weather-character .char-sunhat,
.weather-character .char-umbrella,
.weather-character .char-coat,
.weather-character .char-sunscreen-spark {
    opacity: 0;
    transform: scale(0);
    transform-origin: 100px 100px;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.7, 0, 0.84, 0);
}

/* ═══ UMBRELLA ═══ */
.weather-character .char-umbrella {
    /* Origin at the pole-canopy junction so the open animation scales the umbrella
       outward from where the pole meets the canopy (matches new proportions). */
    transform-origin: 100px 29px;
}
.weather-character .char-umbrella .umbrella-canopy {
    fill: var(--hat);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
}
.weather-character .char-umbrella .umbrella-rib {
    fill: none;
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 1.1;
    stroke-linecap: round;
}
.weather-character .char-umbrella .umbrella-pole,
.weather-character .char-umbrella .umbrella-handle {
    stroke: #5a4f56;
    stroke-linecap: round;
}
.weather-character .char-umbrella .umbrella-tip {
    fill: var(--hat-cuff);
}
.weather-character[data-umbrella="1"] .char-umbrella {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: umbrellaOpen 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes umbrellaOpen {
    0%   { opacity: 0; transform: scale(0) rotate(-35deg); }
    50%  { opacity: 1; transform: scale(0.75) rotate(-8deg); }
    75%  { transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ═══ SUNGLASSES ═══ */
.weather-character .char-sunglasses ellipse {
    fill: #1a1a22;
    stroke: #44444c;
    stroke-width: 1;
}
.weather-character .char-sunglasses line {
    stroke: #44444c;
}
.weather-character .char-sunglasses .lens-highlight {
    fill: rgba(255, 255, 255, 0.55);
    stroke: none;
}
.weather-character[data-sunglasses="1"] .char-sunglasses {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100px 80px;
    animation: itemDropIn 0.45s ease;
}

/* ═══ SCARF (knit) ═══ */
.weather-character .char-scarf .char-scarf-wrap,
.weather-character .char-scarf .char-scarf-tail {
    fill: var(--scarf);
}
.weather-character .char-scarf .char-scarf-stripe {
    fill: var(--scarf-stripe);
    opacity: 0.6;
}
.weather-character[data-scarf="1"] .char-scarf {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100px 125px;
    animation: itemDropIn 0.5s ease 0.05s;
}

/* ═══ WINTER HAT (beanie + cuff + pompom) ═══ */
.weather-character .char-hat .char-hat-crown { fill: var(--hat); }
.weather-character .char-hat .char-hat-cuff  { fill: var(--hat-cuff); }
.weather-character .char-hat .char-hat-pompom { fill: #fff; }
.weather-character .char-hat .char-hat-pompom-dot { fill: rgba(150, 150, 160, 0.6); }
.weather-character[data-hat="1"] .char-hat {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100px 60px;
    animation: itemDropIn 0.5s ease;
}

/* ═══ SUN HAT (wide brim) ═══ */
.weather-character .char-sunhat .char-sunhat-brim,
.weather-character .char-sunhat .char-sunhat-crown { fill: var(--sunhat); }
.weather-character .char-sunhat .char-sunhat-band  { fill: var(--sunhat-band); }
.weather-character[data-sunhat="1"] .char-sunhat {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100px 55px;
    animation: itemDropIn 0.55s ease;
}

/* ═══ COAT (overlay, hides sleeves) ═══ */
.weather-character .char-coat .char-coat-body { fill: var(--coat); }
.weather-character .char-coat .char-coat-button {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.weather-character[data-coat="1"] .char-coat {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100px 170px;
    animation: itemDropIn 0.5s ease;
}

/* ═══ SUNSCREEN sparkles ═══ */
.weather-character .char-sunscreen-spark path {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
.weather-character[data-sunscreen="1"] .char-sunscreen-spark {
    opacity: 1;
    transform: scale(1);
    animation: sunscreenSparkle 2s ease-in-out infinite;
}
.weather-character[data-sunscreen="1"] .char-sunscreen-spark path:nth-child(2) { animation-delay: -0.6s; }
.weather-character[data-sunscreen="1"] .char-sunscreen-spark path:nth-child(3) { animation-delay: -1.2s; }

@keyframes sunscreenSparkle {
    0%, 100% { opacity: 0;   transform: scale(0.3); }
    20%      { opacity: 1;   transform: scale(1.3); }
    40%      { opacity: 0.5; transform: scale(0.9); }
    55%      { opacity: 1;   transform: scale(1.15); }
    70%      { opacity: 0;   transform: scale(0.5); }
}

/* Generic drop-in for clothing items */
@keyframes itemDropIn {
    0%   { opacity: 0; transform: scale(0) translateY(-15px) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.1) translateY(0) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

/* ───── MODAL MODE — larger temp, more breathing room ───── */
.weather-live--modal .weather-content {
    padding: 2rem 2.2rem 1.8rem;
    min-height: 0;
}
.weather-live--modal .weather-main {
    margin-top: 2rem;
    padding-bottom: 1rem;
}
.weather-live.weather-live--modal .weather-temp {
    font-size: clamp(4rem, 11vw, 6.5rem);
    letter-spacing: -0.04em;
}
.weather-live--modal .weather-condition { font-size: 1.4rem; margin-top: 0.7rem; }
.weather-live--modal .weather-feels    { font-size: 0.95rem; }
.weather-live--modal .weather-city     { font-size: 1.1rem; }
.weather-live--modal .weather-city svg { width: 17px; height: 17px; }
.weather-live--modal .weather-action-btn { width: 36px; height: 36px; border-radius: 10px; }
.weather-live--modal .weather-action-btn svg { width: 16px; height: 16px; }
.weather-live--modal .weather-stats { padding: 1.1rem 1.3rem; gap: 1.5rem; margin-top: 1.5rem; border-radius: 18px; }
.weather-live--modal .weather-stat svg { width: 20px; height: 20px; }
.weather-live--modal .weather-stat-value { font-size: 1.05rem; }
.weather-live--modal .weather-stat-label { font-size: 0.78rem; }
.weather-live--modal .weather-forecast-strip { gap: 0.55rem; margin-top: 1.2rem; }
.weather-live--modal .weather-forecast-day   { padding: 0.7rem 0.4rem; border-radius: 14px; }
.weather-live--modal .weather-forecast-day-icon { font-size: 1.5rem; }
.weather-live--modal .weather-forecast-day-temps { font-size: 0.82rem; }
.weather-live--modal .weather-sun  { width: 130px; height: 130px; top: 12%; right: 14%; }
.weather-live--modal .weather-moon { width: 145px; height: 145px; top: 10%; right: 14%; }
.weather-live--modal .weather-landscape { height: 52%; }
.weather-live--modal .weather-character { width: 150px; height: 240px; bottom: 14px; right: 13%; }
/* Reserve room at content's bottom so the character isn't covered by forecast strip. */
.weather-live--modal .weather-content { padding-bottom: 240px; }

/* Mobile modal: smaller character + lower padding reserve so stats don't get squished */
@media (max-width: 600px) {
    .weather-live--modal .weather-landscape { height: 42%; }
    .weather-live--modal .weather-character { width: 105px; height: 165px; bottom: 10px; right: 8%; }
    .weather-live--modal .weather-content   { padding-bottom: 165px; }
}

/* ───── PAUSED (off-screen / modal closed) ───── */
.weather-live.is-paused .weather-sky::before,
.weather-live.is-paused .weather-sun .sun-core,
.weather-live.is-paused .weather-sun .sun-corona,
.weather-live.is-paused .weather-sun .sun-rays-container,
.weather-live.is-paused .weather-sun .sun-ray,
.weather-live.is-paused .weather-moon .moon-glow,
.weather-live.is-paused .weather-stars .star,
.weather-live.is-paused .weather-shooting .shooting,
.weather-live.is-paused .weather-aurora .aurora-band,
.weather-live.is-paused .weather-clouds .cloud,
.weather-live.is-paused .weather-storm-clouds .storm-cloud,
.weather-live.is-paused .weather-rain .drop,
.weather-live.is-paused .weather-splashes .splash,
.weather-live.is-paused .weather-snow .flake,
.weather-live.is-paused .weather-fog .mist,
.weather-live.is-paused .weather-lightning,
.weather-live.is-paused .weather-lightning-bolts .bolt,
.weather-live.is-paused .weather-heat,
.weather-live.is-paused .weather-motes .mote,
.weather-live.is-paused .weather-character .char-body,
.weather-live.is-paused .weather-character .char-shadow,
.weather-live.is-paused .weather-character .char-sunscreen-spark,
.weather-live.is-paused .weather-character .char-eyes ellipse,
.weather-live.is-paused .weather-character .char-head-group,
.weather-live.is-paused .tree-pivot,
.weather-live.is-paused .weather-plane .plane-wrap,
.weather-live.is-paused .weather-tornado,
.weather-live.is-paused .weather-tornado .tornado-svg,
.weather-live.is-paused .weather-tornado .tornado-swirl,
.weather-live.is-paused .firefly,
.weather-live.is-paused .cottage-smoke ellipse,
.weather-live.is-paused .ls-birds .bird {
    animation-play-state: paused !important;
}

/* ───── MOBILE ───── */
@media (max-width: 600px) {
    .weather-live { min-height: 340px; }
    .weather-content { padding: 1.25rem 1.25rem 1.1rem; min-height: 340px; }
    .weather-live .weather-temp { font-size: clamp(2.75rem, 11vw, 3.5rem); }
    .weather-condition { font-size: 1rem; }
    .weather-stats { gap: 0.6rem; padding: 0.7rem 0.85rem; }
    .weather-stat-value { font-size: 0.82rem; }
    .weather-stat-label { font-size: 0.66rem; }
    .weather-stat svg { width: 14px; height: 14px; }
    .weather-sun, .weather-moon { transform: scale(0.85); top: 10%; right: 12%; }
    .weather-forecast-day { padding: 0.45rem 0.2rem; }
    .weather-forecast-day-icon { font-size: 1rem; }
}