/* weather.css — Lulu's Magical Weather */

/* =========================================
   DESIGN TOKENS
   ========================================= */
:root {
  /* Rainbow palette */
  --rainbow-1: #ff6b9d;  /* pink */
  --rainbow-2: #ff9a56;  /* orange */
  --rainbow-3: #ffd93d;  /* yellow */
  --rainbow-4: #6bcb77;  /* green */
  --rainbow-5: #4d96ff;  /* blue */
  --rainbow-6: #9b59b6;  /* purple */
  --rainbow-7: #e056a0;  /* magenta */

  /* Core palette */
  --bg-deep: #1a1035;
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-card-solid: #221546;
  --text-primary: #f0e6ff;
  --text-secondary: #b8a9d4;
  --text-muted: #8b7aab;
  --accent: #c084fc;
  --accent-glow: rgba(192, 132, 252, 0.3);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.05);

  /* Functional colors */
  --temp-hot: #ff6b9d;
  --temp-cold: #67c8ff;
  --wind-color: #6bcb77;
  --precip-color: #4d96ff;

  /* Rainbow gradient */
  --rainbow-gradient: linear-gradient(135deg, #ff6b9d, #ff9a56, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #e056a0);
  --rainbow-gradient-h: linear-gradient(90deg, #ff6b9d, #ff9a56, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #e056a0);

  /* Spinner */
  --twister-color: rgba(192, 132, 252, 0.75);
  --twister-glow: rgba(192, 132, 252, 0.25);
  --twister-rotate-duration: 6s;
}

/* =========================================
   BASE
   ========================================= */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated starfield background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192, 132, 252, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(77, 150, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 107, 157, 0.06) 0%, transparent 50%);
}

/* Floating sparkles via pseudo-element */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 50% 30%, rgba(255,217,61,0.5), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 85% 15%, rgba(192,132,252,0.5), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(107,203,119,0.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 55%, rgba(255,154,86,0.4), transparent),
    radial-gradient(1px 1px at 65% 40%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(77,150,255,0.4), transparent);
  pointer-events: none;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

a { color: #c084fc; }
a:hover { color: #d8a9ff; }
small, .small, .text-muted { color: var(--text-muted) !important; }

/* =========================================
   NAVBAR
   ========================================= */
.navbar.bg-primary {
  position: relative;
  background: linear-gradient(135deg, #1a1035 0%, #2d1b69 50%, #1a1035 100%) !important;
  border-bottom: none;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  padding: 0.6rem 1rem;
}

/* Rainbow accent line under navbar */
.navbar.bg-primary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--rainbow-gradient-h);
  background-size: 200% 100%;
  animation: rainbow-slide 4s linear infinite;
}

@keyframes rainbow-slide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Brand logo */
.brand-logo { height: 36px; width: auto; margin-right: 6px; display: block; }
.navbar-brand { gap: 6px; }
.brand-logo .logo-text { letter-spacing: 0.4px; fill: url(#textGrad) !important; }

/* Feedback button */
@media (min-width: 768px) {
  .navbar .nav-item.feedback { margin-left: 1.75rem; padding-left: 1.25rem; border-left: 1px solid rgba(192,132,252,0.25); }
}
.navbar .nav-item.feedback .btn { border-color: rgba(192,132,252,0.25); }
.navbar .nav-item.feedback .btn:hover,
.navbar .nav-item.feedback .btn:focus {
  border-color: var(--accent);
  background: rgba(192,132,252,0.12);
  box-shadow: 0 0 0 2px rgba(192,132,252,0.18) inset;
}

/* Segmented navigation */
.main-views {
  font-size: 1.05rem;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) inset;
}
.navbar .main-views { margin-left: auto; margin-right: auto; justify-content: center; }
@media (min-width: 768px) {
  .navbar .main-views {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.main-views .nav-link {
  position: relative;
  padding: 0.45rem 1rem;
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
  min-width: 110px;
  background: transparent;
  border: 0;
  transition: all 200ms ease;
}
.main-views .nav-link:hover,
.main-views .nav-link:focus {
  color: #ffffff;
  background: rgba(192, 132, 252, 0.1);
  outline: none;
}
.main-views .nav-link:active { transform: translateY(1px); }
.main-views .nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(192,132,252,0.25), rgba(77,150,255,0.2));
  box-shadow: 0 0 0 1px rgba(192,132,252,0.3) inset, 0 4px 16px rgba(0,0,0,0.2);
}
.main-views .nav-link.active::after { content: none; }

/* Active nav state */
.navbar .nav-link.active { color: #fff; font-weight: 600; }

/* Hide all app UI until a ZIP is entered */
body:not(.has-zip) #coordinates { display: none !important; }
body:not(.has-zip) .main-views { display: none !important; }
body.has-zip .main-views { display: flex; }

#current-observationSummary,
#discussion {
  display: none;
}

/* Change-location icon button */
.nav-change-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-left: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
}
.nav-change-location:hover,
.nav-change-location:focus {
  color: #ffffff;
  background: rgba(192, 132, 252, 0.15);
  outline: none;
}

/* =========================================
   VIEW MANAGEMENT
   ========================================= */
.view-container { display: none; backface-visibility: hidden; }
.view-container.active { display: block; }

#views-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}
#views-wrapper.flip-anim {
  animation: flip-container 480ms ease-in-out;
}
@keyframes flip-container {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(90deg); }
  55%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  #views-wrapper.flip-anim { animation: none !important; }
}

/* =========================================
   CONTAINER & CARDS
   ========================================= */
.container { max-width: 1100px; }

/* Glass card style */
.info-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#view-location .info-card { max-width: 420px; margin: 0 auto; }

/* Observation & discussion cards */
#current-observationSummary,
#discussion {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#current-observationSummary p,
#discussion p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
#discussion .bottom-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(192, 132, 252, 0.15);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  color: #e8d5ff;
}

.text-center { text-align: center; }

/* =========================================
   LOCATION VIEW — ZIP FORM
   ========================================= */
#view-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
}

/* Unicorn welcome message */
#view-location .info-card::before {
  content: "🦄 Where shall we check the weather? ✨";
  display: block;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 16px;
  background: var(--rainbow-gradient-h);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-text-shift 6s linear infinite;
  background-size: 200% 100%;
}

@keyframes rainbow-text-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#zip {
  min-width: 220px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 1rem;
  transition: all 200ms ease;
}
#zip:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.2), 0 0 20px rgba(192, 132, 252, 0.1);
  outline: none;
  background: rgba(255, 255, 255, 0.1);
}
#zip::placeholder { color: var(--text-muted); }

/* Rainbow gradient button */
.btn-primary,
#zipForm .btn-primary {
  background: linear-gradient(135deg, var(--rainbow-6), var(--rainbow-5)) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  color: white !important;
  transition: all 250ms ease !important;
  box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3) !important;
}
.btn-primary:hover,
#zipForm .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(155, 89, 182, 0.5) !important;
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
}
.btn-primary:active {
  transform: translateY(0) !important;
}

/* =========================================
   SUMMARY BAR
   ========================================= */
.summary-bar { margin-left: -0.25rem; margin-right: -0.25rem; }
.summary-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  height: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.summary-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.summary-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.tile-temp .summary-icon { color: var(--temp-hot); }
.tile-wind .summary-icon { color: var(--wind-color); }
.tile-precip .summary-icon { color: var(--precip-color); }
.summary-tile .label { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 4px; }
.summary-tile .value { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.2px; }

/* Rainbow shimmer on tile tops */
.summary-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  border-radius: 2px;
  background: var(--rainbow-gradient-h);
  background-size: 200% 100%;
  animation: rainbow-slide 3s linear infinite;
  opacity: 0.6;
}
.summary-tile { position: relative; overflow: hidden; }

/* =========================================
   HOURLY TIMELINE
   ========================================= */
.hourly-timeline {
  position: relative;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 14px 10px 24px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  scroll-snap-type: x proximity;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hourly-timeline::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  top: 56px;
  height: 2px;
  background: linear-gradient(90deg, rgba(192,132,252,0.3), rgba(77,150,255,0.3), rgba(192,132,252,0.3));
  z-index: 1;
}
.hourly-timeline > * { position: relative; z-index: 1; }

.hour-step {
  position: relative;
  min-width: var(--hour-step-width, 120px);
  flex: 0 0 var(--hour-step-width, 120px);
  text-align: center;
  padding: 2px 6px 0 6px;
  scroll-snap-align: start;
}
.hour-time {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.hour-node {
  position: absolute;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(192,132,252,0.15);
  pointer-events: none;
}
.hour-step.hot .hour-node { background: var(--temp-hot); box-shadow: 0 0 0 2px rgba(255,107,157,0.15); }
.hour-step.cold .hour-node { background: var(--temp-cold); box-shadow: 0 0 0 2px rgba(103,200,255,0.15); }

.hour-temp { margin-top: 28px; font-size: 1.15rem; font-weight: 600; }
.hour-precip { color: var(--text-secondary); font-size: 0.9rem; }

.hour-wind { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); font-size: 0.9rem; }
.hour-wind .wind-arrow { width: 18px; height: 18px; display: inline-block; }
.hour-wind .wind-arrow svg { width: 18px; height: 18px; display: block; }

/* Now highlight — rainbow glow */
.hour-step.now .hour-time {
  background: var(--rainbow-gradient-h);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: rainbow-text-shift 3s linear infinite;
}
.hour-step.now .hour-node {
  width: 10px; height: 10px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(192,132,252,0.5), 0 0 0 3px rgba(192,132,252,0.2);
}

/* Sunrise/Sunset markers */
.sun-marker { position: relative; width: 2px; background: rgba(255,217,61,0.3); align-self: stretch; flex: 0 0 auto; }
.sun-marker .label { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: #ffd93d; white-space: nowrap; background: var(--bg-card-solid); padding: 0 4px; border-radius: 3px; }
.sun-marker .dot { position: absolute; top: 52px; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 217, 61, 0.16); }
.sun-marker.sunrise .dot { background: #ffd93d; }
.sun-marker.sunset .dot { background: #ff9a56; box-shadow: 0 0 0 2px rgba(255, 154, 86, 0.16); }

/* Day separator */
.day-separator { position: relative; width: 1px; background: rgba(192,132,252,0.2); align-self: stretch; flex: 0 0 auto; }
.day-separator span { position: absolute; top: 6px; left: -16px; transform: translateX(-50%); color: var(--text-secondary); font-size: 0.75rem; background: var(--bg-card-solid); padding: 0 4px; }

/* Daylight band */
.daylight-band {
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(180deg, rgba(255, 217, 61, 0.06), rgba(255, 217, 61, 0.02));
  border-left: 1px solid rgba(255, 217, 61, 0.1);
  border-right: 1px solid rgba(255, 217, 61, 0.1);
  z-index: 0;
  pointer-events: none;
}

/* Density: compact */
body.density-compact .hourly-timeline { gap: 10px; padding: 10px 8px 18px 8px; }
body.density-compact .hour-step { min-width: var(--hour-step-width, 90px); }
body.density-compact .hour-icon { width: 28px; height: 28px; }
body.density-compact .hour-temp { font-size: 1rem; }
body.density-compact .hour-wind span:last-child { display: none; }

/* Auto-fit helpers */
body.fit-tight .hour-precip { display: none; }
body.fit-tight .hour-time { margin-bottom: 12px; font-size: 0.9rem; }
body.fit-tight .hour-temp { margin-top: 20px; font-size: 1rem; }
body.fit-ultra .hour-wind { display: none; }
body.fit-ultra .hour-temp { font-size: 0.95rem; }

@media (max-width: 576px) {
  .hourly-timeline::before { top: 62px; }
  .hour-node { top: 58px; }
  .hour-time { margin-bottom: 22px; }
  .hour-temp { margin-top: 32px; }
}

/* Scrollbar */
.hourly-timeline::-webkit-scrollbar { height: 8px; }
.hourly-timeline::-webkit-scrollbar-track { background: transparent; }
.hourly-timeline::-webkit-scrollbar-thumb { background: rgba(192,132,252,0.2); border-radius: 8px; }
.hourly-timeline:hover::-webkit-scrollbar-thumb { background: rgba(192,132,252,0.35); }

/* =========================================
   FORECAST
   ========================================= */
.forecast-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.forecast-item {
  flex: 1 1 calc(25% - 12px);
  padding: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.forecast-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.forecast-item-daily {
  flex: 1 1 calc(14.28% - 12px);
  padding: 12px 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.forecast-item-daily:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(192, 132, 252, 0.15);
}

.forecast-item p { margin: 0; font-size: 0.95em; }
.forecast-item .header { font-weight: 600; }

/* Compact daily tile styles */
.forecast-item-daily.compact { padding: 10px 6px; }
.forecast-item-daily.compact .header { font-size: 0.95rem; margin-bottom: 6px; font-weight: 700; }
.forecast-item-daily.compact .hi { color: var(--temp-hot); font-weight: 600; }
.forecast-item-daily.compact .lo { color: var(--temp-cold); font-weight: 600; }
.forecast-item-daily.compact .sep { color: var(--text-muted); margin: 0 2px; }

/* Daily forecast details */
.forecast-item-daily .wx-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 6px; }
.forecast-item-daily .wx-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); object-fit: cover; }
.forecast-item-daily .wx-short { font-size: 0.9rem; color: var(--text-primary); }
.forecast-item-daily .wx-hilo { margin: 2px 0 6px 0; }
.forecast-item-daily .wx-stats { display: flex; gap: 10px; justify-content: center; align-items: center; color: var(--text-secondary); font-size: 0.85rem; }
.forecast-item-daily .wx-stat { display: inline-flex; align-items: center; gap: 6px; }
.forecast-item-daily .wx-wind .wind-arrow { width: 16px; height: 16px; display: inline-block; }

@media (max-width: 1200px) {
  .forecast-item-daily { flex: 1 1 calc(20% - 12px); }
}
@media (max-width: 992px) {
  .forecast-item-daily { flex: 1 1 calc(25% - 12px); }
}
@media (max-width: 768px) {
  .forecast-item-daily { flex: 1 1 calc(33.33% - 12px); }
}
@media (max-width: 480px) {
  .forecast-item-daily { flex: 1 1 calc(50% - 12px); }
}

/* Mobile layout tweaks */
@media (max-width: 576px) {
  .navbar .container { flex-wrap: wrap; }
  .main-views { order: 3; width: 100%; justify-content: center; margin-top: 8px; font-size: 1.1rem; }
  .main-views .nav-link { padding: 0.5rem 1.1rem; margin: 0 0.25rem 6px; }

  #zipForm { display: flex; flex-wrap: wrap; gap: 8px; }
  #zipForm #zip { flex: 1 1 100%; margin: 0; }
  #zipForm .btn { flex: 0 0 auto; margin-left: auto; margin-right: auto; }

  .forecast-group { gap: 8px; }
}
@media (max-width: 480px) {
  .forecast-item-daily .wx-short { display: none; }
  .forecast-item-daily .header { font-size: 0.9rem; }
}

/* Horizontal scroll carousel for daily tiles on small screens */
@media (max-width: 576px) {
  .forecast-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 8px 6px 12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .forecast-item-daily {
    flex: 0 0 auto;
    min-width: 140px;
    scroll-snap-align: start;
  }
  .forecast-group::-webkit-scrollbar { height: 8px; }
  .forecast-group::-webkit-scrollbar-track { background: transparent; }
  .forecast-group::-webkit-scrollbar-thumb { background: rgba(192,132,252,0.2); border-radius: 8px; }
  .forecast-group:hover::-webkit-scrollbar-thumb { background: rgba(192,132,252,0.35); }
}
@media (max-width: 400px) {
  .forecast-item-daily { min-width: 120px; }
}

/* Daily scroller controls */
.forecast-scroller { position: relative; }
.fg-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  border: 1px solid rgba(192,132,252,0.2);
  color: var(--text-primary);
  background: var(--bg-card-solid);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all 200ms ease;
}
.fg-nav:hover,
.fg-nav:focus { background: rgba(192,132,252,0.15); border-color: rgba(192,132,252,0.4); }
.fg-prev { left: -6px; }
.fg-next { right: -6px; }
.fg-nav[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (max-width: 576px) {
  .fg-nav { display: inline-flex; }
}

#discussion { margin-bottom: 40px; }

/* =========================================
   CHART
   ========================================= */
.chart-container {
  position: relative;
  width: 100%;
  max-width: none;
  height: 380px;
  margin: 0 auto 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 768px) {
  .chart-container { height: 300px; }
}
.chart-container.daily-compact { height: 260px; }
@media (max-width: 768px) {
  .chart-container.daily-compact { height: 220px; }
}

/* =========================================
   RADAR
   ========================================= */
#radar-container { width: 100%; max-width: 1200px; margin: 0 auto 40px; }
#radar-container .windy-embed {
  border: 0;
  display: block;
  width: 100%;
  height: min(85vh, 900px);
  min-height: 400px;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
}
@media (max-width: 768px) {
  #radar-container .windy-embed { height: 65vh; min-height: 320px; }
}
.windy-embed-actions { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.windy-embed-actions a { font-size: 0.9rem; }
#radar-container .windy-embed-wrapper.expanded .windy-embed { height: min(95vh, 1000px); }
@media (max-width: 768px) {
  #radar-container .windy-embed-wrapper.expanded .windy-embed { height: 80vh; }
}

/* =========================================
   ALERTS
   ========================================= */
#alerts { width: 100%; margin: 20px 0; }
#alerts ul { list-style-type: none; padding: 0; }
#alerts li {
  border: 1px solid rgba(255, 107, 157, 0.4);
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 107, 157, 0.08);
  color: #ffc2d4;
  margin-bottom: 10px;
  backdrop-filter: blur(8px);
}
#alerts h3 { margin: 0; font-size: 1.1em; }
#alerts p { margin: 5px 0; }

/* =========================================
   MAGICAL FULL-SCREEN LOADING EXPERIENCE
   ========================================= */
#spinner-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #2d1b69 0%, #1a1035 40%, #0d0820 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

/* ---- Starfield canvas ---- */
.loading-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ---- Rainbow arc ---- */
.loading-rainbow {
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 140vw;
  height: 70vw;
  max-width: 1000px;
  max-height: 500px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rainbow-appear 1.2s ease-out both;
}

@keyframes rainbow-appear {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.rainbow-band {
  width: 100%;
  border-radius: 50% 50% 0 0;
  flex-shrink: 0;
}
.rainbow-band.rb1 { height: 14%; background: rgba(255, 107, 157, 0.25); }
.rainbow-band.rb2 { height: 13%; background: rgba(255, 154, 86, 0.22); margin-top: -2px; }
.rainbow-band.rb3 { height: 12%; background: rgba(255, 217, 61, 0.20); margin-top: -2px; }
.rainbow-band.rb4 { height: 11%; background: rgba(107, 203, 119, 0.18); margin-top: -2px; }
.rainbow-band.rb5 { height: 10%; background: rgba(77, 150, 255, 0.16); margin-top: -2px; }
.rainbow-band.rb6 { height: 9%; background: rgba(155, 89, 182, 0.14); margin-top: -2px; }
.rainbow-band.rb7 { height: 8%; background: rgba(224, 86, 160, 0.12); margin-top: -2px; }

/* Shimmer effect on rainbow */
.loading-rainbow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: rainbow-shimmer 2.5s ease-in-out infinite;
}
@keyframes rainbow-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Floating clouds ---- */
.loading-cloud {
  position: absolute;
  font-size: 3rem;
  z-index: 2;
  opacity: 0.6;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.loading-cloud.lc1 {
  top: 8%;
  animation: cloud-drift-1 12s ease-in-out infinite;
  font-size: 4rem;
  opacity: 0.5;
}
.loading-cloud.lc2 {
  top: 15%;
  animation: cloud-drift-2 16s ease-in-out infinite;
  font-size: 3rem;
  opacity: 0.4;
}
.loading-cloud.lc3 {
  top: 22%;
  animation: cloud-drift-3 10s ease-in-out infinite;
  font-size: 2.5rem;
  opacity: 0.35;
}
@keyframes cloud-drift-1 {
  0%, 100% { left: -10%; }
  50% { left: 80%; }
}
@keyframes cloud-drift-2 {
  0%, 100% { right: -15%; }
  50% { right: 75%; }
}
@keyframes cloud-drift-3 {
  0%, 100% { left: 5%; }
  50% { left: 70%; }
}

/* ---- Galloping unicorn ---- */
.loading-unicorn-track {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 5;
  overflow: hidden;
}

.loading-unicorn {
  position: absolute;
  left: -120px;
  bottom: 0;
  animation: unicorn-gallop 4s ease-in-out infinite;
}

@keyframes unicorn-gallop {
  0%   { left: -120px; transform: translateY(0); }
  10%  { transform: translateY(-25px); }
  15%  { transform: translateY(0); }
  25%  { transform: translateY(-30px); }
  30%  { transform: translateY(0); }
  40%  { transform: translateY(-20px); }
  45%  { transform: translateY(0); }
  55%  { transform: translateY(-28px); }
  60%  { transform: translateY(0); }
  70%  { transform: translateY(-22px); }
  75%  { transform: translateY(0); }
  85%  { transform: translateY(-15px); }
  90%  { transform: translateY(0); }
  100% { left: calc(100% + 120px); transform: translateY(0); }
}

.unicorn-sprite {
  font-size: 5rem;
  filter: drop-shadow(0 4px 20px rgba(192, 132, 252, 0.5));
  animation: unicorn-bob 0.35s ease-in-out infinite alternate;
}
@keyframes unicorn-bob {
  0% { transform: rotate(-3deg) scaleX(-1); }
  100% { transform: rotate(3deg) scaleX(-1); }
}

/* Sparkle trail behind unicorn */
.unicorn-sparkle-trail {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}

.trail-spark {
  font-size: 1.2rem;
  opacity: 0;
  animation: spark-fade 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 217, 61, 0.5));
}
.trail-spark.ts1 { animation-delay: 0s; font-size: 1.4rem; }
.trail-spark.ts2 { animation-delay: 0.1s; font-size: 1.1rem; }
.trail-spark.ts3 { animation-delay: 0.2s; font-size: 1.3rem; }
.trail-spark.ts4 { animation-delay: 0.3s; font-size: 0.9rem; }
.trail-spark.ts5 { animation-delay: 0.4s; font-size: 1.2rem; }
.trail-spark.ts6 { animation-delay: 0.5s; font-size: 1rem; }
.trail-spark.ts7 { animation-delay: 0.6s; font-size: 1.1rem; }
.trail-spark.ts8 { animation-delay: 0.7s; font-size: 1.3rem; }

@keyframes spark-fade {
  0%, 5%  { opacity: 0; transform: translateX(0) scale(0.5); }
  10%, 70% { opacity: 1; transform: translateX(-10px) scale(1); }
  90%, 100% { opacity: 0; transform: translateX(-30px) scale(0.3); }
}

/* ---- Burst emojis from center ---- */
.loading-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}

.burst-item {
  position: absolute;
  font-size: 1.8rem;
  opacity: 0;
  animation: burst-fly 3.5s ease-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* Each burst item flies in a different direction */
.burst-item.bi1  { animation-delay: 0s;    --bx: -180px; --by: -200px; }
.burst-item.bi2  { animation-delay: 0.25s; --bx: 160px;  --by: -220px; }
.burst-item.bi3  { animation-delay: 0.5s;  --bx: -250px; --by: -80px; }
.burst-item.bi4  { animation-delay: 0.75s; --bx: 230px;  --by: -100px; }
.burst-item.bi5  { animation-delay: 1s;    --bx: -120px; --by: -260px; }
.burst-item.bi6  { animation-delay: 1.25s; --bx: 280px;  --by: -50px; }
.burst-item.bi7  { animation-delay: 1.5s;  --bx: -200px; --by: 40px; }
.burst-item.bi8  { animation-delay: 1.75s; --bx: 140px;  --by: -280px; }
.burst-item.bi9  { animation-delay: 2s;    --bx: -300px; --by: -140px; }
.burst-item.bi10 { animation-delay: 2.25s; --bx: 200px;  --by: 20px; }
.burst-item.bi11 { animation-delay: 2.5s;  --bx: -50px;  --by: -300px; }
.burst-item.bi12 { animation-delay: 2.75s; --bx: 260px;  --by: -180px; }

@keyframes burst-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  15%  { opacity: 1; transform: translate(calc(var(--bx) * 0.3), calc(var(--by) * 0.3)) scale(1.2) rotate(60deg); }
  60%  { opacity: 0.8; transform: translate(calc(var(--bx) * 0.8), calc(var(--by) * 0.8)) scale(0.9) rotate(200deg); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.2) rotate(360deg); }
}

/* ---- Center message ---- */
.loading-center-message {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: 0 20px;
}

.loading-orb-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.15) 0%, transparent 70%);
  animation: orb-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes orb-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.loading-headline {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 20px;
  background: var(--rainbow-gradient-h);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: rainbow-text-shift 3s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.3));
  transition: opacity 0.25s ease;
}

@media (max-width: 576px) {
  .loading-headline { font-size: 1.2rem; }
  .unicorn-sprite { font-size: 3.5rem; }
  .burst-item { font-size: 1.3rem; }
  .loading-cloud.lc1 { font-size: 3rem; }
}

/* ---- Rainbow progress bar ---- */
.loading-progress-rainbow {
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.loading-progress-fill {
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--rainbow-gradient-h);
  background-size: 200% 100%;
  animation: progress-slide 1.5s ease-in-out infinite, rainbow-slide 2s linear infinite;
}

@keyframes progress-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(350%); }
  100% { transform: translateX(-100%); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .loading-unicorn, .loading-cloud, .burst-item, .trail-spark,
  .loading-orb-glow, .loading-progress-fill, .loading-rainbow::after,
  .unicorn-sprite { animation: none !important; }
  .loading-unicorn { left: calc(50% - 40px); }
  body::after { animation: none !important; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================
   FOOTER
   ========================================= */
footer a[data-toggle="modal"][data-target="#featureRequestModal"] { text-decoration: none; }
footer a[data-toggle="modal"][data-target="#featureRequestModal"]:hover { text-decoration: underline; }

/* =========================================
   MODAL (Feature Request)
   ========================================= */
.modal-content.bg-dark {
  background: var(--bg-deep) !important;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}
.modal-content .form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.2);
  color: var(--text-primary);
  border-radius: 10px;
}
.modal-content .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.2);
}

/* =========================================
   NAV ZIP FORM (in header)
   ========================================= */
.nav-zipform { margin-left: 1rem; }
.nav-zipform .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(192,132,252,0.2);
  color: var(--text-primary);
  height: 34px;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}
.nav-zipform .form-control::placeholder { color: var(--text-muted); }
.nav-zipform .btn.btn-plain {
  background: rgba(192,132,252,0.1);
  border: 1px solid rgba(192,132,252,0.2);
  color: var(--text-primary);
  height: 34px;
  padding: 0.25rem 0.8rem;
  border-radius: 8px;
}
.nav-zipform .btn.btn-plain:hover,
.nav-zipform .btn.btn-plain:focus {
  background: rgba(192,132,252,0.2);
  border-color: rgba(192,132,252,0.4);
  box-shadow: 0 0 0 2px rgba(192,132,252,0.15) inset;
}

@media (max-width: 576px) {
  .nav-zipform { order: 2; width: 100%; margin-left: 0; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .nav-zipform #zip { flex: 1 1 100%; width: 100%; min-width: 0; }
  .nav-zipform .btn { flex: 1 1 100%; white-space: nowrap; }
  .navbar .nav-item.feedback { display: none; }
}

/* Simple neutral button */
.btn-plain {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
.btn-plain:hover,
.btn-plain:focus {
  color: #ffffff;
  background: rgba(192,132,252,0.1);
  border-color: rgba(192,132,252,0.3);
  box-shadow: 0 0 0 2px rgba(192,132,252,0.1);
}
.btn-plain:active { background: rgba(192,132,252,0.15); }
.btn-plain:disabled { color: var(--text-muted); background: rgba(255,255,255,0.03); }

/* Tighten daily forecast details for smaller screens */
@media (max-width: 576px) {
  .forecast-item-daily.compact { padding: 8px 6px; }
  .forecast-item-daily.compact .header { font-size: 0.9rem; }
  .forecast-item-daily .wx-ico { width: 24px; height: 24px; }
  .forecast-item-daily .wx-row { gap: 6px; }
  .forecast-item-daily .wx-short { font-size: 0.85rem; }
  .forecast-item-daily .wx-stats { gap: 8px; font-size: 0.8rem; }
  .forecast-item-daily .wx-wind span:last-child { display: none; }
}
@media (max-width: 400px) {
  .forecast-item-daily .wx-ico { width: 20px; height: 20px; }
  .forecast-item-daily .wx-short { font-size: 0.8rem; }
}

/* =========================================
   SCHOOL OUTFIT CARD
   ========================================= */
.school-outfit-card {
  position: relative;
  border-radius: 18px;
  padding: 2px; /* border via gradient wrapper */
  background: var(--rainbow-gradient);
  background-size: 200% 200%;
  animation: rainbow-border-spin 5s linear infinite;
  box-shadow: 0 6px 30px rgba(192, 132, 252, 0.25);
}

@keyframes rainbow-border-spin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.school-outfit-card > .school-outfit-header,
.school-outfit-card > .school-outfit-text {
  /* children sit on top of inner bg */
}

/* inner white bg fakes a border */
.school-outfit-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: var(--bg-card-solid);
  z-index: 0;
}

.school-outfit-header,
.school-outfit-text {
  position: relative;
  z-index: 1;
}

.school-outfit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 6px;
}

.school-outfit-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 6px rgba(192, 132, 252, 0.4));
}

.school-outfit-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--rainbow-gradient-h);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: rainbow-text-shift 4s linear infinite;
}

.school-outfit-text {
  padding: 8px 18px 16px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-primary);
}

@media (max-width: 576px) {
  .school-outfit-text { font-size: 1rem; }
}

/* =========================================
   UNICORN WEATHER BUDDY
   ========================================= */
.unicorn-buddy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.unicorn-scene {
  flex-shrink: 0;
}
.unicorn-character {
  position: relative;
  font-size: 48px;
  line-height: 1;
  animation: unicorn-bounce 2s ease-in-out infinite;
}
.unicorn-accessory {
  position: absolute;
  font-size: 20px;
  top: -8px;
  right: -12px;
  animation: acc-pop 0.3s ease-out;
}
@keyframes unicorn-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes acc-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.unicorn-greeting {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  background: var(--rainbow-gradient-h);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: rainbow-text-shift 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .unicorn-character { animation: none !important; }
}

/* =========================================
   MOON PHASE WIDGET
   ========================================= */
.moon-phase-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#moon-emoji { font-size: 1.4rem; }
#moon-name { font-weight: 600; }

/* =========================================
   UV & AQI TILES
   ========================================= */
.tile-uv .summary-icon { color: #ffd93d; }
.tile-aqi .summary-icon { color: #6bcb77; }

/* =========================================
   GEOLOCATION BUTTON
   ========================================= */
.btn-outline-geo {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 12px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 250ms ease;
}
.btn-outline-geo:hover {
  background: rgba(192, 132, 252, 0.1);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(192, 132, 252, 0.2);
}
.btn-outline-geo:disabled {
  opacity: 0.6;
  transform: none;
}

.location-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.location-divider::before,
.location-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(192, 132, 252, 0.15);
}

/* =========================================
   FAVORITES
   ========================================= */
.favorites-section {
  text-align: center;
}
.favorites-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.favorites-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.fav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(192, 132, 252, 0.1);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 200ms ease;
}
.fav-pill:hover {
  background: rgba(192, 132, 252, 0.2);
  border-color: rgba(192, 132, 252, 0.4);
  transform: translateY(-1px);
}
.fav-label { cursor: pointer; }
.fav-remove {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 150ms;
}
.fav-remove:hover { opacity: 1; color: var(--temp-hot); }

/* =========================================
   SHARE BUTTON
   ========================================= */
.btn-outline-share {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 250ms ease;
}
.btn-outline-share:hover {
  background: linear-gradient(135deg, rgba(255,107,157,0.15), rgba(77,150,255,0.15));
  border-color: rgba(192, 132, 252, 0.4);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(192, 132, 252, 0.15);
}
.btn-outline-share::before {
  content: "\u2728 ";
}

/* =========================================
   TORNADO SPINNER (legacy, kept for compat)
   ========================================= */
.tornado-wrap { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.tornado-svg { display: block; filter: drop-shadow(0 4px 24px var(--twister-glow)); }
.twist { fill: none; stroke: var(--twister-color); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 48 18; animation: dash 1.8s linear infinite; }
.t0 { animation-duration: 1.2s; opacity: 0.95; }
.t1 { animation-duration: 1.25s; opacity: 0.92; }
.t2 { animation-duration: 1.3s; opacity: 0.90; }
.t3 { animation-duration: 1.35s; opacity: 0.88; }
.t4 { animation-duration: 1.4s; opacity: 0.86; }
.t5 { animation-duration: 1.45s; opacity: 0.84; }
.t6 { animation-duration: 1.5s; opacity: 0.82; }
.t7 { animation-duration: 1.6s; opacity: 0.78; }
.t8 { animation-duration: 1.7s; opacity: 0.74; }
.t9 { animation-duration: 1.8s; opacity: 0.7; }
.t10 { animation-duration: 1.9s; opacity: 0.66; }
.t11 { animation-duration: 2s; opacity: 0.6; }
.twister { transform-origin: 100px 110px; animation: spin var(--twister-rotate-duration) linear infinite; }
@keyframes dash { to { stroke-dashoffset: -66; } }
.debris .orbit { transform-origin: 100px 110px; animation: orbit 5s linear infinite; }
.debris-dot { fill: var(--twister-color); opacity: 0.9; }
.o1 { animation-duration: 4s; animation-delay: -0.2s; }
.o2 { animation-duration: 6s; animation-direction: reverse; opacity: 0.7; animation-delay: -0.8s; }
.o3 { animation-duration: 5.2s; opacity: 0.8; animation-delay: -1.2s; }
.o4 { animation-duration: 7s; animation-direction: reverse; opacity: 0.65; animation-delay: -0.4s; }
.o5 { animation-duration: 4.8s; opacity: 0.75; animation-delay: -1.6s; }
@media (prefers-reduced-motion: reduce) {
  .twist, .twister, .debris .orbit { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .tornado-svg { filter: none; }
}