/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  color: var(--ink);
  background: #87b9ee center/cover no-repeat fixed;
  transition: color 600ms ease, background-image 1200ms ease;
}
body.weather-clear  { background-image: url("/assets/images/blue_sky.jpg"); }
body.weather-cloudy  { background-image: url("/assets/images/cloudy.jpg"); }
body.weather-sunset { background-image: url("/assets/images/twilight.jpg"); }
body.weather-storm  { background-image: url("/assets/images/Thunderstorm.jpg"); }
body.weather-night  { background-image: url("/assets/images/night_sky.jpg"); }
body.weather-aurora  { background-image: url("/assets/images/aurora.jpg"); }
button { font: inherit; cursor: pointer; }

/* ===== Theme tokens (per weather) ===== */
body { --ink: #1b2440; --ink-soft: rgba(27,36,64,0.7); --glass: rgba(255,255,255,0.55);
       --glass-border: rgba(255,255,255,0.6); --accent: #5b6cff; --accent-2: #ffd84a; }
body.weather-clear   { --ink:#1b2440; --glass:rgba(255,255,255,0.55); }
body.weather-cloudy  { --ink:#222a3d; --glass:rgba(255,255,255,0.6); }
body.weather-sunset  { --ink:#3a1d3a; --glass:rgba(255,243,224,0.55); --accent:#ff7a59; --accent-2:#ffd166; }
body.weather-storm   { --ink:#eef2ff; --ink-soft:rgba(238,242,255,0.7); --glass:rgba(20,24,40,0.55); --glass-border:rgba(255,255,255,0.15); --accent:#9aa6ff; --accent-2:#fff48a; }
body.weather-night   { --ink:#e8ecff; --ink-soft:rgba(232,236,255,0.7); --glass:rgba(20,24,40,0.55); --glass-border:rgba(255,255,255,0.15); --accent:#a8b3ff; --accent-2:#ffd479; }
body.weather-aurora  { --ink:#e8ffef; --ink-soft:rgba(232,255,239,0.75); --glass:rgba(10,30,40,0.55); --glass-border:rgba(180,255,220,0.25); --accent:#7df9c1; --accent-2:#9ad4ff; }

/* ===== Sky backdrop ===== */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky__gradient, .sky__sun, .sky__aurora, .sky__canvas, .sky__clouds, .sky__lightning {
  position: absolute; inset: 0;
}
.sky__gradient { transition: background 1200ms ease, filter 1200ms ease; }

body.weather-clear   .sky__gradient { background: url("/assets/images/blue_sky.jpg")        center/cover no-repeat; }
body.weather-cloudy   .sky__gradient { background: url("/assets/images/cloudy.jpg")        center/cover no-repeat; }
body.weather-sunset  .sky__gradient { background: url("/assets/images/twilight.jpg")      center/cover no-repeat; }
body.weather-storm   .sky__gradient { background: url("/assets/images/Thunderstorm.jpg")  center/cover no-repeat; }
body.weather-night   .sky__gradient { background: url("/assets/images/night_sky.jpg")     center/cover no-repeat; }
body.weather-aurora   .sky__gradient { background: url("/assets/images/aurora.jpg")     center/cover no-repeat; }

/* Sun (only sunset) */
.sky__sun { opacity: 0; transition: opacity 1200ms ease; }
.sky__sun::before {
  content: ""; position: absolute; left: 50%; bottom: -10vh; width: 60vh; height: 60vh; transform: translateX(-50%);
  background: radial-gradient(circle, #ffe28a 0%, #ff9a5a 35%, rgba(255,154,90,0) 70%);
  filter: blur(2px);
}
body.weather-sunset .sky__sun { opacity: 1; }

/* Aurora */
.sky__aurora { opacity: 0; transition: opacity 1200ms ease; mix-blend-mode: screen; }
.sky__aurora::before, .sky__aurora::after {
  content: ""; position: absolute; inset: -10% -10% 30% -10%;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(125,249,193,0.45), transparent 60%),
    radial-gradient(50% 35% at 70% 40%, rgba(154,212,255,0.40), transparent 60%),
    radial-gradient(40% 30% at 50% 20%, rgba(180,140,255,0.30), transparent 60%);
  filter: blur(40px);
  animation: auroraShift 16s ease-in-out infinite alternate;
}
.sky__aurora::after { animation-duration: 22s; animation-direction: alternate-reverse; opacity: 0.8; }
@keyframes auroraShift {
  0%   { transform: translate3d(-3%, 0, 0) scale(1.0); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.1); }
}
body.weather-aurora .sky__aurora { opacity: 1; }

/* Canvas (stars / rain) */
.sky__canvas { width: 100%; height: 100%; }

/* Clouds */
.sky__clouds { transition: opacity 1200ms ease, filter 1200ms ease; }
.cloud {
  position: absolute; background: #fff; border-radius: 60px;
  box-shadow:
    40px -10px 0 -4px #fff,
    80px 0px 0 -8px #fff,
    -30px 0 0 -2px #fff,
    20px 18px 0 -10px #fff;
  filter: blur(1px); opacity: 0.85;
  animation: drift linear infinite;
}
.cloud--1 { top: 12%; width: 140px; height: 38px; animation-duration: 90s;  animation-delay: -10s; }
.cloud--2 { top: 28%; width: 100px; height: 28px; animation-duration: 70s;  animation-delay: -25s; }
.cloud--3 { top: 46%; width: 180px; height: 46px; animation-duration: 110s; animation-delay: -50s; }
.cloud--4 { top: 62%; width: 120px; height: 32px; animation-duration: 80s;  animation-delay: -5s; }
.cloud--5 { top: 78%; width: 160px; height: 40px; animation-duration: 100s; animation-delay: -40s; }

@keyframes drift {
  from { transform: translateX(-25vw); }
  to   { transform: translateX(125vw); }
}

body.weather-clear  .sky__clouds { opacity: 0; }
body.weather-cloudy .sky__clouds { opacity: 1; filter: brightness(0.85) saturate(0.6); }
body.weather-sunset .sky__clouds { opacity: 0.9; filter: brightness(1.05) hue-rotate(-15deg) saturate(0.9); }
body.weather-storm  .sky__clouds { opacity: 0.95; filter: brightness(0.45) saturate(0.4); }
body.weather-night  .sky__clouds { opacity: 0.15; filter: brightness(0.4); }
body.weather-aurora .sky__clouds { opacity: 0; }

/* In cloudy mode, fatten the clouds */
body.weather-cloudy .cloud { transform: scale(1.4); }

/* Lightning (storm only) */
.sky__lightning { background: #fff; opacity: 0; pointer-events: none; }
body.weather-storm .sky__lightning { animation: flash 9s linear infinite; }
@keyframes flash {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.0; }
  93.5% { opacity: 0.7; }
  94% { opacity: 0; }
  94.6% { opacity: 0.4; }
  95.2% { opacity: 0; }
}

/* ===== Top bar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 230px; }
.brand__mark { display: grid; place-items: center; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.brand__text h1 {
  margin: 0; font-size: 22px; letter-spacing: -0.02em; font-weight: 700;
  background: linear-gradient(120deg, var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand__text p { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }

.search { flex: 1; display: flex; gap: 8px; max-width: 720px; }
.search input {
  flex: 1; min-width: 0; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.6); color: var(--ink);
  font-size: 15px; outline: none;
  transition: box-shadow 200ms ease, background 200ms ease;
}
body.weather-storm .search input,
body.weather-night .search input,
body.weather-aurora .search input { background: rgba(255,255,255,0.08); color: var(--ink); }
.search input::placeholder { color: var(--ink-soft); }
.search input:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }

.search button {
  position: relative; padding: 10px 22px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--accent-2)));
  color: white; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(91,108,255,0.35);
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.search button:hover { transform: translateY(-1px); }
.search button:active { transform: translateY(0); }
.search button[disabled] { opacity: 0.7; cursor: progress; }

.btn-spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
  animation: spin 0.8s linear infinite; margin-left: 8px; vertical-align: -2px;
}
.search button.loading .btn-label { opacity: 0.5; }
.search button.loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.weather-picker { display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.35); border: 1px solid var(--glass-border); }
body.weather-storm .weather-picker,
body.weather-night .weather-picker,
body.weather-aurora .weather-picker { background: rgba(255,255,255,0.08); }
.weather-picker button {
  border: none; background: transparent; padding: 6px 8px; border-radius: 999px;
  font-size: 16px; line-height: 1; transition: background 150ms ease, transform 150ms ease;
}
.weather-picker button:hover { transform: translateY(-1px); }
.weather-picker button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== Graph ===== */
#graph {
  position: absolute; inset: 0; z-index: 1;
  min-height: 100vh; min-width: 100vw;
}

/* ===== Hint ===== */
.hint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;
  padding: 18px 22px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--ink); font-size: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  transition: opacity 400ms ease, transform 400ms ease;
}
.hint.hidden { opacity: 0; pointer-events: none; transform: translate(-50%,-40%); }
.chip {
  border: none; padding: 6px 12px; border-radius: 999px; margin: 0 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; font-weight: 500; font-size: 13px;
}

/* ===== Footer ===== */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  text-align: center; padding: 8px;
  font-size: 12px; color: var(--ink-soft);
  background: var(--glass); border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }
.footer .heart { color: #ff5a78; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 12px; z-index: 50;
  background: rgba(20,20,30,0.85); color: white; font-size: 13px;
  opacity: 0; transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .brand { min-width: 0; flex: 1; }
  .brand__text p { display: none; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .weather-picker { order: 2; }
  .weather-picker button { padding: 6px; }
}