/* ═══════════════════════════════════════════════
   WEATHERCAST — Android-Style Animated UI
   ═══════════════════════════════════════════════ */

:root {
    --bg:       #060b18;
    --bg2:      #0d1425;
    --card:     rgba(255,255,255,0.055);
    --card-b:   rgba(255,255,255,0.09);
    --primary:  #38bdf8;
    --accent:   #818cf8;
    --warm:     #fbbf24;
    --danger:   #f87171;
    --success:  #34d399;
    --text:     #f1f5f9;
    --muted:    #64748b;
    --muted2:   #94a3b8;
    --radius:   20px;
    --radius-sm:12px;
    --shadow:   0 20px 60px rgba(0,0,0,0.5);
    --safe-top: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
    width:100%; height:100%;
    overflow:hidden;
    background: var(--bg);
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ── CANVAS BACKGROUND ──────────────────────────── */
#bgCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── SCREENS ────────────────────────────────────── */
.screen {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
}
.screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
}
.screen.slide-out-left {
    opacity: 0;
    transform: translateX(-40px);
}
.screen.slide-in-right {
    animation: slideInRight .4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes slideInRight {
    from { opacity:0; transform:translateX(40px); }
    to   { opacity:1; transform:translateX(0); }
}


/* ── ANIMATED GRADIENT TEXT ───────────────────────────────────── */
.gradient-text {
    background: linear-gradient(
        90deg,
        #38bdf8,
        #818cf8,
        #fbbf24,
        #f97316,
        #38bdf8
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
    display: inline-block;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* ── DYNAMIC WEATHER LOGO (NO CIRCLE, PURE GLOW ON ICON) ── */
.weather-logo {
    position: relative;
    margin-bottom: 16px;
    cursor: pointer;
}

.logo-container {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: transparent !important;
}

/* COMPLETELY REMOVE the circle glow element */
.logo-glow {
    display: none;
}

/* MAIN ANIMATED ICON — enhanced direct glow without circle */
.weather-icon-animated {
    font-size: 5.5rem;
    position: relative;
    z-index: 2;
    transition: filter 0.8s ease, transform 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
    animation: iconBob 4s ease-in-out infinite;
    will-change: transform, filter;
}

@keyframes iconBob {
    0%,100% { transform: translateY(0) rotate(-2deg) scale(1); }
    50%      { transform: translateY(-10px) rotate(2deg) scale(1.05); }
}

@keyframes iconScale {
    0%   { transform: scale(0) rotate(-15deg); opacity:0; }
    60%  { transform: scale(1.2) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); opacity:1; }
}

/* ─── SUNNY - Warm pulse + gentle spin ─── */
.weather-logo.sunny .weather-icon-animated {
    filter: drop-shadow(0 0 6px #fbbf24) drop-shadow(0 0 14px rgba(251,191,36,0.7)) drop-shadow(0 0 22px rgba(249,115,22,0.4));
    animation: iconBob 4s ease-in-out infinite, sunnyWarmPulse 2s ease-in-out infinite;
}
@keyframes sunnyWarmPulse {
    0%,100% { filter: drop-shadow(0 0 6px #fbbf24) drop-shadow(0 0 14px rgba(251,191,36,0.6)); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 10px #fbbf24) drop-shadow(0 0 22px rgba(251,191,36,0.9)) drop-shadow(0 0 30px rgba(249,115,22,0.5)); transform: scale(1.02); }
}

/* ─── RAINY - Droplet shake + vertical bounce ─── */
.weather-logo.rainy .weather-icon-animated {
    filter: drop-shadow(0 0 6px #38bdf8) drop-shadow(0 0 14px rgba(56,189,248,0.7)) drop-shadow(0 0 20px rgba(14,165,233,0.4));
    animation: iconRainDrop 2s ease-in-out infinite, rainShake 0.3s ease-in-out infinite;
}
@keyframes iconRainDrop {
    0%,100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(-5px) scale(1.02); }
    60%      { transform: translateY(3px) scale(0.98); }
}
@keyframes rainShake {
    0%,100% { transform: translateX(0) rotate(0deg); }
    25%     { transform: translateX(-1px) rotate(-1deg); }
    75%     { transform: translateX(1px) rotate(1deg); }
}

/* ─── CLOUDY - Slow drift + misty pulse ─── */
.weather-logo.cloudy .weather-icon-animated {
    filter: drop-shadow(0 0 6px rgb(189,206,229)) drop-shadow(0 0 12px rgba(255,255,255,0.5));
    animation: iconDrift 5s ease-in-out infinite, cloudFade 3s ease-in-out infinite;
}
@keyframes iconDrift {
    0%,100% { transform: translateX(0) translateY(0) scale(1); }
    25%     { transform: translateX(4px) translateY(-2px) scale(1.01); }
    50%     { transform: translateX(-2px) translateY(1px) scale(0.99); }
    75%     { transform: translateX(3px) translateY(-1px) scale(1); }
}
@keyframes cloudFade {
    0%,100% { opacity: 0.9; filter: drop-shadow(0 0 5px rgba(148,163,184,0.7)); }
    50%     { opacity: 1; filter: drop-shadow(0 0 10px rgba(203,213,225,0.9)) drop-shadow(0 0 18px rgba(148,163,184,0.5)); }
}

/* ─── STORMY - Dramatic jitter + flash + shake ─── */
.weather-logo.stormy .weather-icon-animated {
    filter: drop-shadow(0 0 6px #a78bfa) drop-shadow(0 0 14px rgba(167,139,250,0.7));
    animation: stormJitter 0.15s ease-in-out infinite, stormFlash 1.5s ease-in-out infinite, stormShake 0.2s ease-in-out infinite;
}
@keyframes stormJitter {
    0%,100% { transform: translate(0, 0) rotate(0deg); }
    20%     { transform: translate(-2px, 1px) rotate(-2deg); }
    40%     { transform: translate(2px, -1px) rotate(2deg); }
    60%     { transform: translate(-1px, -1px) rotate(-1deg); }
    80%     { transform: translate(1px, 2px) rotate(1deg); }
}
@keyframes stormFlash {
    0%,85%,100% { filter: drop-shadow(0 0 6px #a78bfa) drop-shadow(0 0 14px rgba(167,139,250,0.7)); }
    90%         { filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 22px #c4b5fd) drop-shadow(0 0 30px #a78bfa); }
    95%         { filter: drop-shadow(0 0 6px #a78bfa) drop-shadow(0 0 14px rgba(167,139,250,0.7)); }
}
@keyframes stormShake {
    0%,100% { transform: rotate(0deg); }
    50%     { transform: rotate(3deg); }
}

/* ─── SNOWY - Gentle float + spin + shimmer ─── */
.weather-logo.snowy .weather-icon-animated {
    filter: drop-shadow(0 0 6px #bae6fd) drop-shadow(0 0 14px rgba(186,230,253,0.7));
    animation: iconSnowSpin 6s linear infinite, snowFloat 2s ease-in-out infinite, snowShimmer 1.8s ease-in-out infinite;
}
@keyframes iconSnowSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(1); }
}
@keyframes snowFloat {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    50%     { transform: translateY(-6px) rotate(5deg); }
}
@keyframes snowShimmer {
    0%,100% { filter: drop-shadow(0 0 6px #bae6fd) drop-shadow(0 0 12px rgba(186,230,253,0.6)); opacity: 0.9; }
    50%     { filter: drop-shadow(0 0 10px #e0f2fe) drop-shadow(0 0 20px rgba(224,242,254,0.8)); opacity: 1; }
}

/* ─── FOGGY - Slow fade + wispy movement ─── */
.weather-logo.foggy .weather-icon-animated {
    filter: drop-shadow(0 0 5px #94a3b8) drop-shadow(0 0 10px rgba(148,163,184,0.5));
    animation: fogWisp 4s ease-in-out infinite, fogBlur 3s ease-in-out infinite;
}
@keyframes fogWisp {
    0%,100% { transform: translateX(0) translateY(0) scale(1); opacity: 0.8; }
    25%     { transform: translateX(3px) translateY(-2px) scale(1.02); opacity: 0.9; }
    50%     { transform: translateX(-2px) translateY(1px) scale(0.98); opacity: 0.75; }
    75%     { transform: translateX(2px) translateY(-1px) scale(1.01); opacity: 0.85; }
}
@keyframes fogBlur {
    0%,100% { filter: blur(0px) drop-shadow(0 0 2px #94a3b8); }
    50%     { filter: blur(0.8px) drop-shadow(0 0 4px #cbd5e1); }
}

/* ─── PARTLY CLOUDY - Sun peek + cloud drift ─── */
.weather-logo.partlycloudy .weather-icon-animated {
    text-shadow: 0 0 5px #fbbf24, 0 0 10px rgba(251,191,36,0.25), 0 0 14px rgba(148,163,184,0.2);
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.5)) drop-shadow(0 0 6px rgba(148,163,184,0.2));
    animation: partlyDrift 5s ease-in-out infinite, partlyGlow 3s ease-in-out infinite;
}
@keyframes partlyDrift {
    0%,100% { transform: translateX(0) translateY(0) rotate(-1deg) scale(1); }
    25%     { transform: translateX(3px) translateY(-4px) rotate(1deg) scale(1.02); }
    50%     { transform: translateX(-2px) translateY(-2px) rotate(-2deg) scale(1.01); }
    75%     { transform: translateX(2px) translateY(-3px) rotate(0deg) scale(1.03); }
}
@keyframes partlyGlow {
    0%,100% { text-shadow: 0 0 5px #fbbf24, 0 0 10px rgba(251,191,36,0.25); }
    50%     { text-shadow: 0 0 10px #fbbf24, 0 0 18px rgba(251,191,36,0.4), 0 0 24px rgba(148,163,184,0.15); }
}
.weather-logo.partlycloudy .particle {
    width: 5px; height: 5px;
    background: radial-gradient(circle, #fef3c7 40%, #fbbf24);
    box-shadow: 0 0 6px #fbbf24;
    border-radius: 50%;
}
.weather-logo.partlycloudy .p1 { animation: sunRay 3s ease-out infinite 0.0s; }
.weather-logo.partlycloudy .p2 { animation: sunRay2 3s ease-out infinite 0.5s; width:4px; height:4px; }
.weather-logo.partlycloudy .p3 { animation: cloudWisp 4s ease-in-out infinite 0.3s; width:10px; height:5px; background: rgba(148,163,184,0.5); box-shadow:none; border-radius:50%; }
.weather-logo.partlycloudy .p4 { animation: sunRay3 3s ease-out infinite 1.0s; }
.weather-logo.partlycloudy .p5 { animation: sunRay 3s ease-out infinite 1.5s; width:3px; height:3px; }
.weather-logo.partlycloudy .p6 { animation: cloudWisp2 4s ease-in-out infinite 1.0s; width:8px; height:4px; background: rgba(148,163,184,0.4); box-shadow:none; border-radius:50%; filter:blur(1px); }
.weather-logo.partlycloudy .p7 { animation: sunRay2 3s ease-out infinite 2.0s; width:4px; height:4px; }
.weather-logo.partlycloudy .p8 { animation: sunRay3 3s ease-out infinite 0.8s; width:3px; height:3px; }

/* ─── NIGHT - Starfield twinkle + orbit ─── */
.weather-logo.night .weather-icon-animated {
    text-shadow: 0 0 8px #f7eb7a, 0 0 16px rgba(249, 253, 181, 0.3), 0 0 24px rgba(226, 246, 92, 0.15);
    filter: drop-shadow(0 0 5px #fae28b) drop-shadow(0 0 10px rgba(213, 250, 139, 0.25));
    animation: nightOrbit 8s ease-in-out infinite, nightGlow 3s ease-in-out infinite;
}
@keyframes nightOrbit {
    0%,100% { transform: rotate(-3deg) translateY(0) scale(1); }
    30%     { transform: rotate(3deg) translateY(-6px) scale(1.04); }
    60%     { transform: rotate(-1deg) translateY(-3px) scale(1.02); }
}
@keyframes nightGlow {
    0%,100% { text-shadow: 0 0 8px #fcfdb5, 0 0 16px rgba(196,181,253,0.3); }
    50%     { text-shadow: 0 0 14px #ecfed6, 0 0 24px rgba(221,214,254,0.5), 0 0 35px rgba(167,139,250,0.2); }
}
.weather-logo.night .particle {
    width: 3px; height: 3px;
    background: radial-gradient(circle, #fff, #c4b5fd);
    box-shadow: 0 0 6px #948bfa;
    border-radius: 50%;
}
.weather-logo.night .p1 { animation: starTwinkle 2.5s ease-in-out infinite 0.0s;  }
.weather-logo.night .p2 { animation: starTwinkle 2.5s ease-in-out infinite 0.3s; width:2px; height:2px; }
.weather-logo.night .p3 { animation: starOrbit  4s ease-in-out infinite 0.6s; width:4px; height:4px; }
.weather-logo.night .p4 { animation: starTwinkle 2.5s ease-in-out infinite 0.9s; }
.weather-logo.night .p5 { animation: starTwinkle 2.5s ease-in-out infinite 1.2s; width:2px; height:2px; }
.weather-logo.night .p6 { animation: starOrbit  4s ease-in-out infinite 1.5s; }
.weather-logo.night .p7 { animation: starTwinkle 2.5s ease-in-out infinite 1.8s; width:4px; height:4px; }
.weather-logo.night .p8 { animation: starTwinkle 2.5s ease-in-out infinite 2.1s; width:2px; height:2px; }
@keyframes starTwinkle {
    0%,100% { opacity:0; transform:translate(-50px,-50px) scale(0.5); }
    30%     { opacity:1; transform:translate(-50px,-50px) scale(1.5); }
    60%     { opacity:0.5; transform:translate(-50px,-50px) scale(0.8); }
}
@keyframes starOrbit {
    0%   { opacity:0; transform:translate(-60px,-40px) rotate(0deg); }
    20%  { opacity:1; }
    100% { opacity:0; transform:translate(60px,-40px) rotate(180deg); }
}

/* ─── WINDY - Streaking gusts ─── */
.weather-logo.windy .weather-icon-animated {
    text-shadow: 0 0 6px #cbe9f7, 0 0 12px rgba(210, 237, 249, 0.3);
    filter: drop-shadow(0 0 4px #dff1f9);
    animation: windPush 1.5s ease-in-out infinite;
}
@keyframes windPush {
    0%,100% { transform: translateX(0) skewX(0deg) scale(1); }
    20%     { transform: translateX(4px) skewX(-3deg) scale(1.02); }
    40%     { transform: translateX(-2px) skewX(2deg) scale(0.98); }
    60%     { transform: translateX(3px) skewX(-2deg) scale(1.01); }
    80%     { transform: translateX(-1px) skewX(1deg) scale(1); }
}
.weather-logo.windy .particle {
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e1f4fd, transparent);
    box-shadow: 0 0 4px rgba(204, 226, 237, 0.5);
}
.weather-logo.windy .p1 { width:30px; animation: windStreak  1.2s linear infinite 0.0s;  }
.weather-logo.windy .p2 { width:20px; animation: windStreak  1.2s linear infinite 0.15s; }
.weather-logo.windy .p3 { width:25px; animation: windStreak2 1.2s linear infinite 0.30s; }
.weather-logo.windy .p4 { width:35px; animation: windStreak2 1.2s linear infinite 0.45s; }
.weather-logo.windy .p5 { width:18px; animation: windStreak  1.2s linear infinite 0.60s; }
.weather-logo.windy .p6 { width:28px; animation: windStreak2 1.2s linear infinite 0.75s; }
.weather-logo.windy .p7 { width:22px; animation: windStreak  1.2s linear infinite 0.90s; }
.weather-logo.windy .p8 { width:15px; animation: windStreak2 1.2s linear infinite 1.05s; }
@keyframes windStreak  { 0%{opacity:0;transform:translate(-80px,-20px)}  30%{opacity:0.8}  100%{opacity:0;transform:translate(80px,-5px)}  }
@keyframes windStreak2 { 0%{opacity:0;transform:translate(-80px,20px)}   30%{opacity:0.7}  100%{opacity:0;transform:translate(80px,10px)}  }

/* ─── HAIL - Icy bouncing pellets ─── */
.weather-logo.hail .weather-icon-animated {
    text-shadow: 0 0 6px #93c5fd, 0 0 14px rgba(147,197,253,0.35), 0 0 20px rgba(59,130,246,0.2);
    filter: drop-shadow(0 0 4px #60a5fa);
    animation: hailShake 0.4s ease-in-out infinite, hailPulse 2s ease-in-out infinite;
}
@keyframes hailShake {
    0%,100% { transform: translateX(0) translateY(0); }
    25%     { transform: translateX(-2px) translateY(1px); }
    75%     { transform: translateX(2px) translateY(-1px); }
}
@keyframes hailPulse {
    0%,100% { text-shadow: 0 0 6px #93c5fd, 0 0 14px rgba(147,197,253,0.35); }
    50%     { text-shadow: 0 0 10px #bfdbfe, 0 0 20px rgba(191,219,254,0.5); }
}
.weather-logo.hail .particle {
    width: 5px; height: 5px;
    background: radial-gradient(circle, #e0f2fe, #93c5fd);
    box-shadow: 0 0 5px #60a5fa;
    border-radius: 50%;
}
.weather-logo.hail .p1 { animation: hailDrop  1.0s linear infinite 0.0s; }
.weather-logo.hail .p2 { animation: hailDrop  1.0s linear infinite 0.13s; width:4px; height:4px; }
.weather-logo.hail .p3 { animation: hailDrop2 1.0s linear infinite 0.25s; }
.weather-logo.hail .p4 { animation: hailDrop2 1.0s linear infinite 0.38s; width:6px; height:6px; }
.weather-logo.hail .p5 { animation: hailDrop  1.0s linear infinite 0.50s; width:3px; height:3px; }
.weather-logo.hail .p6 { animation: hailDrop2 1.0s linear infinite 0.63s; }
.weather-logo.hail .p7 { animation: hailDrop  1.0s linear infinite 0.75s; width:4px; height:4px; }
.weather-logo.hail .p8 { animation: hailDrop2 1.0s linear infinite 0.88s; width:3px; height:3px; }
@keyframes hailDrop  { 0%{opacity:0;transform:translate(-35px,-70px)} 15%{opacity:1} 80%{opacity:0.6} 100%{opacity:0;transform:translate(-5px,65px)} }
@keyframes hailDrop2 { 0%{opacity:0;transform:translate(35px,-70px)}  15%{opacity:1} 80%{opacity:0.6} 100%{opacity:0;transform:translate(60px,60px)} }

/* ─── RAINBOW - Colorful arc pulse ─── */
.weather-logo.rainbow .weather-icon-animated {
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.5)) drop-shadow(0 0 10px rgba(167,139,250,0.3));
    animation: rainbowBounce 2s ease-in-out infinite, rainbowHue 4s linear infinite;
}
@keyframes rainbowBounce {
    0%,100% { transform: scale(1) rotate(-2deg); }
    50%     { transform: scale(1.08) rotate(2deg) translateY(-4px); }
}
@keyframes rainbowHue {
    0%   { filter: drop-shadow(0 0 6px rgba(251,191,36,0.6)) hue-rotate(0deg); }
    100% { filter: drop-shadow(0 0 6px rgba(251,191,36,0.6)) hue-rotate(360deg); }
}
.weather-logo.rainbow .particle {
    width: 6px; height: 6px; border-radius: 50%;
}
.weather-logo.rainbow .p1 { background:#f87171; box-shadow:0 0 8px #f87171; animation: rbParticle 2s ease-out infinite 0.0s; }
.weather-logo.rainbow .p2 { background:#fb923c; box-shadow:0 0 8px #fb923c; animation: rbParticle 2s ease-out infinite 0.25s; width:5px;height:5px; }
.weather-logo.rainbow .p3 { background:#fbbf24; box-shadow:0 0 8px #fbbf24; animation: rbParticle2 2s ease-out infinite 0.0s; }
.weather-logo.rainbow .p4 { background:#4ade80; box-shadow:0 0 8px #4ade80; animation: rbParticle2 2s ease-out infinite 0.25s; width:5px;height:5px; }
.weather-logo.rainbow .p5 { background:#38bdf8; box-shadow:0 0 8px #38bdf8; animation: rbParticle 2s ease-out infinite 0.5s; }
.weather-logo.rainbow .p6 { background:#818cf8; box-shadow:0 0 8px #818cf8; animation: rbParticle2 2s ease-out infinite 0.5s; }
.weather-logo.rainbow .p7 { background:#e879f9; box-shadow:0 0 8px #e879f9; animation: rbParticle 2s ease-out infinite 0.75s; width:5px;height:5px; }
.weather-logo.rainbow .p8 { background:#f472b6; box-shadow:0 0 8px #f472b6; animation: rbParticle2 2s ease-out infinite 0.75s; width:4px;height:4px; }
@keyframes rbParticle  { 0%{opacity:0;transform:translate(0,0) scale(0)} 20%{opacity:1} 100%{opacity:0;transform:translate(-70px,-60px) scale(0.3)} }
@keyframes rbParticle2 { 0%{opacity:0;transform:translate(0,0) scale(0)} 20%{opacity:1} 100%{opacity:0;transform:translate(70px,-60px) scale(0.3)} }

/* ─── HOT (Extreme heat) - Ripple effect ─── */
.weather-logo.hot .weather-icon-animated {
    text-shadow: 0 0 8px #f97316, 0 0 16px rgba(249,115,22,0.4), 0 0 24px rgba(234,88,12,0.25);
    filter: drop-shadow(0 0 4px #f97316) drop-shadow(0 0 8px rgba(249,115,22,0.3));
    animation: heatRipple 0.8s ease-in-out infinite, heatWave 1.5s ease-in-out infinite;
}
@keyframes heatRipple {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06) rotate(2deg); }
}
@keyframes heatWave {
    0%,100% { filter: drop-shadow(0 0 4px #f97316) blur(0px); }
    50%     { filter: drop-shadow(0 0 8px #f97316) blur(0.3px); }
}

/* ─── COLD (Freezing) - Shiver effect ─── */
.weather-logo.cold .weather-icon-animated {
    text-shadow: 0 0 5px #34b7f4, 0 0 10px rgba(125,211,252,0.3);
    filter: drop-shadow(0 0 3px #7dd3fc);
    animation: coldShiver 0.12s ease-in-out infinite, iceGlow 2s ease-in-out infinite;
}
@keyframes coldShiver {
    0%,100% { transform: translate(0, 0) rotate(0deg); }
    25%     { transform: translate(-1px, 1px) rotate(-1deg); }
    50%     { transform: translate(1px, -1px) rotate(1deg); }
    75%     { transform: translate(-1px, -1px) rotate(-0.5deg); }
}
@keyframes iceGlow {
    0%,100% { text-shadow: 0 0 5px #4bc4fd, 0 0 10px rgba(125,211,252,0.3); }
    50%     { text-shadow: 0 0 10px #64c9ff, 0 0 18px rgba(186,230,253,0.5); }
}

/* Keep particle animations working */
.weather-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* ─── SUNNY PARTICLES — golden sparks radiating out ─── */
.weather-logo.sunny .particle {
    width: 6px; height: 6px;
    background: radial-gradient(circle, #fff9 30%, #fbbf24);
    box-shadow: 0 0 6px #fbbf24, 0 0 12px rgba(251,191,36,0.6);
}
.weather-logo.sunny .p1 { animation: sunRay 2.2s ease-out infinite 0.0s; }
.weather-logo.sunny .p2 { animation: sunRay 2.2s ease-out infinite 0.28s; width:4px; height:4px; }
.weather-logo.sunny .p3 { animation: sunRay 2.2s ease-out infinite 0.55s; width:5px; height:5px; }
.weather-logo.sunny .p4 { animation: sunRay 2.2s ease-out infinite 0.83s; }
.weather-logo.sunny .p5 { animation: sunRay2 2.2s ease-out infinite 0.0s;  width:4px; height:4px; }
.weather-logo.sunny .p6 { animation: sunRay2 2.2s ease-out infinite 0.4s;  }
.weather-logo.sunny .p7 { animation: sunRay3 2.2s ease-out infinite 0.15s; width:5px; height:5px; }
.weather-logo.sunny .p8 { animation: sunRay3 2.2s ease-out infinite 0.6s;  width:4px; height:4px; }
@keyframes sunRay  { 0%{opacity:0;transform:translate(-4px,-4px) scale(0)} 15%{opacity:1} 100%{opacity:0;transform:translate(-80px,-80px) scale(0.3)} }
@keyframes sunRay2 { 0%{opacity:0;transform:translate(4px,-4px) scale(0)}  15%{opacity:1} 100%{opacity:0;transform:translate(80px,-80px) scale(0.3)} }
@keyframes sunRay3 { 0%{opacity:0;transform:translate(-4px,4px) scale(0)}  15%{opacity:1} 100%{opacity:0;transform:translate(-60px,70px) scale(0.3)} }

/* ─── RAINY PARTICLES — blue teardrops falling ─── */
.weather-logo.rainy .particle {
    width: 3px; height: 9px;
    border-radius: 3px 3px 50% 50%;
    background: linear-gradient(to bottom, #7dd3fc, #38bdf8);
    box-shadow: 0 0 6px rgba(56,189,248,0.5);
}
.weather-logo.rainy .p1 { animation: rainDrop 1.4s linear infinite 0.0s;  transform-origin: center; }
.weather-logo.rainy .p2 { animation: rainDrop 1.4s linear infinite 0.18s; }
.weather-logo.rainy .p3 { animation: rainDrop 1.4s linear infinite 0.36s; width:2px; height:6px; }
.weather-logo.rainy .p4 { animation: rainDrop 1.4s linear infinite 0.54s; }
.weather-logo.rainy .p5 { animation: rainDrop2 1.4s linear infinite 0.08s; width:2px; height:7px; }
.weather-logo.rainy .p6 { animation: rainDrop2 1.4s linear infinite 0.28s; }
.weather-logo.rainy .p7 { animation: rainDrop 1.4s linear infinite 0.65s;  width:2px; height:6px; }
.weather-logo.rainy .p8 { animation: rainDrop2 1.4s linear infinite 0.72s; width:2px; height:5px; }
@keyframes rainDrop  { 0%{opacity:0;transform:translate(-40px,-60px) rotate(15deg)}  20%{opacity:0.9} 100%{opacity:0;transform:translate(-10px,60px) rotate(15deg)} }
@keyframes rainDrop2 { 0%{opacity:0;transform:translate(30px,-60px) rotate(15deg)}   20%{opacity:0.9} 100%{opacity:0;transform:translate(60px,60px) rotate(15deg)} }

/* ─── CLOUDY PARTICLES — grey wisps drifting ─── */
.weather-logo.cloudy .particle {
    width: 8px; height: 5px;
    border-radius: 50%;
    background: rgba(148,163,184,0.6);
    box-shadow: 0 0 8px rgba(148,163,184,0.3);
    filter: blur(1px);
}
.weather-logo.cloudy .p1 { animation: cloudWisp  4s ease-in-out infinite 0.0s;  width:10px; height:6px; }
.weather-logo.cloudy .p2 { animation: cloudWisp  4s ease-in-out infinite 0.8s;  }
.weather-logo.cloudy .p3 { animation: cloudWisp2 4s ease-in-out infinite 0.3s;  width:12px; height:5px; }
.weather-logo.cloudy .p4 { animation: cloudWisp2 4s ease-in-out infinite 1.2s;  }
.weather-logo.cloudy .p5 { animation: cloudWisp  4s ease-in-out infinite 1.6s;  width:9px; }
.weather-logo.cloudy .p6 { animation: cloudWisp2 4s ease-in-out infinite 2.0s;  width:11px; }
.weather-logo.cloudy .p7 { animation: cloudWisp  4s ease-in-out infinite 2.4s;  }
.weather-logo.cloudy .p8 { animation: cloudWisp2 4s ease-in-out infinite 2.8s;  width:8px; }
@keyframes cloudWisp  { 0%{opacity:0;transform:translate(-70px,-10px)} 30%{opacity:0.5} 70%{opacity:0.3} 100%{opacity:0;transform:translate(70px,-15px)} }
@keyframes cloudWisp2 { 0%{opacity:0;transform:translate(60px,10px)}   30%{opacity:0.4} 70%{opacity:0.2} 100%{opacity:0;transform:translate(-60px,20px)} }

/* ─── STORMY PARTICLES — lightning sparks ─── */
.weather-logo.stormy .particle {
    width: 4px; height: 4px;
    background: radial-gradient(circle, #fff, #c4b5fd);
    box-shadow: 0 0 8px #a78bfa, 0 0 16px rgba(167,139,250,0.8);
    border-radius: 50%;
}
.weather-logo.stormy .p1 { animation: spark  0.9s ease-out infinite 0.00s; }
.weather-logo.stormy .p2 { animation: spark  0.9s ease-out infinite 0.11s; width:3px; height:3px; }
.weather-logo.stormy .p3 { animation: spark2 0.9s ease-out infinite 0.22s; }
.weather-logo.stormy .p4 { animation: spark2 0.9s ease-out infinite 0.33s; width:5px; height:5px; }
.weather-logo.stormy .p5 { animation: spark  0.9s ease-out infinite 0.45s; width:3px; height:3px; }
.weather-logo.stormy .p6 { animation: spark3 0.9s ease-out infinite 0.56s; }
.weather-logo.stormy .p7 { animation: spark3 0.9s ease-out infinite 0.67s; width:3px; height:3px; }
.weather-logo.stormy .p8 { animation: spark2 0.9s ease-out infinite 0.78s; }
@keyframes spark  { 0%{opacity:1;transform:translate(-5px,-5px) scale(1)} 100%{opacity:0;transform:translate(-70px,-55px) scale(0)} }
@keyframes spark2 { 0%{opacity:1;transform:translate(5px,-5px) scale(1)}  100%{opacity:0;transform:translate(65px,-60px) scale(0)} }
@keyframes spark3 { 0%{opacity:1;transform:translate(0,5px) scale(1)}     100%{opacity:0;transform:translate(30px,70px) scale(0)} }

/* ─── SNOWY PARTICLES — white flakes spiralling ─── */
.weather-logo.snowy .particle {
    width: 6px; height: 6px;
    background: radial-gradient(circle, #fff 40%, #bae6fd);
    box-shadow: 0 0 8px rgba(186,230,253,0.8), 0 0 16px rgba(186,230,253,0.4);
    border-radius: 50%;
}
.weather-logo.snowy .p1 { animation: snowFlake  3.5s ease-in-out infinite 0.0s;  width:5px; height:5px; }
.weather-logo.snowy .p2 { animation: snowFlake  3.5s ease-in-out infinite 0.44s; width:7px; height:7px; }
.weather-logo.snowy .p3 { animation: snowFlake2 3.5s ease-in-out infinite 0.88s; }
.weather-logo.snowy .p4 { animation: snowFlake2 3.5s ease-in-out infinite 1.32s; width:5px; height:5px; }
.weather-logo.snowy .p5 { animation: snowFlake  3.5s ease-in-out infinite 1.76s; width:4px; height:4px; }
.weather-logo.snowy .p6 { animation: snowFlake2 3.5s ease-in-out infinite 2.20s; width:6px; height:6px; }
.weather-logo.snowy .p7 { animation: snowFlake  3.5s ease-in-out infinite 2.64s; width:5px; height:5px; }
.weather-logo.snowy .p8 { animation: snowFlake2 3.5s ease-in-out infinite 3.08s; width:4px; height:4px; }
@keyframes snowFlake  {
    0%   { opacity:0; transform:translate(-30px,-70px) rotate(0deg) scale(0.5); }
    20%  { opacity:0.9; }
    80%  { opacity:0.5; }
    100% { opacity:0; transform:translate(20px,70px) rotate(360deg) scale(0.3); }
}
@keyframes snowFlake2 {
    0%   { opacity:0; transform:translate(40px,-60px) rotate(0deg) scale(0.5); }
    20%  { opacity:0.9; }
    80%  { opacity:0.4; }
    100% { opacity:0; transform:translate(-30px,70px) rotate(-360deg) scale(0.3); }
}

/* ─── CLEAR - Brilliant white-gold pulse + rays ─── */
.weather-logo.clear .weather-icon-animated {
    text-shadow: 0 0 10px #fef9c3, 0 0 20px rgba(253,224,71,0.5), 0 0 35px rgba(251,191,36,0.3);
    filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 14px rgba(253,224,71,0.5));
    animation: clearPulse 2s ease-in-out infinite, clearSpin 20s linear infinite;
}
@keyframes clearPulse {
    0%,100% { transform: scale(1); text-shadow: 0 0 10px #fef9c3, 0 0 20px rgba(253,224,71,0.5); }
    50%     { transform: scale(1.07); text-shadow: 0 0 18px #fff, 0 0 30px #fde047, 0 0 50px rgba(251,191,36,0.4); }
}
@keyframes clearSpin {
    from { filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 14px rgba(253,224,71,0.5)) hue-rotate(0deg); }
    to   { filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 14px rgba(253,224,71,0.5)) hue-rotate(15deg); }
}
.weather-logo.clear .particle {
    width: 6px; height: 6px;
    background: radial-gradient(circle, #fffde7 30%, #fde047);
    box-shadow: 0 0 8px #fde047, 0 0 16px rgba(253,224,71,0.7);
    border-radius: 50%;
}
.weather-logo.clear .p1 { animation: sunRay  2.0s ease-out infinite 0.0s; }
.weather-logo.clear .p2 { animation: sunRay2 2.0s ease-out infinite 0.25s; width:4px; height:4px; }
.weather-logo.clear .p3 { animation: sunRay3 2.0s ease-out infinite 0.5s; }
.weather-logo.clear .p4 { animation: sunRay  2.0s ease-out infinite 0.75s; width:5px; height:5px; }
.weather-logo.clear .p5 { animation: sunRay2 2.0s ease-out infinite 1.0s; width:4px; height:4px; }
.weather-logo.clear .p6 { animation: sunRay3 2.0s ease-out infinite 0.15s; }
.weather-logo.clear .p7 { animation: sunRay  2.0s ease-out infinite 1.25s; width:3px; height:3px; }
.weather-logo.clear .p8 { animation: sunRay2 2.0s ease-out infinite 0.9s; width:5px; height:5px; }

/* ─── LIGHTRAIN - Gentle drizzle drops ─── */
.weather-logo.lightrain .weather-icon-animated {
    text-shadow: 0 0 6px #7dd3fc, 0 0 12px rgba(125,211,252,0.35), 0 0 20px rgba(56,189,248,0.15);
    filter: drop-shadow(0 0 4px #38bdf8) drop-shadow(0 0 8px rgba(56,189,248,0.2));
    animation: lightRainBob 3s ease-in-out infinite, lightRainGlow 2.5s ease-in-out infinite;
}
@keyframes lightRainBob {
    0%,100% { transform: translateY(0) rotate(-1deg) scale(1); }
    40%     { transform: translateY(-5px) rotate(1deg) scale(1.02); }
    70%     { transform: translateY(2px) rotate(-0.5deg) scale(0.99); }
}
@keyframes lightRainGlow {
    0%,100% { text-shadow: 0 0 6px #7dd3fc, 0 0 12px rgba(125,211,252,0.35); }
    50%     { text-shadow: 0 0 10px #bae6fd, 0 0 20px rgba(186,230,253,0.5), 0 0 28px rgba(56,189,248,0.2); }
}
.weather-logo.lightrain .particle {
    width: 2px; height: 8px;
    border-radius: 2px 2px 50% 50%;
    background: linear-gradient(to bottom, rgba(186,230,253,0.9), rgba(56,189,248,0.6));
    box-shadow: 0 0 5px rgba(56,189,248,0.4);
}
.weather-logo.lightrain .p1 { animation: lightDrop  2.0s linear infinite 0.0s;  width:1px; height:7px; }
.weather-logo.lightrain .p2 { animation: lightDrop2 2.0s linear infinite 0.25s; }
.weather-logo.lightrain .p3 { animation: lightDrop  2.0s linear infinite 0.5s;  width:1px; height:5px; }
.weather-logo.lightrain .p4 { animation: lightDrop2 2.0s linear infinite 0.75s; width:1px; height:9px; }
.weather-logo.lightrain .p5 { animation: lightDrop  2.0s linear infinite 1.0s; }
.weather-logo.lightrain .p6 { animation: lightDrop2 2.0s linear infinite 1.25s; width:1px; height:6px; }
.weather-logo.lightrain .p7 { animation: lightDrop  2.0s linear infinite 0.6s;  width:1px; height:8px; }
.weather-logo.lightrain .p8 { animation: lightDrop2 2.0s linear infinite 1.5s;  width:1px; height:7px; }
@keyframes lightDrop  { 0%{opacity:0;transform:translate(-50px,-65px) rotate(10deg)} 20%{opacity:0.7} 100%{opacity:0;transform:translate(-30px,65px) rotate(10deg)} }
@keyframes lightDrop2 { 0%{opacity:0;transform:translate(30px,-65px) rotate(10deg)}  20%{opacity:0.7} 100%{opacity:0;transform:translate(55px,65px) rotate(10deg)} }

/* ─── THUNDER - Lightning bolt flash + electric sparks ─── */
.weather-logo.thunder .weather-icon-animated {
    text-shadow: 0 0 10px #fde047, 0 0 20px rgba(253,224,71,0.6), 0 0 35px rgba(250,204,21,0.3);
    filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 12px rgba(253,224,71,0.4));
    animation: thunderFlash 1.0s ease-in-out infinite, thunderJolt 0.1s ease-in-out infinite;
}
@keyframes thunderFlash {
    0%,70%,100% { text-shadow: 0 0 10px #fde047, 0 0 20px rgba(253,224,71,0.6); filter: drop-shadow(0 0 6px #fde047); }
    75%         { text-shadow: 0 0 30px #fff, 0 0 50px #fde047, 0 0 70px #fbbf24; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fde047); transform: scale(1.15); }
    80%         { text-shadow: 0 0 10px #fde047, 0 0 20px rgba(253,224,71,0.6); filter: drop-shadow(0 0 6px #fde047); }
    85%         { text-shadow: 0 0 25px #fff, 0 0 40px #fde047; filter: drop-shadow(0 0 15px #fff); transform: scale(1.1); }
}
@keyframes thunderJolt {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(1px, -1px); }
}
.weather-logo.thunder .particle {
    width: 3px; height: 3px;
    background: radial-gradient(circle, #fff, #fde047);
    box-shadow: 0 0 8px #fde047, 0 0 16px rgba(253,224,71,0.9);
    border-radius: 50%;
}
.weather-logo.thunder .p1 { animation: boltSpark  0.7s ease-out infinite 0.0s; }
.weather-logo.thunder .p2 { animation: boltSpark2 0.7s ease-out infinite 0.1s; width:4px; height:4px; }
.weather-logo.thunder .p3 { animation: boltSpark  0.7s ease-out infinite 0.2s; width:2px; height:2px; }
.weather-logo.thunder .p4 { animation: boltSpark3 0.7s ease-out infinite 0.05s; }
.weather-logo.thunder .p5 { animation: boltSpark2 0.7s ease-out infinite 0.35s; width:3px; height:3px; }
.weather-logo.thunder .p6 { animation: boltSpark  0.7s ease-out infinite 0.45s; }
.weather-logo.thunder .p7 { animation: boltSpark3 0.7s ease-out infinite 0.55s; width:2px; height:2px; }
.weather-logo.thunder .p8 { animation: boltSpark2 0.7s ease-out infinite 0.65s; width:4px; height:4px; }
@keyframes boltSpark  { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(-65px,-55px) scale(0.2)} }
@keyframes boltSpark2 { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(60px,-60px) scale(0.2)} }
@keyframes boltSpark3 { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(30px,70px) scale(0.2)} }

/* ─── BLIZZARD - Fast spinning snowflakes + icy wind ─── */
.weather-logo.blizzard .weather-icon-animated {
    text-shadow: 0 0 8px #74bff9, 0 0 18px rgba(158, 216, 255, 0.5), 0 0 28px rgba(125, 208, 253, 0.3);
    filter: drop-shadow(0 0 6px #8fd3f7) drop-shadow(0 0 12px rgba(130, 211, 255, 0.4));
    animation: blizzardSpin 3s linear infinite, blizzardShiver 0.08s ease-in-out infinite, blizzardGlow 2s ease-in-out infinite;
}
@keyframes blizzardSpin {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(360deg) scale(1); }
}
@keyframes blizzardShiver {
    0%,100% { margin-left: 0; }
    50%     { margin-left: 2px; }
}
@keyframes blizzardGlow {
    0%,100% { text-shadow: 0 0 8px #7ecafd, 0 0 18px rgba(224,242,254,0.5); }
    50%     { text-shadow: 0 0 14px #7aedf1, 0 0 28px rgba(224,242,254,0.7), 0 0 40px rgba(186,230,253,0.4); }
}
.weather-logo.blizzard .particle {
    width: 5px; height: 5px;
    background: radial-gradient(circle, #fff 50%, #bae6fd);
    box-shadow: 0 0 8px rgba(186,230,253,0.9), 0 0 16px rgba(186,230,253,0.5);
    border-radius: 50%;
}
.weather-logo.blizzard .p1 { animation: blizzardFlake  2.0s linear infinite 0.00s; width:7px; height:7px; }
.weather-logo.blizzard .p2 { animation: blizzardFlake2 2.0s linear infinite 0.25s; width:4px; height:4px; }
.weather-logo.blizzard .p3 { animation: blizzardFlake  2.0s linear infinite 0.50s; width:6px; height:6px; }
.weather-logo.blizzard .p4 { animation: blizzardFlake2 2.0s linear infinite 0.75s; }
.weather-logo.blizzard .p5 { animation: blizzardFlake  2.0s linear infinite 1.00s; width:4px; height:4px; }
.weather-logo.blizzard .p6 { animation: blizzardFlake2 2.0s linear infinite 1.25s; width:6px; height:6px; }
.weather-logo.blizzard .p7 { animation: blizzardFlake  2.0s linear infinite 1.50s; width:3px; height:3px; }
.weather-logo.blizzard .p8 { animation: blizzardFlake2 2.0s linear infinite 1.75s; width:5px; height:5px; }
@keyframes blizzardFlake  {
    0%   { opacity:0; transform:translate(-70px,-55px) rotate(0deg) scale(0.5); }
    15%  { opacity:1; }
    80%  { opacity:0.6; }
    100% { opacity:0; transform:translate(60px,65px) rotate(720deg) scale(0.2); }
}
@keyframes blizzardFlake2 {
    0%   { opacity:0; transform:translate(55px,-65px) rotate(0deg) scale(0.5); }
    15%  { opacity:1; }
    80%  { opacity:0.6; }
    100% { opacity:0; transform:translate(-65px,55px) rotate(-720deg) scale(0.2); }
}

/* ─── TORNADO - Spiralling vortex ─── */
.weather-logo.tornado .weather-icon-animated {
    text-shadow: 0 0 6px #94a3b8, 0 0 14px rgba(148,163,184,0.4), 0 0 22px rgba(71,85,105,0.25);
    filter: drop-shadow(0 0 4px #94a3b8) drop-shadow(0 0 8px rgba(148,163,184,0.3));
    animation: tornadoSpin 0.6s linear infinite, tornadoWobble 1.2s ease-in-out infinite;
}
@keyframes tornadoSpin {
    from { transform: rotate(0deg) scaleX(1); }
    to   { transform: rotate(360deg) scaleX(1); }
}
@keyframes tornadoWobble {
    0%,100% { transform: scaleX(1) scaleY(1); filter: drop-shadow(0 0 4px #94a3b8); }
    25%     { transform: scaleX(1.06) scaleY(0.97); }
    50%     { transform: scaleX(0.95) scaleY(1.06); filter: drop-shadow(0 0 8px #cbd5e1); }
    75%     { transform: scaleX(1.04) scaleY(0.96); }
}
.weather-logo.tornado .particle {
    background: rgba(148,163,184,0.7);
    box-shadow: 0 0 5px rgba(203,213,225,0.5);
    border-radius: 50%;
}
.weather-logo.tornado .p1 { width:6px; height:4px; animation: vortex  1.5s ease-in-out infinite 0.0s; }
.weather-logo.tornado .p2 { width:5px; height:3px; animation: vortex2 1.5s ease-in-out infinite 0.19s; }
.weather-logo.tornado .p3 { width:8px; height:4px; animation: vortex  1.5s ease-in-out infinite 0.38s; }
.weather-logo.tornado .p4 { width:6px; height:3px; animation: vortex2 1.5s ease-in-out infinite 0.56s; }
.weather-logo.tornado .p5 { width:5px; height:4px; animation: vortex  1.5s ease-in-out infinite 0.75s; }
.weather-logo.tornado .p6 { width:7px; height:3px; animation: vortex2 1.5s ease-in-out infinite 0.94s; }
.weather-logo.tornado .p7 { width:4px; height:4px; animation: vortex  1.5s ease-in-out infinite 1.13s; }
.weather-logo.tornado .p8 { width:6px; height:3px; animation: vortex2 1.5s ease-in-out infinite 1.31s; }
@keyframes vortex  {
    0%   { opacity:0; transform:translate(-70px,-30px) rotate(0deg) scale(0.3); }
    20%  { opacity:0.8; }
    50%  { opacity:0.5; transform:translate(-10px,0px) rotate(360deg) scale(0.8); }
    100% { opacity:0; transform:translate(60px,50px) rotate(720deg) scale(0.1); }
}
@keyframes vortex2 {
    0%   { opacity:0; transform:translate(65px,-40px) rotate(0deg) scale(0.3); }
    20%  { opacity:0.8; }
    50%  { opacity:0.5; transform:translate(10px,5px) rotate(-360deg) scale(0.8); }
    100% { opacity:0; transform:translate(-55px,55px) rotate(-720deg) scale(0.1); }
}

/* ─── FULLMOON - Golden halo + orbiting stars ─── */
.weather-logo.fullmoon .weather-icon-animated {
    text-shadow: 0 0 10px #fef9c3, 0 0 22px rgba(254,249,195,0.4), 0 0 35px rgba(253,224,71,0.2);
    filter: drop-shadow(0 0 7px #fde047) drop-shadow(0 0 16px rgba(253,224,71,0.35));
    animation: moonHalo 4s ease-in-out infinite, moonBob 6s ease-in-out infinite;
}
@keyframes moonHalo {
    0%,100% { text-shadow: 0 0 10px #fef9c3, 0 0 22px rgba(254,249,195,0.4), 0 0 35px rgba(253,224,71,0.2); }
    50%     { text-shadow: 0 0 18px #fff, 0 0 35px rgba(254,249,195,0.6), 0 0 55px rgba(253,224,71,0.3); }
}
@keyframes moonBob {
    0%,100% { transform: rotate(-4deg) translateY(0) scale(1); }
    40%     { transform: rotate(4deg) translateY(-8px) scale(1.04); }
    70%     { transform: rotate(-2deg) translateY(-4px) scale(1.02); }
}
.weather-logo.fullmoon .particle {
    width: 3px; height: 3px;
    background: radial-gradient(circle, #fff, #fde047);
    box-shadow: 0 0 7px #fef9c3, 0 0 14px rgba(253,224,71,0.6);
    border-radius: 50%;
}
.weather-logo.fullmoon .p1 { animation: moonOrbit  5.0s linear infinite 0.0s;  width:4px; height:4px; }
.weather-logo.fullmoon .p2 { animation: moonOrbit2 5.0s linear infinite 0.63s; width:2px; height:2px; }
.weather-logo.fullmoon .p3 { animation: moonOrbit  5.0s linear infinite 1.25s; }
.weather-logo.fullmoon .p4 { animation: moonOrbit2 5.0s linear infinite 1.88s; width:3px; height:3px; }
.weather-logo.fullmoon .p5 { animation: moonStar   3.0s ease-in-out infinite 0.0s; }
.weather-logo.fullmoon .p6 { animation: moonStar   3.0s ease-in-out infinite 0.75s; width:2px; height:2px; }
.weather-logo.fullmoon .p7 { animation: moonStar   3.0s ease-in-out infinite 1.5s; width:4px; height:4px; }
.weather-logo.fullmoon .p8 { animation: moonOrbit  5.0s linear infinite 2.5s; width:2px; height:2px; }
@keyframes moonOrbit  {
    0%   { opacity:0; transform:translate(-70px,-40px) scale(0.5); }
    15%  { opacity:1; }
    85%  { opacity:0.6; }
    100% { opacity:0; transform:translate(70px,-40px) scale(0.5); }
}
@keyframes moonOrbit2 {
    0%   { opacity:0; transform:translate(70px,-50px) scale(0.5); }
    15%  { opacity:1; }
    85%  { opacity:0.6; }
    100% { opacity:0; transform:translate(-70px,-50px) scale(0.5); }
}
@keyframes moonStar {
    0%,100% { opacity:0; transform:translate(var(--tx,-55px), var(--ty,-55px)) scale(0.5); }
    30%     { opacity:1; transform:translate(var(--tx,-55px), var(--ty,-55px)) scale(1.5); }
    60%     { opacity:0.4; }
}
.weather-logo.fullmoon .p5 { --tx:-55px; --ty:-50px; }
.weather-logo.fullmoon .p6 { --tx: 60px; --ty:-55px; }
.weather-logo.fullmoon .p7 { --tx:-60px; --ty: 45px; }

/* ── PWA INSTALL BANNER ───────────────────────────────────── */
.pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    width: calc(100% - 32px);
    max-width: 420px;
    background: rgba(13,20,37,0.95);
    border: 1px solid rgba(56,189,248,0.3);
    border-radius: 20px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(56,189,248,0.1);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
    opacity: 0;
}
.pwa-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.pwa-banner-icon { font-size: 2rem; flex-shrink: 0; }
.pwa-banner-text { flex: 1; }
.pwa-banner-title { font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 700; color: white; }
.pwa-banner-sub   { font-size: .75rem; color: var(--muted2); margin-top: 2px; }
.pwa-banner-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    border-radius: 50px;
    color: white;
    font-size: .85rem;
    font-weight: 700;
    padding: 9px 18px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    transition: transform .2s, box-shadow .2s;
}
.pwa-banner-btn:active { transform: scale(.95); }
.pwa-banner-close {
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    color: var(--muted2);
    font-size: .75rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}
.pwa-banner-close:hover { background: rgba(255,255,255,0.15); }

/* ── HOME SCREEN STYLES ───────────────────────────────────── */
.home-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    min-height: 100vh;
    width: 100%;
}

/* Home Header */
.home-header {
    text-align: center;
    margin-bottom: 40px;
}

.home-title {
    font-family: 'Bebas Neue', 'Space Grotesk', cursive;
    font-size: clamp(2.4rem, 10vw, 4.2rem);
    font-weight: 400;
    letter-spacing: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.home-sub {
    color: var(--muted2);
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Search Card */
/* ── ANIMATED GRADIENT BORDER KEYFRAMES ─────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes inputGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(56,189,248,0.15); }
    50%       { box-shadow: 0 0 24px rgba(129,140,248,0.25); }
}

/* ── SEARCH CARD WRAPPER (animated border trick) ── */
.search-card {
    width: 100%;
    max-width: 340px;
    position: relative;
    padding: 2px;                        /* border thickness */
    border-radius: 24px;
    margin-bottom: 20px;
    animation: fadeInUp 0.6s ease-out;
    background: linear-gradient(
        270deg,
        #38bdf8, #818cf8, #f472b6, #34d399, #f59e0b, #38bdf8
    );
    background-size: 400% 400%;
    animation: fadeInUp 0.6s ease-out, borderSpin 4s ease infinite;
    box-shadow:
        0 0 24px rgba(56,189,248,0.18),
        0 0 60px rgba(129,140,248,0.10),
        0 8px 32px rgba(0,0,0,0.4);
}

/* Inner card sits on top, masking the gradient background */
.search-card::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 22px;
    background: rgba(10, 12, 30, 0.92);
    backdrop-filter: blur(24px);
    z-index: 0;
}

/* All children above the pseudo mask */
.search-card > * {
    position: relative;
    z-index: 1;
}

/* inner padding applied via wrapper */
.search-card-inner {
    padding: 20px 18px 18px;
}

/* ── LABEL ─────────────────────────────────────── */
.search-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 18px 16px 0;
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── SEARCH INPUT ──────────────────────────────── */
.search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 11px 14px;
    gap: 8px;
    transition: all 0.35s ease;
    margin: 0 16px 14px;
}

.search-input-wrap:focus-within {
    border-color: rgba(56,189,248,0.6);
    background: rgba(56,189,248,0.07);
    animation: inputGlow 2s ease infinite;
}

.search-input-icon {
    color: #38bdf8;
    display: flex;
    opacity: 0.8;
}

.search-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
}

.search-input-wrap input::placeholder {
    color: rgba(255,255,255,0.25);
    font-style: italic;
}

.search-clear {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.search-clear.visible { display: flex; }

.search-clear:hover {
    background: rgba(248,113,113,0.2);
    border-color: rgba(248,113,113,0.4);
    color: #f87171;
    transform: scale(1.15);
}

/* ── DIVIDER ───────────────────────────────────── */
.divider {
    text-align: center;
    margin: 12px 16px;
    position: relative;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 26px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12));
}

.divider::before { left: 0; }
.divider::after  { right: 0; transform: scaleX(-1); }

.divider span {
    padding: 0 12px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    letter-spacing: 1px;
    font-weight: 500;
}

/* ── GPS BUTTON — flowing color gradient ───────── */
.btn-gps-full {
    width: calc(100% - 32px);
    margin: 0 16px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(
        270deg,
        #38bdf8, #818cf8, #f472b6, #34d399, #38bdf8
    );
    background-size: 300% 300%;
    animation: gpsFlow 3s ease infinite;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 12px 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
    box-shadow: 0 4px 20px rgba(56,189,248,0.3);
}

.btn-gps-full:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(129,140,248,0.45);
}

.btn-gps-full:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(56,189,248,0.2);
}

/* ── CREDIT ────────────────────────────────────── */
.home-credit {
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.7rem;
    text-align: center;
    margin-top: 20px;
}

/* ── ERROR TOAST ───────────────────────────────── */
.error-toast {
    margin: 4px 16px 16px;
    min-height: 16px;
    font-size: 0.78rem;
    color: #f87171;
    text-align: center;
    transition: opacity 0.3s;
}

/* ── LOADING SCREEN ─────────────────────────────── */
#screen-loading {
    align-items: center;
    justify-content: center;
    background: var(--bg);
}
.loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 24px;
}

.radar-anim {
    position: relative;
    width: 140px; height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radar-sweep {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(56,189,248,0.5) 100%);
    animation: radarSpin 2s linear infinite;
}
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radar-ring-l {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(56,189,248,0.3);
}
.rl1 { width:50px; height:50px; }
.rl2 { width:90px; height:90px; }
.rl3 { width:130px; height:130px; }
.radar-center-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary), 0 0 24px rgba(56,189,248,0.4);
    z-index: 2;
    animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.8)} }

.loading-city {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}
.loading-status { font-size: .85rem; color: var(--muted2); }
.loading-bar-wrap {
    width: 220px; height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}
.loading-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    border-radius: 4px;
    width: 0%;
    transition: width .4s ease;
}
.loading-steps { display:flex; gap:12px; }
.lstep {
    font-size: .75rem;
    color: var(--muted);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all .3s;
}
.lstep.active {
    color: var(--primary);
    border-color: rgba(56,189,248,0.3);
    background: rgba(56,189,248,0.08);
}
.lstep.done {
    color: var(--success);
    border-color: rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
}

/* ── RESULT SCREEN ──────────────────────────────── */
#screen-result { background: var(--bg); }

.result-topbar {
    display: flex;
    align-items: center;
    padding: calc(var(--safe-top) + 10px) 16px 12px;
    gap: 12px;
    background: rgba(6,11,24,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    z-index: 10;
}
.topbar-back, .topbar-refresh {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
}
.topbar-back:hover, .topbar-refresh:hover { background:rgba(255,255,255,0.13); }
.topbar-back:active, .topbar-refresh:active { transform:scale(.9); }
.topbar-loc { flex:1; text-align:center; }
.topbar-city { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:white; }
.topbar-country { font-size:.72rem; color:var(--muted2); margin-top:1px; }

.result-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.result-scroll::-webkit-scrollbar { display:none; }

/* ── HERO CARD ──────────────────────────────────── */
.hero-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 260px;
    box-shadow: var(--shadow);
}
.hero-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0369a1 0%, #0f172a 60%, #1e1b4b 100%);
    transition: background 1s ease;
}
.hero-card-content {
    position: relative;
    z-index: 1;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-weather-icon {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
    animation: iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat {
    0%,100% { transform:translateY(0) scale(1); }
    50%      { transform:translateY(-8px) scale(1.04); }
}

.hero-temp-row { display:flex; align-items:flex-start; gap:4px; }
.hero-temp {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4.5rem, 18vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: white;
    letter-spacing: -3px;
}
.hero-unit {
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    margin-top: 14px;
}
.hero-condition {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-top: 4px;
}
.hero-feels { font-size: .82rem; color: rgba(255,255,255,0.5); margin-top: 4px; }
.hero-hi-lo {
    display:flex; gap:10px; align-items:center;
    margin-top: 6px;
    font-size: .88rem;
    color: rgba(255,255,255,0.6);
}
.hero-hi-lo .sep { opacity:.4; }
.hero-meta {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.meta-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    padding: 5px 12px;
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
}
.meta-icon { font-size: .9rem; }

/* ── SECTION HEADER ─────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.section-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.section-badge {
    margin-left: auto;
    background: rgba(56,189,248,0.1);
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 50px;
    padding: 2px 10px;
    color: var(--primary);
    font-size: .68rem;
}

/* ── DETAIL GRID ────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.detail-tile {
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: var(--radius-sm);
    padding: 16px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .2s, background .2s;
    animation: tileIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.detail-tile:nth-child(1) { animation-delay:.05s }
.detail-tile:nth-child(2) { animation-delay:.1s }
.detail-tile:nth-child(3) { animation-delay:.15s }
.detail-tile:nth-child(4) { animation-delay:.2s }
.detail-tile:nth-child(5) { animation-delay:.25s }
.detail-tile:nth-child(6) { animation-delay:.3s }
@keyframes tileIn {
    from { opacity:0; transform:translateY(16px) scale(.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.detail-tile:active { transform:scale(.97); }
.dt-icon { font-size: 1.4rem; }
.dt-label { font-size: .68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.dt-val { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; color:white; }
.dt-sub { font-size:.72rem; color:var(--muted2); }
.dt-bar-wrap { height:4px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; margin-top:4px; }
.dt-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:4px; width:0%; transition:width 1s ease; }

/* ── SUN ARC CARD ───────────────────────────────── */
.sun-arc-card {
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}
.sun-arc-header {
    display:flex; align-items:center; gap:8px;
    font-size:.72rem; font-weight:600;
    color:var(--muted2); text-transform:uppercase; letter-spacing:1px;
    margin-bottom:12px;
}
.sun-arc-duration { margin-left:auto; color:var(--warm); font-size:.75rem; }
.sun-arc-wrap { overflow:hidden; }
.sun-arc-svg { width:100%; height:auto; }

/* ── HOURLY FORECAST ────────────────────────────── */
.hourly-container {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
}
.hourly-container::-webkit-scrollbar { display:none; }
.hourly-inner {
    display: flex;
    gap: 10px;
    padding-bottom: 4px;
    min-width: max-content;
}
.hour-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: 16px;
    min-width: 72px;
    transition: all .2s;
    cursor: default;
    animation: hourIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.hour-card:active { transform:scale(.95); }
.hour-card.now {
    background: rgba(56,189,248,0.12);
    border-color: rgba(56,189,248,0.35);
    box-shadow: 0 0 20px rgba(56,189,248,0.15);
}
@keyframes hourIn {
    from { opacity:0; transform:scale(.85) translateY(8px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
.hour-time { font-size:.7rem; color:var(--muted2); font-weight:600; }
.hour-card.now .hour-time { color:var(--primary); font-weight:700; }
.hour-icon { font-size:1.5rem; }
.hour-temp { font-size:.95rem; font-weight:700; color:white; font-family:'Space Grotesk',sans-serif; }
.hour-rain { font-size:.68rem; color:#60a5fa; font-weight:600; }
.hour-rain-bar { width:40px; height:3px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.hour-rain-fill { height:100%; background:#60a5fa; border-radius:3px; transition:width .6s; }

/* ── TEMP CHART ─────────────────────────────────── */
.temp-chart-card {
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}
#tempChart { width:100%; }

/* ── DAILY LIST ─────────────────────────────────── */
.daily-container { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.day-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: var(--radius-sm);
    transition: all .2s;
    animation: dayIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.day-row:active { transform:scale(.98) translateX(2px); background:rgba(255,255,255,0.08); }
@keyframes dayIn {
    from { opacity:0; transform:translateX(-16px); }
    to   { opacity:1; transform:translateX(0); }
}
.day-name { font-weight:700; min-width:40px; font-size:.9rem; font-family:'Space Grotesk',sans-serif; }
.day-icon { font-size:1.5rem; flex-shrink:0; }
.day-desc { flex:1; font-size:.8rem; color:var(--muted2); }
.day-rain { font-size:.75rem; color:#60a5fa; min-width:36px; text-align:right; font-weight:600; }
.day-temps { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.day-hi { font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700; color:white; }
.day-lo { font-family:'Space Grotesk',sans-serif; font-size:.88rem; color:var(--muted); }
.day-bar-wrap { width:50px; height:4px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; position:relative; }
.day-bar-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#f97316); border-radius:4px; }

/* ── PRECIP CARD ────────────────────────────────── */
.precip-card {
    background: var(--card);
    border: 1px solid var(--card-b);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}
.precip-bars { display:flex; align-items:flex-end; gap:10px; height:80px; }
.precip-bar-wrap {
    flex:1; display:flex; flex-direction:column;
    align-items:center; gap:5px; height:100%;
    justify-content:flex-end;
}
.precip-bar-track { width:100%; flex:1; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:6px; }
.precip-bar-fill { background:linear-gradient(0deg,#3b82f6,#60a5fa); border-radius:4px; width:100%; transition:height 1s cubic-bezier(.34,1.56,.64,1); }
.precip-bar-pct { font-size:.65rem; color:var(--muted2); font-weight:600; }
.precip-bar-day { font-size:.65rem; color:var(--muted); }

/* ── RIPPLE EFFECT ──────────────────────────────── */
.ripple {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,0.18);
    transform:scale(0); animation:rippleAnim .5s ease-out forwards;
    pointer-events:none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (min-width: 440px) {
    .search-card { border-radius: var(--radius); }
    #screen-home { justify-content: center; padding: 20px; }
    .home-hero { flex:none; margin-bottom:20px; }
    .result-scroll { padding: 20px 20px 0; }
    .detail-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
    #screen-home { align-items: center; }
    .search-card { max-width: 500px; width:100%; border-radius: var(--radius); }
    .hero-card { min-height: 300px; }
    .result-scroll { max-width: 700px; margin: 0 auto; padding: 20px; }
    .result-topbar { max-width: 700px; margin: 0 auto; }
    .detail-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}



.loading-steps {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.lstep {
    font-size: .75rem;
    color: var(--muted);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all .3s;
}
.lstep.active {
    color: var(--primary);
    border-color: rgba(56,189,248,0.3);
    background: rgba(56,189,248,0.08);
}
.lstep.done {
    color: var(--success);
    border-color: rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
}