/* ════════════════════════════════════════════════════════
   ATMOSPHERE CARD — server "feel" indicator
   Background gradient + 3-layer fog + rain/lightning + stars
   CSS-only animations untuk hemat CPU di mobile.
   Posisi sun/moon dihitung di JS dari world_time MC (0-23999 tick).
   Honor prefers-reduced-motion.
════════════════════════════════════════════════════════ */
/* clip-path: inset round = GPU-level clip yang menutup blur-leak filter, canvas pixel,
   dan transform animasi. Lebih ketat daripada overflow:hidden + contain:paint kombinasi.
   Trade-off: shadow di luar card juga ikut terpotong (kita memang tidak punya outer shadow di sini). */
.atmo-card{position:relative;overflow:hidden;isolation:isolate;contain:paint;border-radius:var(--r-md);clip-path:inset(0 round var(--r-md));transition:background .8s ease}
.atmo-bg,.atmo-stars,.atmo-rain,.atmo-flash{position:absolute;inset:0;pointer-events:none;z-index:0}
.atmo-fog{position:absolute;pointer-events:none;z-index:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden}
.atmo-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block;opacity:0;transition:opacity .6s ease;border-radius:inherit}
.atmo-card.has-canvas-fx .atmo-fx{opacity:1}
/* Saat canvas FX aktif, CSS rain/flash di-mute supaya tidak double-draw */
.atmo-card.has-canvas-fx .atmo-rain,
.atmo-card.has-canvas-fx .atmo-flash{display:none}
.atmo-bg{transition:opacity .6s ease;background-image:var(--atmo-bg,linear-gradient(135deg,rgba(34,211,238,0.07) 0%,rgba(96,165,250,0.06) 100%))}
.atmo-bg::before,.atmo-bg::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease}
.atmo-content{position:relative;z-index:1}
/* Saat fog tebal: tidak pakai scrim/background blok (jelek & berat).
   Cukup boost text contrast pakai text-shadow halus + warna sedikit lebih cerah. */
.atmo-card.has-fog .atmo-content .info-row{color:#cbd5e1}
.atmo-card.has-fog .atmo-content .info-row span{text-shadow:0 1px 2px rgba(6,10,14,.7)}
.atmo-card.has-fog .atmo-content .info-row b{color:#fde68a;text-shadow:0 1px 2px rgba(6,10,14,.7)}
.atmo-card.has-fog .atmo-content .sec-title{text-shadow:0 1px 2px rgba(6,10,14,.7)}

/* ── Fog — 3 layer drift, dibatasi area BAWAH card supaya text di atas tetap bersih ── */
/* Base layer: gradient dari transparan di atas → tebal di bawah, berhenti sebelum text */
/* ── Fog — single-layer linear gradient bottom-up + mask fade.
   Sebelumnya pakai 3 layer dengan radial-gradient di pseudo ::before/::after,
   tapi radial-gradient inheren punya kontur lengkung di boundary fade-to-transparent
   yang kelihatan sebagai "border bergerak ke tengah" saat dianimasi.
   Linear-gradient + mask-image fade tidak punya kontur — fully smooth. ── */
.atmo-fog{
  inset:auto 0 0 0;
  height:65%;
  background:linear-gradient(180deg,transparent 0%,rgba(180,185,205,0.06) 25%,rgba(180,185,205,0.18) 60%,rgba(180,185,205,0.32) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 100%);
  opacity:0;transition:opacity 1s ease;
}
.atmo-card.has-fog .atmo-fog{opacity:1;animation:atmoFogPulse 24s ease-in-out infinite}
/* Subtle opacity pulse only — no transform = tidak ada edge yang bergerak */
@keyframes atmoFogPulse{0%,100%{opacity:.85}50%{opacity:1}}

/* ── Phase base gradients (fallback saat JS belum lerp; JS smooth-blend menimpa --atmo-bg per frame) ── */
.atmo-card.phase-pagi   .atmo-bg{--atmo-bg:linear-gradient(135deg,rgba(252,211,77,0.10) 0%,rgba(244,114,182,0.05) 50%,rgba(34,211,238,0.07) 100%)}
.atmo-card.phase-siang  .atmo-bg{--atmo-bg:linear-gradient(135deg,rgba(34,211,238,0.07) 0%,rgba(96,165,250,0.06) 100%)}
.atmo-card.phase-sore   .atmo-bg{--atmo-bg:linear-gradient(135deg,rgba(251,146,60,0.13) 0%,rgba(244,63,94,0.08) 50%,rgba(168,85,247,0.06) 100%)}
.atmo-card.phase-malam  .atmo-bg{--atmo-bg:linear-gradient(135deg,rgba(30,27,75,0.22) 0%,rgba(15,23,42,0.30) 100%)}

/* ── Phase atmospherics (rays / dawn / sunset / haze) ── */
.atmo-card.phase-pagi  .atmo-bg::before{opacity:1;background:radial-gradient(ellipse 70% 50% at 50% 105%,rgba(252,211,77,0.22) 0%,rgba(252,211,77,0.06) 28%,transparent 50%)}
.atmo-card.phase-pagi  .atmo-bg::after{opacity:1;background:radial-gradient(circle at 25% 85%,rgba(244,114,182,0.10),transparent 35%)}
/* Siang: glow halus matahari di atas (static, no animation) */
.atmo-card.phase-siang .atmo-bg::before{opacity:1;background:radial-gradient(circle at 50% -20%,rgba(252,211,77,0.16) 0%,rgba(252,211,77,0.05) 28%,transparent 50%)}
.atmo-card.phase-siang .atmo-bg::after{opacity:1;background:linear-gradient(180deg,rgba(255,250,205,0.04) 0%,transparent 35%)}
.atmo-card.phase-sore  .atmo-bg::before{opacity:1;background:radial-gradient(ellipse 80% 55% at 50% 110%,rgba(251,146,60,0.26) 0%,rgba(244,63,94,0.10) 22%,transparent 45%)}
.atmo-card.phase-sore  .atmo-bg::after{opacity:1;background:radial-gradient(circle at 80% 30%,rgba(251,146,60,0.12),transparent 38%),radial-gradient(circle at 15% 75%,rgba(168,85,247,0.08),transparent 40%)}
.atmo-card.phase-malam .atmo-bg::before{opacity:1;background:radial-gradient(ellipse 65% 40% at 50% 110%,rgba(67,56,202,0.20),transparent 55%)}
.atmo-card.phase-malam .atmo-bg::after{opacity:1;background:radial-gradient(circle at 80% 12%,rgba(124,58,237,0.10),transparent 40%),radial-gradient(circle at 18% 22%,rgba(59,130,246,0.08),transparent 45%)}

/* ── Stars layer — dual-pseudo twinkle, masked di bagian bawah biar tidak nutupin teks ── */
/* Opacity dikontrol --atmo-stars-op (JS rAF lerp, fade in/out smooth dekat malam center).
   Fallback: class .phase-malam set --atmo-stars-op=1, lainnya 0. */
.atmo-stars{opacity:var(--atmo-stars-op,0);transition:opacity 1s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 88%);
}
.atmo-card.phase-malam .atmo-stars{--atmo-stars-op:1}
.atmo-stars::before,.atmo-stars::after{content:'';position:absolute;inset:0;pointer-events:none}
.atmo-stars::before{
  background:
    radial-gradient(1px 1px at 6% 12%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 17% 26%,#cbd5e1 50%,transparent 100%),
    radial-gradient(1.2px 1.2px at 31% 9%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 44% 22%,#e2e8f0 50%,transparent 100%),
    radial-gradient(1px 1px at 58% 14%,#fff 50%,transparent 100%),
    radial-gradient(1.4px 1.4px at 71% 8%,#fef3c7 50%,transparent 100%),
    radial-gradient(1px 1px at 83% 28%,#cbd5e1 50%,transparent 100%),
    radial-gradient(1.2px 1.2px at 94% 18%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 11% 38%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 26% 42%,#e2e8f0 50%,transparent 100%),
    radial-gradient(1px 1px at 49% 36%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 67% 44%,#cbd5e1 50%,transparent 100%),
    radial-gradient(1px 1px at 88% 38%,#fff 50%,transparent 100%);
  animation:atmoStarTwinkleA 4.2s ease-in-out infinite;
}
.atmo-stars::after{
  background:
    radial-gradient(1.6px 1.6px at 13% 18%,#fff 45%,transparent 100%),
    radial-gradient(1.4px 1.4px at 38% 32%,#fef9c3 50%,transparent 100%),
    radial-gradient(1.8px 1.8px at 62% 16%,#fff 45%,transparent 100%),
    radial-gradient(1.5px 1.5px at 79% 36%,#fff 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 50%,#fff 50%,transparent 100%),
    radial-gradient(1.4px 1.4px at 55% 48%,#e2e8f0 50%,transparent 100%);
  animation:atmoStarTwinkleB 6.8s ease-in-out infinite;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
}
@keyframes atmoStarTwinkleA{
  0%,100%{opacity:.95}
  50%{opacity:.30}
}
@keyframes atmoStarTwinkleB{
  0%,100%{opacity:.85}
  50%{opacity:.20}
}

/* ── Weather: rain — 2 layer parallax + bottom splash ── */
.atmo-card.wx-rain .atmo-rain,.atmo-card.wx-thunder .atmo-rain{
  background:
    repeating-linear-gradient(102deg,transparent 0 6px,rgba(186,230,253,0.22) 6px 7px,transparent 7px 10px),
    repeating-linear-gradient(99deg,transparent 0 11px,rgba(173,216,230,0.12) 11px 12px,transparent 12px 18px);
  animation:atmoRain 0.55s linear infinite;
  opacity:0.95;
}
.atmo-card.wx-rain .atmo-rain::before,.atmo-card.wx-thunder .atmo-rain::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(108deg,transparent 0 14px,rgba(186,230,253,0.08) 14px 15px,transparent 15px 26px);
  animation:atmoRainSlow 1.4s linear infinite;
  opacity:.75;
}
.atmo-card.wx-rain .atmo-rain::after,.atmo-card.wx-thunder .atmo-rain::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(120,160,200,0.08) 55%,rgba(120,160,200,0.20) 100%);
  animation:atmoSplash 1.1s ease-out infinite;
}
.atmo-card.wx-thunder .atmo-rain,.atmo-card.wx-thunder .atmo-rain::before{filter:brightness(1.12) saturate(.85)}
@keyframes atmoRain{0%{background-position:0 0,0 0}100%{background-position:-22px 60px,-30px 80px}}
@keyframes atmoRainSlow{0%{background-position:0 0}100%{background-position:-12px 44px}}
@keyframes atmoSplash{0%,100%{opacity:.55;transform:translateY(2px)}50%{opacity:.95;transform:translateY(0)}}

/* ── Weather: thunder — flash + bolt streak ── */
.atmo-card.wx-thunder{box-shadow:inset 0 0 60px rgba(96,165,250,0.14)}
.atmo-card.wx-thunder .atmo-flash{
  background:
    radial-gradient(ellipse 130% 65% at 50% 0%,rgba(220,235,255,0.55) 0%,rgba(199,210,254,0.18) 32%,transparent 70%),
    rgba(220,235,255,0.30);
  opacity:0;
  animation:atmoFlash 9s ease-out infinite;
}
.atmo-card.wx-thunder .atmo-flash::before{
  content:'';position:absolute;top:-6%;left:58%;width:2px;height:62%;
  background:linear-gradient(180deg,#fff 0%,#e0e7ff 70%,transparent 100%);
  box-shadow:0 0 8px #fff,0 0 18px #c4b5fd,0 0 28px rgba(165,180,252,0.55);
  filter:blur(.3px);opacity:0;transform-origin:top center;
  animation:atmoBolt 9s ease-out infinite;
}
@keyframes atmoFlash{
  0%,4%,100%{opacity:0}
  4.5%{opacity:.65}
  5%{opacity:.20}
  5.5%{opacity:.80}
  6.5%{opacity:0}
}
@keyframes atmoBolt{
  0%,4.4%,6.6%,100%{opacity:0;transform:scaleY(.92) skewX(-7deg)}
  4.5%{opacity:1;transform:scaleY(1) skewX(-9deg)}
  4.9%{opacity:.45;transform:scaleY(1) skewX(-8deg)}
  5%{opacity:0;transform:scaleY(.95) skewX(-7deg)}
  5.5%{opacity:1;transform:scaleY(1) skewX(-4deg)}
  6%{opacity:0;transform:scaleY(.95) skewX(-4deg)}
}

/* ── Sun/moon celestial bar
   Orbit FLAT: y selalu 50%, hanya x yang bergerak kiri→kanan dari sunrise ke sunset.
   Bar 36px ramping, body 20px → fit comfortable di tengah. ── */
.atmo-celest{position:relative;height:36px;margin:6px 0 4px;border-radius:18px;background:linear-gradient(180deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.10) 100%);overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.atmo-celest::after{
  content:'';position:absolute;left:6%;right:6%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05) 18%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.05) 82%,transparent);
}
.atmo-celest::before{
  content:'';position:absolute;
  top:var(--cel-y,50%);left:var(--cel-x,50%);
  width:20px;height:20px;border-radius:50%;
  transform:translate(-50%,-50%);
  transition:top 5s linear,left 5s linear,background 1.2s ease,box-shadow 1.2s ease,opacity .8s ease;
  opacity:var(--cel-op,1);z-index:2;
}
/* Live mode: rAF update tiap frame, transition dimatikan untuk hindari "rubber band" */
.atmo-card.cel-live .atmo-celest::before{transition:background 1.2s ease,box-shadow 1.2s ease,opacity .8s ease}
.atmo-card.cel-live .atmo-celest .cel-trail{transition:background 1.2s ease,opacity .8s ease}
.atmo-card.phase-pagi  .atmo-celest::before{background:radial-gradient(circle at 35% 30%,#fef3c7,#fbbf24);box-shadow:0 0 14px rgba(251,191,36,0.7),0 0 30px rgba(251,191,36,0.35)}
.atmo-card.phase-siang .atmo-celest::before{background:radial-gradient(circle at 35% 30%,#fef9c3,#fcd34d);box-shadow:0 0 18px rgba(252,211,77,0.85),0 0 36px rgba(252,211,77,0.45)}
.atmo-card.phase-sore  .atmo-celest::before{background:radial-gradient(circle at 35% 30%,#fed7aa,#fb923c);box-shadow:0 0 14px rgba(251,146,60,0.75),0 0 30px rgba(244,63,94,0.30)}
.atmo-card.phase-malam .atmo-celest::before{background:radial-gradient(circle at 30% 30%,#f1f5f9,#cbd5e1);box-shadow:0 0 12px rgba(203,213,225,0.55),inset -7px -2px 0 0 rgba(15,23,42,0.85)}
/* ── Moon phase rotation (Bedrock vanilla: phase = world_day % 8) ──
   Disk dasar = full moon look; inset shadow di posisi tertentu memotong cahaya
   menghasilkan bentuk crescent/half/gibbous secara CSS-only (no extra DOM).
   Phase index sama dengan world.getMoonPhase() Bedrock:
   0=Full, 1=Waning Gibbous, 2=Last Quarter, 3=Waning Crescent,
   4=New Moon, 5=Waxing Crescent, 6=First Quarter, 7=Waxing Gibbous.
   Konvensi shadow: angka negatif = shadow di kanan (waning), positif = di kiri (waxing).
   Ukuran disk 20px, jadi inset 10px = setengah disk gelap (quarter moon). */
.atmo-card.cel-night .atmo-celest::before{
  background:radial-gradient(circle at 30% 30%,#f8fafc,#cbd5e1 70%,#94a3b8 100%);
  box-shadow:0 0 12px rgba(203,213,225,0.55);
}
.atmo-card.cel-night .atmo-celest{--cel-trail-c:rgba(203,213,225,.14)}
/* Phase 0 — Full Moon (Purnama) */
.atmo-card.cel-night[data-moon="0"] .atmo-celest::before{
  box-shadow:0 0 14px rgba(248,250,252,0.85),0 0 28px rgba(203,213,225,0.45);
}
/* Phase 1 — Waning Gibbous (Cembung Surut) — shadow tipis di kanan */
.atmo-card.cel-night[data-moon="1"] .atmo-celest::before{
  box-shadow:0 0 10px rgba(203,213,225,0.55),inset -5px 0 0 0 rgba(15,23,42,0.88);
}
/* Phase 2 — Last Quarter (Perempat Akhir) — separuh kanan gelap */
.atmo-card.cel-night[data-moon="2"] .atmo-celest::before{
  box-shadow:0 0 9px rgba(203,213,225,0.50),inset -10px 0 0 0 rgba(15,23,42,0.92);
}
/* Phase 3 — Waning Crescent (Sabit Surut) — gelap dominan, sabit kiri */
.atmo-card.cel-night[data-moon="3"] .atmo-celest::before{
  box-shadow:0 0 8px rgba(203,213,225,0.40),inset -14px 0 0 0 rgba(15,23,42,0.94);
}
/* Phase 4 — New Moon (Bulan Baru) — hampir tak terlihat, hanya rim sangat samar */
.atmo-card.cel-night[data-moon="4"] .atmo-celest::before{
  background:radial-gradient(circle at 35% 35%,#475569,#1e293b 80%);
  box-shadow:0 0 6px rgba(100,116,139,0.30),inset 0 0 4px 0 rgba(203,213,225,0.18);
}
/* Phase 5 — Waxing Crescent (Sabit Muda) — gelap dominan, sabit kanan */
.atmo-card.cel-night[data-moon="5"] .atmo-celest::before{
  box-shadow:0 0 8px rgba(203,213,225,0.40),inset 14px 0 0 0 rgba(15,23,42,0.94);
}
/* Phase 6 — First Quarter (Perempat Awal) — separuh kiri gelap */
.atmo-card.cel-night[data-moon="6"] .atmo-celest::before{
  box-shadow:0 0 9px rgba(203,213,225,0.50),inset 10px 0 0 0 rgba(15,23,42,0.92);
}
/* Phase 7 — Waxing Gibbous (Cembung Naik) — shadow tipis di kiri */
.atmo-card.cel-night[data-moon="7"] .atmo-celest::before{
  box-shadow:0 0 10px rgba(203,213,225,0.55),inset 5px 0 0 0 rgba(15,23,42,0.88);
}
/* Smooth fase transition (tetap respect reduce-motion) */
@media (prefers-reduced-motion: no-preference){
  .atmo-card.cel-night .atmo-celest::before{transition:box-shadow 1.4s ease,background 1.2s ease}
}
.atmo-celest .cel-trail{
  position:absolute;top:var(--cel-y,50%);left:var(--cel-x,50%);
  width:55px;height:18px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,var(--cel-trail-c,rgba(252,211,77,.18)) 0%,transparent 70%);
  filter:blur(4px);opacity:.85;pointer-events:none;
  transition:top 5s linear,left 5s linear,background 1.2s ease,opacity .8s ease;z-index:1;
}
.atmo-card.phase-pagi  .atmo-celest{--cel-trail-c:rgba(251,191,36,.20)}
.atmo-card.phase-siang .atmo-celest{--cel-trail-c:rgba(252,211,77,.24)}
.atmo-card.phase-sore  .atmo-celest{--cel-trail-c:rgba(251,146,60,.22)}
.atmo-card.phase-malam .atmo-celest{--cel-trail-c:rgba(203,213,225,.14)}

/* Ground fog di bar — bergerak horizontal, tebal supaya menonjol */
.atmo-celest .cel-ground-fog{
  position:absolute;left:-30%;right:-30%;bottom:-2px;height:65%;
  pointer-events:none;z-index:1;opacity:0;transition:opacity 1s ease;
  background:
    radial-gradient(ellipse 32% 100% at 10% 100%,rgba(200,215,240,.55),transparent 70%),
    radial-gradient(ellipse 38% 100% at 35% 100%,rgba(210,220,240,.45),transparent 70%),
    radial-gradient(ellipse 30% 100% at 55% 100%,rgba(200,215,240,.50),transparent 70%),
    radial-gradient(ellipse 35% 100% at 78% 100%,rgba(210,220,240,.42),transparent 70%),
    radial-gradient(ellipse 32% 100% at 95% 100%,rgba(200,215,240,.48),transparent 70%);
  filter:blur(2px);
}
.atmo-card.has-fog .atmo-celest .cel-ground-fog{opacity:1;animation:atmoGroundFog 18s linear infinite}
@keyframes atmoGroundFog{0%{transform:translateX(0)}100%{transform:translateX(20%)}}

/* Time tick labels di bawah celestial bar */
.atmo-celest-labels{position:relative;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.40rem;color:var(--mute);letter-spacing:.4px;margin:-4px 4px 6px;opacity:.6}
.atmo-celest-labels span{flex:1;text-align:center}
.atmo-celest-labels span:first-child{text-align:left}
.atmo-celest-labels span:last-child{text-align:right}
/* Live time pointer — bergerak ngikut posisi matahari/bulan, label MC time */
.atmo-celest-now{
  position:absolute;
  left:var(--cel-now-x,50%);top:-3px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:'JetBrains Mono',monospace;font-size:.42rem;font-weight:700;
  color:var(--ac);letter-spacing:.3px;opacity:1;
  pointer-events:none;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.atmo-celest-now::before{
  content:'';display:block;width:1px;height:7px;background:var(--ac);box-shadow:0 0 4px var(--ac);margin-bottom:1px;
}

/* Forecast strip — info perubahan cuaca + durasi (subtle, tidak ngeblok) */
.atmo-forecast{display:flex;align-items:center;gap:6px;margin:6px 0 4px;padding:4px 2px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.04);border-radius:0;font-family:'JetBrains Mono',monospace;font-size:.46rem;color:var(--dim);letter-spacing:.2px}
.atmo-forecast-icon{display:inline-flex;width:11px;height:11px;flex-shrink:0;color:var(--ac)}
.atmo-forecast-text{flex:1;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.atmo-forecast-text b{color:var(--text);font-weight:700}
.atmo-forecast-prefix{color:var(--mute);font-size:.42rem;letter-spacing:.4px;text-transform:uppercase;flex-shrink:0}
.atmo-forecast-elapsed{color:var(--mute);font-size:.42rem;font-style:italic;flex-shrink:0}
.atmo-forecast-arrow{color:var(--mute);opacity:.55;flex-shrink:0}
.atmo-forecast-next{color:var(--dim);font-weight:600;flex-shrink:0}
.atmo-forecast-eta{font-weight:700;color:var(--ac);white-space:nowrap}
.atmo-card.wx-rain .atmo-forecast-eta,.atmo-card.wx-thunder .atmo-forecast-eta{color:#7dd3fc}
.atmo-forecast-live{display:inline-block;width:5px;height:5px;border-radius:50%;background:#7dd3fc;margin-right:4px;box-shadow:0 0 6px #7dd3fc;animation:atmoLivePulse 2s ease-in-out infinite}
.atmo-card.wx-clear .atmo-forecast-live{background:#34d399;box-shadow:0 0 6px #34d399}
.atmo-forecast-conf{margin-left:6px;padding:1px 5px;border-radius:8px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);color:#c4b5fd;font-size:.40rem;font-weight:700;letter-spacing:.3px;flex-shrink:0}
@keyframes atmoLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* Forecast timeline — minimalist (no panel border, biar napas) */
.atmo-forecast-timeline{margin:6px 0 8px;padding:0;background:transparent;border:none;font-family:'JetBrains Mono',monospace}
/* Header — minimalist label, no heavy bg */
.atmo-tl-hdr{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:.44rem;font-weight:600;color:var(--mute);letter-spacing:.4px}
.atmo-tl-hdr svg{width:10px;height:10px;color:var(--mute);flex-shrink:0;opacity:.7}
.atmo-tl-hdr-title{flex:1;text-transform:uppercase;color:var(--mute)}
.atmo-tl-hdr-hint{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.28);color:#c4b5fd;font-size:.42rem;font-weight:700;cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-family:inherit;transition:background .15s ease}
.atmo-tl-hdr-hint:hover,.atmo-tl-hdr-hint[aria-expanded="true"]{background:rgba(168,85,247,.28);color:#fff}
.atmo-tl-hdr-hint:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Help popup — collapsible explainer */
.atmo-tl-help{margin:6px 0 8px;padding:8px 10px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.18);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.46rem;color:var(--dim);line-height:1.55;letter-spacing:.1px}
.atmo-tl-help[hidden]{display:none}
.atmo-tl-help p{margin:0 0 4px}
.atmo-tl-help p:last-child{margin-bottom:0}
.atmo-tl-help b{color:var(--text);font-weight:700}
.atmo-tl-help ul{margin:0 0 6px;padding-left:14px}
.atmo-tl-help li{margin-bottom:2px}
.atmo-tl-bar{position:relative;display:flex;height:7px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.03);margin-bottom:4px;cursor:help}
/* Hint banner saat sample minim — softer, tidak mengganggu */
.atmo-tl-hint{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;padding:5px 8px;background:rgba(251,191,36,.05);border:none;border-left:2px solid rgba(251,191,36,.45);border-radius:0 4px 4px 0;font-size:.44rem;color:var(--mute);line-height:1.5;letter-spacing:.1px}
.atmo-tl-hint-tag{flex-shrink:0;padding:0;background:none;color:#fcd34d;font-size:.40rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;opacity:.85}
.atmo-tl-hint-msg{flex:1;color:var(--mute);opacity:.85}
.atmo-tl-seg{display:block;height:100%;transition:width .8s ease,opacity .4s ease}
.atmo-tl-seg:first-child{position:relative}
.atmo-tl-seg:first-child::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent);pointer-events:none}
.atmo-tl-ticks{position:relative;height:0}
.atmo-tl-tick{position:absolute;top:-10px;width:1px;height:7px;background:rgba(255,255,255,.10);transform:translateX(-50%)}
.atmo-tl-scale{display:flex;justify-content:space-between;font-size:.38rem;color:var(--mute);letter-spacing:.3px;margin-top:2px;opacity:.65}
/* Legend — minimalist, no border */
.atmo-tl-legend{display:flex;align-items:center;gap:10px;margin-top:5px;padding-top:0;border-top:none;font-size:.38rem;color:var(--mute);letter-spacing:.2px;flex-wrap:wrap;opacity:.85}
.atmo-tl-lg{display:inline-flex;align-items:center;gap:3px;color:var(--mute)}
.atmo-tl-lg i{display:inline-block;width:6px;height:6px;border-radius:2px;flex-shrink:0}
.atmo-tl-lg-spacer{flex:1;min-width:6px}
.atmo-tl-lg-note{font-size:.36rem;color:var(--mute);opacity:.75;font-style:italic}

/* Atmosphere badge */
.atmo-badge{font-family:'JetBrains Mono',monospace;font-size:.42rem;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.5px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.atmo-card.phase-pagi  .atmo-badge{color:#fbbf24}
.atmo-card.phase-siang .atmo-badge{color:#22d3ee}
.atmo-card.phase-sore  .atmo-badge{color:#fb923c}
.atmo-card.phase-malam .atmo-badge{color:#a78bfa}


/* Reduced motion: kill animations, keep static visuals */
@media(prefers-reduced-motion:reduce){
  .atmo-fog,
  .atmo-rain,.atmo-rain::before,.atmo-rain::after,
  .atmo-flash,.atmo-flash::before,
  .atmo-bg::before,.atmo-bg::after,
  .atmo-stars::before,.atmo-stars::after,
  .cel-ground-fog{animation:none !important}
}