/* =======================================================================
   Time Machine — 87 years of weather as a scrubbable cinematic timeline
   system-ai-x.com  ·  Liquid-Glass module, light/dark + reduced-motion safe
   Data: tinyblue.dev/api/weather.php (climate_stripes, extreme_day, day_detail, stats)
   ======================================================================= */

.tm {
  position: relative;
  padding: var(--section-y) var(--gutter);
  isolation: isolate;
  overflow: hidden;
}

/* Era backdrop — cross-fades hue with the scrubbed decade. Two stacked
   radial veils that interpolate via custom props the JS drives. */
.tm__veil {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at var(--tm-veil-x, 28%) 18%,
      color-mix(in oklab, var(--tm-era, var(--accent)) 26%, transparent), transparent 70%),
    radial-gradient(70% 90% at 80% 90%,
      color-mix(in oklab, var(--tm-era-2, var(--accent-2)) 18%, transparent), transparent 72%);
  opacity: .9;
  transition: background 1.1s var(--ease-in-out);
  will-change: background;
}
.tm__veil::after {
  /* film grain — only painted when motion is allowed */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity .5s var(--ease-out);
}
.tm.is-playing .tm__veil::after { opacity: .05; animation: tm-grain 0.6s steps(3) infinite; }

@keyframes tm-grain {
  0% { transform: translate(0,0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0,0); }
}

/* ---- header ---- */
.tm__head { max-width: var(--max); margin: 0 auto 38px; }
.tm__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim);
  padding: 6px 12px; border: 1px solid var(--hairline);
  border-radius: 999px; background: var(--surface-2);
}
.tm__kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 10px var(--accent-glow-2);
}
.tm__title {
  margin: 18px 0 0; font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.04; letter-spacing: -.025em; font-weight: 600;
}
.tm__title .muted { color: var(--fg-faint); }
.tm__lede {
  margin: 16px 0 0; max-width: 640px;
  font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.55; color: var(--fg-dim);
}
.tm__lede em { color: var(--accent-2); font-style: normal; }

/* ---- stage ---- */
.tm__stage {
  max-width: var(--max); margin: 0 auto;
  border: 1px solid var(--hairline-strong);
  border-radius: clamp(20px, 3vw, 30px);
  background: color-mix(in oklab, var(--surface-2) 86%, transparent);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  box-shadow:
    0 40px 110px -60px var(--accent-glow),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
}

/* readout strip — the big year + temperature, counts as you scrub */
.tm__readout {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 40px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) 14px;
  border-bottom: 1px solid var(--hairline);
}
.tm__year {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(44px, 8vw, 84px); line-height: .9;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px var(--accent-glow);
}
.tm__readstats { display: flex; flex-wrap: wrap; gap: 26px 34px; padding-bottom: 8px; }
.tm__rstat { display: flex; flex-direction: column; gap: 3px; }
.tm__rstat .v {
  font-family: var(--mono); font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.tm__rstat .v.warm { color: #ff9f6b; }
.tm__rstat .v.cool { color: var(--accent-2); }
.tm__rstat .l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint);
}
.tm__anom {
  margin-left: auto; padding-bottom: 6px; text-align: right;
}
.tm__anom .badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2); font-variant-numeric: tabular-nums;
}
.tm__anom .badge[data-sign="warm"] { color: #ff9f6b; border-color: rgba(255,159,107,.4); background: rgba(255,159,107,.10); }
.tm__anom .badge[data-sign="cool"] { color: var(--accent-2); border-color: var(--accent-glow-2); background: rgba(56,189,248,.10); }
.tm__anom .l {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint);
}

/* chart canvas well */
.tm__chartwrap {
  position: relative;
  height: clamp(240px, 38vh, 380px);
  padding: 8px clamp(12px, 2vw, 24px) 0;
}
.tm__canvas { display: block; width: 100%; height: 100%; }

/* record markers float over the chart */
.tm__markers { position: absolute; inset: 8px clamp(12px, 2vw, 24px) 0; pointer-events: none; }
.tm__marker {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--hairline-strong);
  background: color-mix(in oklab, var(--surface-2) 70%, var(--bg) 30%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 28px -16px var(--accent-glow);
  opacity: 0; transform: translate(-50%, -42%) scale(.86);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .2s var(--ease-out);
  z-index: 3;
}
.tm__marker.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tm__marker:hover, .tm__marker:focus-visible {
  border-color: var(--accent); outline: none;
  box-shadow: 0 14px 34px -14px var(--accent-glow);
}
.tm__marker .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.tm__marker[data-kind="hottest"] { color: #ff7a4d; } .tm__marker[data-kind="hottest"] .dot { background: #ff7a4d; }
.tm__marker[data-kind="coldest"] { color: #5fd0ff; } .tm__marker[data-kind="coldest"] .dot { background: #5fd0ff; }
.tm__marker[data-kind="wettest"] { color: #6ad6c5; } .tm__marker[data-kind="wettest"] .dot { background: #6ad6c5; }
.tm__marker[data-kind="windiest"]{ color: #c9b3ff; } .tm__marker[data-kind="windiest"] .dot { background: #c9b3ff; }

/* hover tooltip following pointer on the chart */
.tm__tip {
  position: absolute; z-index: 4; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 9px 12px; border-radius: 12px; white-space: nowrap;
  border: 1px solid var(--hairline-strong);
  background: color-mix(in oklab, var(--surface-2) 60%, var(--bg) 40%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 16px 40px -22px var(--accent-glow);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  opacity: 0; transition: opacity .14s var(--ease-out);
}
.tm__tip.in { opacity: 1; }
.tm__tip b { color: var(--fg); font-variant-numeric: tabular-nums; }
.tm__tip .ty { color: var(--accent-2); }

/* ---- scrubber rail ---- */
.tm__rail {
  position: relative;
  margin: 6px clamp(12px, 2vw, 24px) clamp(20px, 3vw, 30px);
  padding: 20px 6px 12px;
  user-select: none; touch-action: none;
}
.tm__track {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--accent-2) 0%,
    color-mix(in oklab, var(--accent-2) 50%, var(--accent) 50%) 45%,
    #ff9f6b 100%);
  opacity: .35;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.tm__progress {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px;
  width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), #ff9f6b);
  box-shadow: 0 0 14px var(--accent-glow);
}
.tm__ticks { position: absolute; left: 0; right: 0; top: 20px; height: 8px; }
.tm__tick {
  position: absolute; transform: translateX(-50%);
  top: 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; color: var(--fg-faint);
  transition: color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tm__tick::before {
  content: ""; position: absolute; left: 50%; top: -14px;
  width: 1px; height: 9px; transform: translateX(-50%);
  background: var(--hairline-strong);
}
.tm__tick.near { color: var(--accent-2); transform: translateX(-50%) translateY(-2px); }

.tm__thumb {
  position: absolute; top: 20px; left: 0;
  width: 26px; height: 26px; margin: -9px 0 0 0;
  transform: translateX(-50%);
  border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 32% 30%, #fff 0%, var(--accent) 55%, var(--accent) 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 10px 26px -8px var(--accent-glow), 0 0 24px var(--accent-glow);
  z-index: 5;
}
.tm__thumb:active { cursor: grabbing; }
.tm__thumb::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 0 8px rgba(255,255,255,.7);
}
.tm:not(.tm--reduced) .tm__thumb { transition: left .04s linear; }

/* ---- controls ---- */
.tm__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 0 clamp(12px, 2vw, 24px) clamp(20px, 3vw, 28px);
}
.tm__btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--accent-2)));
  box-shadow: 0 16px 36px -20px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
}
.tm__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tm__btn:active { transform: translateY(0); }
.tm__btn .ico { width: 14px; height: 14px; display: block; }
.tm__btn--ghost {
  color: var(--fg); background: var(--surface-2);
  border: 1px solid var(--hairline-strong); box-shadow: none;
}
.tm__btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.tm__speed { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.tm__speedbtn {
  font-family: var(--mono); font-size: 12px; color: var(--fg-faint);
  padding: 7px 12px; cursor: pointer; background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.tm__speedbtn[aria-pressed="true"] { color: var(--fg); background: var(--surface-2); border-color: var(--hairline-strong); }
.tm__speedbtn:hover { color: var(--fg); }

.tm__dice {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-dim);
}
.tm__dicebtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--fg); cursor: pointer;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out);
}
.tm__dicebtn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.tm__dicebtn[data-kind="hottest"]:hover { border-color: #ff7a4d; }
.tm__dicebtn[data-kind="coldest"]:hover { border-color: #5fd0ff; }

/* ---- day-detail glass sheet ---- */
.tm__sheet {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: stretch; justify-content: flex-end;
  pointer-events: none;
}
.tm__sheet-scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none;
}
.tm__sheet-panel {
  position: relative; width: min(460px, 90%); height: 100%;
  padding: clamp(22px, 3vw, 30px);
  border-left: 1px solid var(--hairline-strong);
  background: color-mix(in oklab, var(--surface-2) 92%, var(--bg) 8%);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: -40px 0 120px -50px #000;
  transform: translateX(102%);
  transition: transform .42s var(--ease-out);
  overflow-y: auto; pointer-events: auto;
}
.tm__sheet.in { pointer-events: auto; }
.tm__sheet.in .tm__sheet-scrim { opacity: 1; pointer-events: auto; }
.tm__sheet.in .tm__sheet-panel { transform: translateX(0); }
.tm__sheet-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer; color: var(--fg);
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.tm__sheet-close:hover { border-color: var(--accent); background: var(--accent-soft); }
.tm__sheet h3 {
  margin: 0 0 4px; font-size: 13px; font-family: var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2);
}
.tm__sheet .tm__sheet-date {
  font-family: var(--mono); font-size: clamp(22px, 3vw, 30px);
  font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.tm__sheet .tm__sheet-headline { color: var(--fg-dim); font-size: 14px; margin: 0 0 20px; }
.tm__sheet .tm__sheet-headline b { color: var(--fg); }
.tm__hourchart { width: 100%; height: 130px; display: block; margin: 6px 0 18px; }
.tm__sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm__sheet-cell {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.tm__sheet-cell .v {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tm__sheet-cell .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint); margin-top: 3px;
}

/* loading / error states */
.tm__state {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; gap: 12px;
  font-family: var(--mono); font-size: 13px; color: var(--fg-dim);
}
.tm__state .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--hairline-strong); border-top-color: var(--accent);
  animation: tm-spin .8s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
.tm.is-ready .tm__state { display: none; }
.tm:not(.is-ready) .tm__readout,
.tm:not(.is-ready) .tm__chartwrap,
.tm:not(.is-ready) .tm__rail,
.tm:not(.is-ready) .tm__controls { display: none; }

.tm__src {
  max-width: var(--max); margin: 18px auto 0; padding: 0 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--fg-faint); display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.tm__src a { color: var(--accent-2); }
.tm__src .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #57e08a; box-shadow: 0 0 8px #57e08a; margin-right: 5px;
  vertical-align: middle;
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .tm__readout { gap: 18px 24px; }
  .tm__readstats { gap: 16px 22px; }
  .tm__anom { margin-left: 0; text-align: left; width: 100%; }
  .tm__controls { gap: 9px; }
  .tm__speed { margin-left: 0; }
  .tm__sheet-panel { width: 100%; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tm__veil, .tm__marker, .tm__thumb, .tm__sheet-panel, .tm__progress { transition: none !important; }
  .tm__veil::after { display: none; }
  .tm.is-playing .tm__veil::after { animation: none; }
  .tm__btn:hover, .tm__dicebtn:hover, .tm__thumb { transform: none; }
}