/* =========================================================
   SkyCast — Animated Weather Dashboard
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --bg-base: #080b12;
  --bg-elevated: #0e141f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text-primary: #f2f5fa;
  --text-secondary: #9aa7bd;
  --text-tertiary: #5c687e;

  --accent: #6db4ff;
  --accent-soft: rgba(109, 180, 255, 0.14);
  --accent-glow: rgba(109, 180, 255, 0.35);

  --success: #4ade80;
  --warn: #fbbf24;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.55);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body[data-theme="clear-day"]   { --bg-base: #0d1a2b; --bg-elevated: #142338; }
body[data-theme="clear-night"] { --bg-base: #070a12; --bg-elevated: #0d121d; }
body[data-theme="cloudy"]      { --bg-base: #0c1118; --bg-elevated: #131922; }
body[data-theme="rain"]        { --bg-base: #08101a; --bg-elevated: #0e1723; }
body[data-theme="storm"]       { --bg-base: #0a0814; --bg-elevated: #100d1c; }
body[data-theme="snow"]        { --bg-base: #0a1019; --bg-elevated: #101823; }
body[data-theme="fog"]         { --bg-base: #0d1013; --bg-elevated: #14181c; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 1.2s var(--ease);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 15%, rgba(109, 180, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 80%, rgba(140, 130, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 45%, rgba(120, 200, 255, 0.06), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
  animation: auroraDrift 30s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.sky-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; opacity: 0.55;
  transition: opacity 1.5s var(--ease);
}
body[data-theme="clear-day"] .sky-bg,
body[data-theme="clear-night"] .sky-bg { opacity: 0.55; }

.stars-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 25% 42%, rgba(200, 220, 255, 0.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 48% 15%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 62% 30%, rgba(220, 235, 255, 0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 22%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(1px 1px at 88% 48%, rgba(200, 220, 255, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 15% 68%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 35% 82%, rgba(220, 235, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 75%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 72% 88%, rgba(200, 220, 255, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 70%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 5% 35%, rgba(220, 235, 255, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 55%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 82% 92%, rgba(200, 220, 255, 0.7), transparent 60%);
  animation: starTwinkle 6s ease-in-out infinite alternate;
  will-change: opacity;
}
body[data-theme="clear-night"] .stars-layer { opacity: 1; }
body[data-theme="snow"]        .stars-layer { opacity: 0.5; }
body[data-theme="fog"]         .stars-layer { opacity: 0.3; }

@keyframes starTwinkle {
  0%   { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  50%  { opacity: 0.95; }
  100% { opacity: 0.65; transform: translate3d(0, -0.6%, 0) scale(1.01); }
}

.cloud {
  position: absolute;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.14) 40%,
    rgba(255, 255, 255, 0) 72%);
  border-radius: 50%;
  filter: blur(28px);
  will-change: transform, opacity;
  opacity: 0;
  animation-name: driftRight;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cloud-1 { width: 420px; height: 150px; top:  6%; left: -450px; animation-duration: 78s; animation-delay:  0s; }
.cloud-2 { width: 560px; height: 190px; top: 22%; left: -620px; animation-duration: 105s; animation-delay: -30s; }
.cloud-3 { width: 340px; height: 125px; top: 48%; left: -380px; animation-duration: 88s;  animation-delay: -15s; }
.cloud-4 { width: 480px; height: 170px; top: 66%; left: -520px; animation-duration: 120s; animation-delay: -55s; }
.cloud-5 { width: 360px; height: 135px; top: 14%; right: -400px; animation-name: driftLeft; animation-duration: 95s;  animation-delay: -20s; }
.cloud-6 { width: 620px; height: 210px; top: 40%; right: -700px; animation-name: driftLeft; animation-duration: 135s; animation-delay: -60s; }

@keyframes driftRight {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(calc(100vw + 950px), 0, 0); opacity: 0; }
}
@keyframes driftLeft {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(calc(-100vw - 950px), 0, 0); opacity: 0; }
}

.drizzle-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
body[data-theme="rain"] .drizzle-layer,
body[data-theme="storm"] .drizzle-layer { opacity: 0.9; }
body[data-theme="cloudy"] .drizzle-layer { opacity: 0.4; }

.drizzle-layer::before,
.drizzle-layer::after {
  content: "";
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(circle, rgba(180, 205, 255, 0.55) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(160, 190, 255, 0.35) 1px, transparent 1.4px);
  background-size: 100px 150px, 140px 190px;
  background-position: 0 0, 40px 60px;
  animation: drizzleFall 7s linear infinite;
}
.drizzle-layer::after { animation-duration: 10s; animation-delay: -3s; opacity: 0.6; }
@keyframes drizzleFall {
  from { background-position: 0 -250px, 40px -200px; }
  to   { background-position: 0  550px, 40px  650px; }
}

.rain-layer, .snow-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.rain-layer {
  background-image: repeating-linear-gradient(115deg,
    rgba(200, 220, 255, 0.18) 0px, rgba(200, 220, 255, 0.18) 1px,
    transparent 1px, transparent 16px);
  background-size: 3px 100%;
  animation: rainFall 0.4s linear infinite;
}
@keyframes rainFall {
  from { background-position: 0 0; }
  to   { background-position: 28px 140px; }
}
body[data-theme="rain"]  .rain-layer { opacity: 0.45; }
body[data-theme="storm"] .rain-layer { opacity: 0.6; }

.snow-layer {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.75) 1.4px, transparent 1.4px);
  background-size: 50px 50px;
  animation: snowFall 9s linear infinite;
}
@keyframes snowFall {
  from { background-position: 0 0; }
  to   { background-position: 50px 500px; }
}
body[data-theme="snow"] .snow-layer { opacity: 0.4; }

.app {
  position: relative; z-index: 1;
  max-width: 1140px; margin: 0 auto;
  padding: 32px 24px 80px;
}

.main { display: flex; flex-direction: column; gap: 20px; }
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.main > * { animation: fadeUp 0.75s var(--ease-out) backwards; }
.main > *:nth-child(1) { animation-delay: 0.05s; }
.main > *:nth-child(2) { animation-delay: 0.12s; }
.main > *:nth-child(3) { animation-delay: 0.20s; }
.main > *:nth-child(4) { animation-delay: 0.28s; }
.main > *:nth-child(5) { animation-delay: 0.36s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.audio-toggle {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: rgba(14, 20, 31, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-secondary);
  display: grid; place-items: center;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  box-shadow: var(--shadow-md);
}
.audio-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.audio-toggle:hover {
  color: var(--text-primary); border-color: var(--accent);
  transform: translateY(-1px) scale(1.05);
}
.audio-toggle.is-on {
  color: var(--accent);
  border-color: rgba(109, 180, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(109, 180, 255, 0.2), 0 0 24px rgba(109, 180, 255, 0.25);
  animation: soundPulseRing 2.5s ease-in-out infinite;
}
@keyframes soundPulseRing {
  0%, 100% { box-shadow: 0 0 0 1px rgba(109, 180, 255, 0.2), 0 0 18px rgba(109, 180, 255, 0.2); }
  50%      { box-shadow: 0 0 0 1px rgba(109, 180, 255, 0.4), 0 0 32px rgba(109, 180, 255, 0.45); }
}
.audio-toggle .icon-audio-off { display: none; }
.audio-toggle:not(.is-on) .icon-audio-on { display: none; }
.audio-toggle:not(.is-on) .icon-audio-off { display: block; }

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
  animation: headerIn 0.9s var(--ease-out) backwards;
}
@keyframes headerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand {
  display: flex; align-items: center; gap: 12px;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.brand:hover { opacity: 0.9; transform: translateY(-1px); }

.brand-mark {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(109, 180, 255, 0.22), rgba(140, 130, 255, 0.14));
  border: 1px solid rgba(109, 180, 255, 0.28);
  display: grid; place-items: center;
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative; overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: brandShine 4s ease-in-out infinite;
}
@keyframes brandShine {
  0%, 60%, 100% { transform: translateX(-100%); }
  80%           { transform: translateX(100%); }
}
.brand-mark svg {
  width: 20px; height: 20px;
  position: relative; z-index: 1;
  animation: brandFloat 4s ease-in-out infinite;
}
@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand-tag  { font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-top: 3px; letter-spacing: 0.02em; }

.search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              box-shadow 0.3s var(--ease), transform 0.2s var(--ease);
  min-width: 340px;
}
.search:hover { border-color: var(--border-strong); }
.search:focus-within {
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 24px rgba(109, 180, 255, 0.15);
  transform: translateY(-1px);
}

.search-icon {
  width: 16px; height: 16px;
  color: var(--text-tertiary); flex-shrink: 0;
  transition: color 0.2s var(--ease), transform 0.3s var(--ease);
}
.search:focus-within .search-icon {
  color: var(--accent);
  transform: scale(1.1) rotate(-8deg);
}

.search-input {
  flex: 1; min-width: 0;
  padding: 8px 4px;
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13.5px;
}
.search-input::placeholder { color: var(--text-tertiary); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: filter 0.15s var(--ease), transform 0.15s var(--ease),
              background 0.15s var(--ease), color 0.15s var(--ease),
              box-shadow 0.2s var(--ease);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn svg { width: 15px; height: 15px; }

.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.btn:active::after { opacity: 1; transition: opacity 0s; }

.btn-primary {
  background: var(--accent); color: #051320; font-weight: 600;
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(109, 180, 255, 0.35);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  padding: 8px; color: var(--text-secondary); border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-hover); color: var(--text-primary);
  transform: translateY(-1px);
}
.btn-ghost svg { transition: transform 0.3s var(--ease-spring); }
.btn-ghost:hover svg { transform: scale(1.15); }

.status {
  min-height: 0; font-size: 13px; color: var(--text-secondary);
  padding: 0 2px; margin-bottom: 4px;
  transition: color 0.2s var(--ease);
  animation: statusIn 0.4s var(--ease-out);
}
.status:empty { display: none; }
.status.error { color: #f87171; }
@keyframes statusIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  padding: 30px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.hero:hover { border-color: var(--border-strong); }

.hero::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(109, 180, 255, 0.35) 90deg,
    transparent 180deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: heroBorderSpin 8s linear infinite;
}
@keyframes heroBorderSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero::after {
  content: "";
  position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(109, 180, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: heroAmbient 8s ease-in-out infinite alternate;
}
@keyframes heroAmbient {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.hero-left { flex: 1; min-width: 0; position: relative; z-index: 1; }

.hero-location { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hero-pin {
  width: 16px; height: 16px; color: var(--accent); flex-shrink: 0;
  animation: pinDrop 0.8s var(--ease-spring) backwards;
  animation-delay: 0.3s;
}
@keyframes pinDrop {
  from { opacity: 0; transform: translateY(-8px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-location h1 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
}

.hero-time {
  font-size: 12.5px; color: var(--text-tertiary);
  font-weight: 500; letter-spacing: 0.01em; margin-bottom: 10px;
}

.hero-desc { font-size: 15px; color: var(--text-secondary); font-weight: 400; }

.hero-right {
  display: flex; align-items: center; gap: 18px;
  flex-shrink: 0; position: relative; z-index: 1;
}

.hero-icon {
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  animation: heroFloat 4s ease-in-out infinite;
  will-change: transform;
  transition: transform 0.3s var(--ease-spring);
}
.hero-icon:hover { transform: scale(1.1); }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-3px) rotate(2deg); }
  50%      { transform: translateY(-5px) rotate(0); }
  75%      { transform: translateY(-2px) rotate(-2deg); }
}

.hero-temp {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 56px; font-weight: 300;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  position: relative;
}
#currentTemp {
  display: inline-block;
  transition: color 0.3s var(--ease);
  animation: tempGlow 4s ease-in-out infinite alternate;
}
@keyframes tempGlow {
  0%   { text-shadow: 0 0 0 transparent; }
  100% { text-shadow: 0 0 24px rgba(109, 180, 255, 0.25); }
}

.stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.3s var(--ease);
}
.stats:hover { border-color: var(--border-strong); }

.stat {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 14px 12px;
  border-radius: var(--r-md);
  background: transparent;
  transition: background 0.2s var(--ease), transform 0.3s var(--ease-spring),
              box-shadow 0.3s var(--ease);
  min-width: 0; cursor: default;
  position: relative; overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-soft) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.stat:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.stat:hover::before { opacity: 0.5; }

.stat-icon {
  width: 18px; height: 18px; color: var(--accent);
  opacity: 0.85;
  transition: color 0.2s var(--ease), transform 0.4s var(--ease-spring), opacity 0.2s var(--ease);
  position: relative; z-index: 1;
}
.stat:hover .stat-icon {
  opacity: 1; transform: scale(1.2) rotate(-6deg);
}
.stat-icon svg { width: 100%; height: 100%; }
.stat-icon[data-stat="feels"]      { color: #ff9d7a; }
.stat-icon[data-stat="humidity"]   { color: #6db4ff; }
.stat-icon[data-stat="wind"]       { color: #a0c4e8; }
.stat-icon[data-stat="pressure"]   { color: #c9b0ff; }
.stat-icon[data-stat="visibility"] { color: #93e4c1; }
.stat-icon[data-stat="uv"]         { color: #ffcb6b; }

.stat-label {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
  position: relative; z-index: 1;
}

.stat-value {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  will-change: transform, color, text-shadow;
  position: relative; z-index: 1;
}
.stat-value.value-updated { animation: valuePulse 0.7s var(--ease-out); }
@keyframes valuePulse {
  0%   { color: var(--accent); transform: scale(1.08); text-shadow: 0 0 14px var(--accent-glow); }
  100% { color: var(--text-primary); transform: scale(1); text-shadow: none; }
}
#currentTemp.value-updated { animation: heroTempPulse 0.8s var(--ease-out); }
@keyframes heroTempPulse {
  0%   { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(109, 180, 255, 0.6)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.panel:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.4);
}

.panel-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.panel-head svg {
  width: 16px; height: 16px;
  color: var(--text-tertiary); flex-shrink: 0;
  transition: color 0.3s var(--ease), transform 0.5s var(--ease-spring);
}
.panel:hover .panel-head svg {
  color: var(--accent); transform: rotate(-10deg) scale(1.1);
}
.panel-head h2 {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: color 0.3s var(--ease);
}
.panel:hover .panel-head h2 { color: var(--text-primary); }

.sun-visual {
  display: flex; align-items: center; justify-content: center;
  height: 130px; margin-bottom: 8px;
}
.sun-orb {
  position: relative;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.sun-core {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff4c9 0%, #ffd676 38%, #ffa63d 78%, #f57c20 100%);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(255, 180, 80, 0.55),
    0 0 60px rgba(255, 160, 60, 0.30);
  position: relative; z-index: 2;
  animation: sunCorePulse 4s ease-in-out infinite;
}
@keyframes sunCorePulse {
  0%, 100% { transform: scale(1);    box-shadow: inset 0 0 16px rgba(255,255,255,0.25), 0 0 30px rgba(255,180,80,0.55), 0 0 60px rgba(255,160,60,0.30); }
  50%      { transform: scale(1.05); box-shadow: inset 0 0 20px rgba(255,255,255,0.35), 0 0 45px rgba(255,180,80,0.75), 0 0 90px rgba(255,160,60,0.45); }
}

.sun-orb::before,
.sun-orb::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 110px; height: 110px;
  margin-top: -55px; margin-left: -55px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,   rgba(255, 200, 100, 0.4) 10deg, transparent 20deg,
      transparent 40deg,  rgba(255, 200, 100, 0.3) 50deg, transparent 60deg,
      transparent 80deg,  rgba(255, 200, 100, 0.4) 90deg, transparent 100deg,
      transparent 120deg, rgba(255, 200, 100, 0.3) 130deg, transparent 140deg,
      transparent 160deg, rgba(255, 200, 100, 0.4) 170deg, transparent 180deg,
      transparent 200deg, rgba(255, 200, 100, 0.3) 210deg, transparent 220deg,
      transparent 240deg, rgba(255, 200, 100, 0.4) 250deg, transparent 260deg,
      transparent 280deg, rgba(255, 200, 100, 0.3) 290deg, transparent 300deg,
      transparent 320deg, rgba(255, 200, 100, 0.4) 330deg, transparent 340deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 25px, #000 30px, #000 50px, transparent 55px);
          mask: radial-gradient(circle, transparent 25px, #000 30px, #000 50px, transparent 55px);
  z-index: 1; pointer-events: none;
  animation: sunRaysSpin 24s linear infinite;
}
.sun-orb::after {
  animation-duration: 40s;
  animation-direction: reverse;
  opacity: 0.5; transform: scale(1.15);
}
@keyframes sunRaysSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sun-glow {
  position: absolute; top: 50%; left: 50%;
  width: 130px; height: 130px;
  margin-top: -65px; margin-left: -65px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 190, 90, 0.35) 0%,
    rgba(255, 160, 60, 0.14) 42%,
    transparent 72%);
  filter: blur(6px);
  z-index: 1; will-change: transform, opacity;
  animation: sunBreathe 5s ease-in-out infinite;
}
@keyframes sunBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.arc-wrap { display: flex; justify-content: center; margin-bottom: 4px; }
.arc { width: 100%; max-width: 260px; height: auto; }
.arc-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 3 4;
  animation: arcDash 20s linear infinite;
}
@keyframes arcDash {
  to { stroke-dashoffset: -140; }
}
#sunDot, #sunGlowCircle {
  transition: cx 0.8s var(--ease), cy 0.8s var(--ease), opacity 0.8s var(--ease);
}
.sun-dot {
  fill: #ffd676;
  filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.9));
  animation: sunDotPulse 2s ease-in-out infinite;
}
@keyframes sunDotPulse {
  0%, 100% { r: 5; }
  50%      { r: 6; }
}

.rise-set {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.rise-set > div { display: flex; flex-direction: column; gap: 2px; }
.rs-label {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rs-value {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.mini-grid > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 0;
  border-radius: var(--r-sm);
  transition: background 0.2s var(--ease), padding 0.2s var(--ease);
}
.mini-grid > div:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 6px;
}
.mini-grid dt { font-size: 12px; color: var(--text-tertiary); }
.mini-grid dd {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.moon-visual {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 16px 0 20px;
}
.moon-orb {
  position: relative;
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.moon-glow {
  position: absolute; top: 50%; left: 50%;
  width: 170px; height: 170px;
  margin-top: -85px; margin-left: -85px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(180, 205, 255, 0.22) 0%,
    rgba(150, 180, 240, 0.10) 42%,
    transparent 72%);
  filter: blur(10px);
  z-index: 1; will-change: transform, opacity;
  animation: moonBreathe 6s ease-in-out infinite;
}
@keyframes moonBreathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.moon-core {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%,
      #f0eee8 0%, #d4d1c8 18%, #a8a49a 40%,
      #7a7670 62%, #48453f 84%, #201e1a 100%);
  box-shadow:
    inset -10px -10px 22px rgba(0, 0, 0, 0.72),
    inset 6px 6px 14px rgba(255, 255, 255, 0.14),
    0 0 24px rgba(180, 200, 245, 0.22);
  overflow: hidden; z-index: 2;
  transition: filter 1.5s var(--ease), box-shadow 0.6s var(--ease);
  animation: moonFloat 8s ease-in-out infinite;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
.moon-orb:hover .moon-core {
  box-shadow:
    inset -10px -10px 22px rgba(0, 0, 0, 0.72),
    inset 6px 6px 14px rgba(255, 255, 255, 0.14),
    0 0 40px rgba(180, 200, 245, 0.5);
}

.crater {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 42% 42%,
    rgba(35, 35, 35, 0.85) 0%,
    rgba(70, 70, 70, 0.55) 55%,
    rgba(140, 140, 140, 0.12) 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.65);
  animation: craterShimmer 8s ease-in-out infinite;
}
.crater-1 { width: 20px; height: 20px; top: 18%; left: 16%; animation-delay: 0s; }
.crater-2 { width: 12px; height: 12px; top: 55%; left: 62%; animation-delay: 1s; }
.crater-3 { width: 24px; height: 24px; top: 60%; left: 26%; opacity: 0.72; animation-delay: 2s; }
.crater-4 { width: 9px;  height: 9px;  top: 30%; left: 70%; animation-delay: 3s; }
.crater-5 { width: 15px; height: 15px; top: 72%; left: 58%; opacity: 0.68; animation-delay: 4s; }
.crater-6 { width: 7px;  height: 7px;  top: 44%; left: 42%; opacity: 0.8; animation-delay: 5s; }
.crater-7 { width: 11px; height: 11px; top: 14%; left: 52%; opacity: 0.7; animation-delay: 6s; }
@keyframes craterShimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* Real phase shadow — redrawn by script.js every render so the moon
   actually shows today's crescent/quarter/gibbous/full shape, not just a
   brightness tweak. Sits above the craters, inside the same circular clip. */
.moon-phase-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  filter: blur(1.2px);
}

.moon-info {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
}
.moon-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary); letter-spacing: -0.01em;
}
.moon-illum { font-size: 12px; color: var(--text-tertiary); }

.hourly {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.hourly::-webkit-scrollbar { height: 5px; }
.hourly::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-full);
}

.hour-item {
  flex: 0 0 auto;
  min-width: 68px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease);
  text-align: center;
  animation: hourIn 0.5s var(--ease-out) backwards;
  position: relative; overflow: hidden;
}
.hour-item:nth-child(1)  { animation-delay: 0.02s; }
.hour-item:nth-child(2)  { animation-delay: 0.04s; }
.hour-item:nth-child(3)  { animation-delay: 0.06s; }
.hour-item:nth-child(4)  { animation-delay: 0.08s; }
.hour-item:nth-child(5)  { animation-delay: 0.10s; }
.hour-item:nth-child(6)  { animation-delay: 0.12s; }
.hour-item:nth-child(7)  { animation-delay: 0.14s; }
.hour-item:nth-child(8)  { animation-delay: 0.16s; }
.hour-item:nth-child(9)  { animation-delay: 0.18s; }
.hour-item:nth-child(10) { animation-delay: 0.20s; }
.hour-item:nth-child(n+11) { animation-delay: 0.22s; }
@keyframes hourIn {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hour-item:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 24px -12px rgba(109, 180, 255, 0.3);
}
.hour-item:hover .hour-icon { animation: hourIconBounce 0.6s var(--ease-spring); }
@keyframes hourIconBounce {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-6px) scale(1.2); }
  70%  { transform: translateY(0) scale(0.95); }
  100% { transform: translateY(0) scale(1); }
}

.hour-time {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.hour-icon { font-size: 22px; line-height: 1; transition: transform 0.3s var(--ease-spring); }
.hour-temp {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.daily { display: flex; flex-direction: column; }
.day-row {
  display: grid;
  grid-template-columns: 84px 28px 1fr auto;
  align-items: center; gap: 14px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s var(--ease), padding 0.25s var(--ease),
              box-shadow 0.3s var(--ease);
  animation: rowIn 0.5s var(--ease-out) backwards;
  position: relative; overflow: hidden;
}
.day-row:nth-child(1) { animation-delay: 0.04s; }
.day-row:nth-child(2) { animation-delay: 0.09s; }
.day-row:nth-child(3) { animation-delay: 0.14s; }
.day-row:nth-child(4) { animation-delay: 0.19s; }
.day-row:nth-child(5) { animation-delay: 0.24s; }
.day-row:nth-child(6) { animation-delay: 0.29s; }
.day-row:nth-child(7) { animation-delay: 0.34s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.day-row::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(109, 180, 255, 0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.day-row:hover::before { transform: translateX(100%); }
.day-row:last-child { border-bottom: none; }
.day-row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 10px; padding-right: 10px;
}

.day-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease), transform 0.3s var(--ease-spring);
}
.day-row:hover .day-name { transform: translateX(2px); }
.day-row.is-today .day-name { color: var(--accent); }

.day-cond-icon {
  font-size: 18px; text-align: center; line-height: 1;
  transition: transform 0.4s var(--ease-spring);
}
.day-row:hover .day-cond-icon { transform: scale(1.2) rotate(-8deg); }

.day-cond-text {
  font-size: 12.5px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.day-temps {
  display: flex; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums; justify-self: end;
}
.day-high {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  min-width: 32px; text-align: right;
}
.day-low {
  font-size: 13px; color: var(--text-tertiary);
  min-width: 30px; text-align: right;
}

/* ============ FOOTER ============ */
.app-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  animation: footerIn 0.9s var(--ease-out) backwards;
  animation-delay: 0.5s;
}
@keyframes footerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.app-footer-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.brand-cloud-mini {
  font-size: 16px;
  color: var(--accent);
  animation: brandFloat 4s ease-in-out infinite;
}

.app-footer-links {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.app-footer-links a {
  font-size: 12.5px; color: var(--text-secondary); font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s var(--ease), border-bottom-color 0.2s var(--ease);
}
.app-footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.app-footer-bottom {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 12px; color: var(--text-tertiary);
  flex-wrap: wrap;
  text-align: center;
}
.app-footer-bottom a {
  color: var(--text-secondary); font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s var(--ease), border-bottom-color 0.2s var(--ease);
}
.app-footer-bottom a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.app-footer-bottom .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-tertiary); opacity: 0.5;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.4); }
}

.app.loading .hero,
.app.loading .stats,
.app.loading .panel {
  position: relative; overflow: hidden;
}
.app.loading .hero::after,
.app.loading .stats::after,
.app.loading .panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  animation: shimmer 1.6s linear infinite;
  pointer-events: none; z-index: 10;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .dual-grid { grid-template-columns: 1fr; }
  .app-header { flex-direction: column; align-items: stretch; }
  .search { min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
  .app { padding: 20px 16px 60px; }
  .hero { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
  .hero-right { align-self: stretch; justify-content: space-between; }
  .hero-icon { font-size: 48px; }
  .hero-temp { font-size: 48px; }
  .hero-location h1 { font-size: 19px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
  .stat { padding: 10px 8px; }
  .stat-value { font-size: 13.5px; }
  .stat-label { font-size: 9.5px; }
  .panel { padding: 18px; }
  .mini-grid { grid-template-columns: 1fr; }
  .day-row { grid-template-columns: 62px 24px 1fr auto; gap: 10px; }
  .day-cond-text { font-size: 11.5px; }
  .audio-toggle { top: 16px; right: 16px; width: 38px; height: 38px; }
  .audio-toggle svg { width: 16px; height: 16px; }
  .app-footer-main { flex-direction: column; align-items: flex-start; gap: 12px; }
  .app-footer-links { gap: 14px; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .search { padding: 5px 5px 5px 12px; }
  .btn-primary { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}