/* ============================================================
   Forecast for One — styles
   Mobile-first, colorful, playful, accessible.
   ============================================================ */

:root {
  --bg: #10142a;
  --card: rgba(255, 255, 255, 0.14);
  --card-solid: #1b2140;
  --text: #f5f7ff;
  --muted: #c3c9ee;
  --accent: #5b7cfa;
  --accent-2: #ff8fb1;
  --accent-3: #ffd166;
  --good: #7be0c4;
  --radius: 20px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px var(--accent);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(120% 120% at 50% 0%, #26305c 0%, #10142a 60%, #0a0d1e 100%);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  color: #10142a;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  z-index: 50;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.app {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 18px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Header ---------- */
.app__header { text-align: center; }
.app__title {
  margin: 8px 0 2px;
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app__tagline { margin: 0; color: var(--muted); font-size: 1rem; }
.app__date {
  margin: 6px 0 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* ============================================================
   Weather scene
   ============================================================ */
.scene {
  position: relative;
  height: 210px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.scene__sky {
  position: absolute;
  inset: 0;
  transition: background 900ms ease;
  background: linear-gradient(180deg, #7db9ff 0%, #bfe0ff 100%);
}
.scene[data-weather="sun"]      .scene__sky { background: linear-gradient(180deg, #4aa3ff 0%, #a7e0ff 100%); }
.scene[data-weather="clouds"]   .scene__sky { background: linear-gradient(180deg, #8fa4c4 0%, #c9d5e8 100%); }
.scene[data-weather="rain"]     .scene__sky { background: linear-gradient(180deg, #47597a 0%, #7089ab 100%); }
.scene[data-weather="wind"]     .scene__sky { background: linear-gradient(180deg, #6fb6c9 0%, #bfeef2 100%); }
.scene[data-weather="lightning"].scene__sky { background: linear-gradient(180deg, #2a2f4a 0%, #4a5170 100%); }
.scene[data-weather="rainbow"]  .scene__sky { background: linear-gradient(180deg, #6db7ff 0%, #ffe6c7 100%); }
.scene[data-weather="stars"]    .scene__sky { background: linear-gradient(180deg, #0b1030 0%, #232a55 100%); }

/* Each layer is hidden by default and revealed for the matching weather */
.scene__sun,
.scene__clouds,
.scene__rain,
.scene__wind,
.scene__lightning,
.scene__stars,
.scene__rainbow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.scene[data-weather="sun"]       .scene__sun,
.scene[data-weather="rainbow"]   .scene__sun,
.scene[data-weather="clouds"]    .scene__clouds,
.scene[data-weather="rain"]      .scene__clouds,
.scene[data-weather="rain"]      .scene__rain,
.scene[data-weather="lightning"] .scene__clouds,
.scene[data-weather="lightning"] .scene__lightning,
.scene[data-weather="wind"]      .scene__clouds,
.scene[data-weather="wind"]      .scene__wind,
.scene[data-weather="stars"]     .scene__stars,
.scene[data-weather="rainbow"]   .scene__rainbow { opacity: 1; }

/* ---- Sun ---- */
.sun { display: grid; place-items: center; }
.sun__core {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #ffd166 60%, #ffb347);
  box-shadow: 0 0 50px rgba(255, 209, 102, 0.8);
  position: relative;
  z-index: 2;
}
.sun__rays {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255, 224, 130, 0.9) 0 8deg, transparent 8deg 30deg,
      rgba(255, 224, 130, 0.9) 30deg 38deg, transparent 38deg 60deg,
      rgba(255, 224, 130, 0.9) 60deg 68deg, transparent 68deg 90deg,
      rgba(255, 224, 130, 0.9) 90deg 98deg, transparent 98deg 120deg,
      rgba(255, 224, 130, 0.9) 120deg 128deg, transparent 128deg 150deg,
      rgba(255, 224, 130, 0.9) 150deg 158deg, transparent 158deg 180deg,
      rgba(255, 224, 130, 0.9) 180deg 188deg, transparent 188deg 210deg,
      rgba(255, 224, 130, 0.9) 210deg 218deg, transparent 218deg 240deg,
      rgba(255, 224, 130, 0.9) 240deg 248deg, transparent 248deg 270deg,
      rgba(255, 224, 130, 0.9) 270deg 278deg, transparent 278deg 300deg,
      rgba(255, 224, 130, 0.9) 300deg 308deg, transparent 308deg 330deg,
      rgba(255, 224, 130, 0.9) 330deg 338deg, transparent 338deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px);
  mask: radial-gradient(circle, transparent 44px, #000 45px);
  animation: spin 24s linear infinite;
}

/* ---- Clouds ---- */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud--1 { width: 110px; height: 34px; top: 42px; left: -120px; animation: drift 26s linear infinite; }
.cloud--2 { width: 80px;  height: 26px; top: 92px; left: -120px; animation: drift 34s linear infinite; animation-delay: -8s; opacity: 0.8; }
.cloud--3 { width: 130px; height: 40px; top: 130px; left: -160px; animation: drift 30s linear infinite; animation-delay: -16s; }
.cloud::before { width: 46px; height: 46px; top: -20px; left: 16px; }
.cloud::after  { width: 62px; height: 62px; top: -30px; right: 16px; }

/* ---- Rain ---- */
.rain {
  background-image:
    linear-gradient(180deg, transparent 60%, rgba(190, 220, 255, 0.7) 60%);
  background-size: 3px 22px;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 30%);
  mask: linear-gradient(180deg, transparent 30%, #000 30%);
  animation: rainfall 0.6s linear infinite;
}

/* ---- Wind ---- */
.gust {
  position: absolute;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  left: -160px;
}
.gust--1 { width: 120px; top: 70px;  animation: gust 3.2s ease-in-out infinite; }
.gust--2 { width: 170px; top: 108px; animation: gust 2.6s ease-in-out infinite; animation-delay: -0.6s; }
.gust--3 { width: 90px;  top: 146px; animation: gust 3.6s ease-in-out infinite; animation-delay: -1.2s; }

/* ---- Lightning ---- */
.lightning::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: flash 4s steps(1) infinite;
}
.lightning::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 16px solid transparent;
  border-right: 26px solid transparent;
  border-top: 70px solid #ffe066;
  clip-path: polygon(40% 0, 100% 0, 55% 45%, 90% 45%, 20% 100%, 45% 50%, 5% 50%);
  filter: drop-shadow(0 0 8px rgba(255, 224, 102, 0.9));
  animation: bolt 4s steps(1) infinite;
}

/* ---- Stars ---- */
.stars {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, #fff, transparent),
    radial-gradient(2px 2px at 80% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 60%, #fff, transparent),
    radial-gradient(1px 1px at 50% 80%, #fff, transparent),
    radial-gradient(2px 2px at 15% 75%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 70%, #fff, transparent),
    radial-gradient(1px 1px at 70% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, #fff, transparent);
  animation: twinkle 3.5s ease-in-out infinite;
}
.stars::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 48px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 35%, #fdf6d8, #e9e4c0);
  box-shadow: inset -12px -6px 0 -2px rgba(30, 40, 80, 0.6), 0 0 24px rgba(253, 246, 216, 0.5);
}

/* ---- Rainbow ---- */
.rainbow {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rainbow span {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border-style: solid;
  border-color: currentColor transparent transparent transparent;
  opacity: 0.85;
}
.rainbow span:nth-child(1) { width: 300px; height: 300px; border-width: 10px; color: #ff595e; }
.rainbow span:nth-child(2) { width: 280px; height: 280px; border-width: 10px; color: #ff924c; }
.rainbow span:nth-child(3) { width: 260px; height: 260px; border-width: 10px; color: #ffca3a; }
.rainbow span:nth-child(4) { width: 240px; height: 240px; border-width: 10px; color: #8ac926; }
.rainbow span:nth-child(5) { width: 220px; height: 220px; border-width: 10px; color: #1982c4; }
.rainbow span:nth-child(6) { width: 200px; height: 200px; border-width: 10px; color: #4267ac; }
.rainbow span:nth-child(7) { width: 180px; height: 180px; border-width: 10px; color: #6a4c93; }

/* ============================================================
   Forecast card
   ============================================================ */
.forecast {
  background: var(--card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.forecast__label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-3);
}
.forecast__text {
  margin: 0;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
}
.forecast--pop { animation: pop 420ms ease; }

/* ============================================================
   Controls
   ============================================================ */
.controls {
  background: var(--card-solid);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow);
}
.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.slider__value {
  font-variant-numeric: tabular-nums;
  background: var(--accent);
  color: #fff;
  min-width: 2.2em;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.95rem;
}

/* Range input — large, touch-friendly, accessible focus */
.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  outline: none;
  cursor: pointer;
}
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease;
}
.slider__input::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.slider__input:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider__input:focus-visible { box-shadow: var(--ring); }

/* ============================================================
   Buttons
   ============================================================ */
.actions { display: flex; flex-direction: column; gap: 12px; }
.actions__row { display: flex; gap: 12px; }
.actions__row .btn { flex: 1; }

.btn {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  padding: 16px 18px;
  font-size: 1rem;
  transition: transform 120ms ease, filter 120ms ease, background 200ms ease;
  min-height: 52px;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn--primary {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  font-size: 1.25rem;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(91, 124, 250, 0.45);
}
.btn--primary:hover { filter: brightness(1.06); }

.btn--secondary { background: #333a63; }
.btn--secondary:hover { background: #3d4576; }

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 14px;
  min-height: 40px;
  font-size: 0.9rem;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

/* ============================================================
   History
   ============================================================ */
.history {
  background: var(--card-solid);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.history__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.history__title { margin: 0; font-size: 1.15rem; }
.history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history__item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadein 300ms ease;
}
.history__item-top { display: flex; align-items: center; gap: 8px; }
.history__emoji { font-size: 1.2rem; line-height: 1; }
.history__cond {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-3);
  font-weight: 700;
}
.history__text { margin: 0; font-size: 0.98rem; font-weight: 600; }
.history__meta { font-size: 0.75rem; color: var(--muted); }
.history__empty { color: var(--muted); font-size: 0.95rem; padding: 6px 2px; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #fff;
  color: #10142a;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 40;
  max-width: 90vw;
  text-align: center;
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(700px); } }
@keyframes rainfall { from { background-position: 0 0; } to { background-position: 0 22px; } }
@keyframes gust {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(760px); opacity: 0; }
}
@keyframes flash {
  0%, 92%, 100% { opacity: 0; }
  94%, 97%      { opacity: 0.9; }
}
@keyframes bolt {
  0%, 90%, 100% { opacity: 0; }
  92%, 95%      { opacity: 1; }
}
@keyframes twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes pop {
  0%   { transform: scale(0.97); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Reduced motion — honor the user's preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sun__rays { animation: none; }
  .cloud--1, .cloud--2, .cloud--3 { animation: none; left: auto; right: 30px; }
  .cloud--1 { left: 30px; }
  .cloud--2 { left: 120px; }
  .rain { animation: none; }
}

/* ============================================================
   Slightly wider screens
   ============================================================ */
@media (min-width: 600px) {
  .app { padding-top: 32px; }
  .scene { height: 240px; }
}