/* ═══════════════════════════════════════════════════════════════════════════
   SwimReel — a natatorium, not a dashboard.

   The page is the bleached deck of an indoor pool: pale, flat, slightly green
   under the lights. The only dark objects on it are the clips themselves, and
   the only accent is the orange of a timing scoreboard.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --deck:      #E6ECEA;   /* wet concrete deck — page */
  --deck-sunk: #DBE4E2;   /* recessed panel */
  --surface:   #FBFDFC;   /* bleached white — cards */
  --ink:       #0C1A19;   /* pool shadow — text */
  --ink-soft:  #566865;   /* secondary text */
  --lane:      #A9BAB7;   /* lane rope grey — hairlines */
  --flare:     #E2580A;   /* scoreboard LED — the one accent */
  --water:     #BFDCD8;   /* the lane itself */
  --water-lo:  #A8CDC8;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(.22, .68, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deck);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .38vw + .92rem, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--gut); }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--flare); outline-offset: 3px; }

/* ── Shared type ─────────────────────────────────────────────────────────── */

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 1.4rem;
}

.lede {
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0;
}

.lede b { color: var(--ink); font-weight: 600; }

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: 1.5rem var(--gut);
  border-bottom: 1px solid var(--lane);
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.masthead-meet {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-soft);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(3.5rem, 9vw, 7rem); }

.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.4rem, 7.4vw, 5.75rem);
  line-height: .93;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin: 0 0 2rem;
  max-width: 15ch;
}

.hero-title span { display: block; }
.hero-title .flare { color: var(--flare); }

/* The claim on the left, the thing it is claiming about on the right. */
.hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 316px);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.source { display: flex; flex-direction: column; }

.source-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}

.source-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.source-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 26, 25, .26);
  transition: background .2s var(--ease);
}

.source-thumb:hover .source-play { background: rgba(12, 26, 25, .1); }

.source-play > span {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: transform .2s var(--ease);
}

.source-play > span::after {
  content: '';
  border-left: 12px solid var(--ink);
  border-block: 7px solid transparent;
  margin-left: 3px;
}

.source-thumb:hover .source-play > span { transform: scale(1.08); }

.source-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.source-meta { padding-top: .8rem; }

.source-label {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 .45rem;
}

.source-title { margin: 0; font-size: .875rem; line-height: 1.35; }

.source-spec {
  margin: .45rem 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--ink-soft);
}

.cta {
  display: inline-block;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: .95rem 1.6rem;
  background: var(--ink);
  color: var(--deck);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.cta:hover { background: var(--flare); transform: translateY(-2px); }

/* ── The lane: every scored candidate across 3h26m ───────────────────────── */

.broadcast { margin: 0; }

.broadcast-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .7rem;
}

.broadcast-count b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lane { display: grid; gap: 5px; }

/* A lane rope seen from above: alternating discs on a line. */
.rope {
  height: 7px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg,
    var(--lane) 0 9px, var(--surface) 9px 18px);
  opacity: .85;
}

.lane-track {
  position: relative;
  height: clamp(88px, 13vw, 132px);
  background: linear-gradient(180deg, var(--water), var(--water-lo));
  overflow: hidden;
}

/* one scored window */
.tick {
  position: absolute;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #6E8D89;
  opacity: .5;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease);
}

.tick.is-in { transform: scaleY(1); }

.tick.is-pick {
  width: 3px;
  margin-left: -1.5px;
  background: var(--flare);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(230, 236, 234, .55);
  z-index: 1;
}

.tick.is-pick::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--flare);
}

.broadcast figcaption {
  margin-top: .9rem;
  max-width: 52ch;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.pass { padding: clamp(4.5rem, 11vw, 8.5rem) 0 0; }

.pass-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); }

.pass-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

/* ── Detection ───────────────────────────────────────────────────────────── */

.detect {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: stretch;
}

.detail {
  background: linear-gradient(180deg, var(--water), var(--water-lo));
  padding: 1.1rem 1.25rem .5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: auto;
  padding-bottom: 1.25rem;
}

.detail-head .mono { color: #46605C; }

/* Three panels with a broken axis between them — the picks are hours apart,
   so a single continuous axis would squash them into one pixel column.
   Peaks and candidates share one scale everywhere: 165px = a score of 1.00. */
.detail-panels { display: flex; align-items: flex-end; }

/* --w is the share of the total scored span this panel covers. */
.panel { min-width: 0; display: flex; flex-direction: column; flex: var(--w) 1 0; }

.panel-track { position: relative; height: 200px; }

.panel-axis {
  position: relative;
  height: 1.7rem;
  border-top: 1px solid rgba(12, 26, 25, .28);
}

.panel-range {
  font-family: var(--mono);
  font-size: .625rem;
  color: #46605C;
  white-space: nowrap;
  margin-top: .35rem;
  position: relative;
  z-index: 0;
  /* Pin to the start edge of narrow panels so the label doesn't bleed into
     the gap before the next panel's break marker. */
  left: 0;
  right: auto;
  overflow: visible;
}

/* Pin range labels to the start edge of each panel so they don't bleed
   into the next panel's territory. A small right padding keeps consecutive
   labels from kissing in the narrow right-side panels. */
.detail-panels > .panel .panel-range {
  text-align: left;
  padding-right: .5rem;
}

.brk { flex: 0 0 32px; display: flex; flex-direction: column; }
.brk-pad { height: 200px; }

.brk-mark {
  height: 1.7rem;
  display: grid;
  place-items: start center;
  font-family: var(--mono);
  font-size: .8125rem;
  color: #7E9A96;
  line-height: 1;
  padding-top: 0;
}


.threshold {
  position: absolute;
  left: 0; right: 0;
  bottom: 132px;
  border-top: 1px dashed rgba(12, 26, 25, .45);
}

/* Sits below the line, since every kept peak labels itself above it. The chip
   keeps it legible when a stem runs behind it on narrow screens. */
.threshold span {
  position: absolute;
  left: 0;
  top: .3rem;
  padding: .1rem .4rem .1rem 0;
  background: linear-gradient(90deg, #B4D4CF 82%, rgba(180, 212, 207, 0));
  font-family: var(--mono);
  font-size: .6875rem;
  color: #33504C;
}

/* Spans the full track height so the stem's percentage height resolves
   against the track rather than against its own content. */
.peak {
  position: absolute;
  top: 0; bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.peak-stem {
  width: 3px;
  background: var(--flare);
  height: 0;
  transition: height .5s var(--ease);
}

.peak.is-in .peak-stem { height: var(--h); }

.peak-dot {
  flex: none;
  width: 11px; height: 11px;
  margin: 0 0 -5.5px;
  border-radius: 50%;
  background: var(--flare);
  transform: scale(0);
  transition: transform .35s var(--ease) .35s;
}

.peak.is-in .peak-dot { transform: scale(1); }

.peak-score {
  position: absolute;
  bottom: calc(var(--h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--flare);
  opacity: 0;
  transition: opacity .3s var(--ease) .5s;
  white-space: nowrap;
}

.peak.is-in .peak-score { opacity: 1; }

.axis-tc {
  position: absolute;
  top: .5rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--flare);
  opacity: 0;
  transition: opacity .3s var(--ease);
  white-space: nowrap;
}

.axis-tc.is-in { opacity: 1; }

.log {
  margin: 0;
  padding: 1.35rem 1.4rem;
  background: var(--ink);
  color: #C8D6D3;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 15.5rem;
}

.log-line { display: block; opacity: 0; animation: logIn .28s var(--ease) forwards; }
.log-line.is-peak { color: #FF8A45; }
.log-line.is-done { color: var(--surface); }
.log-line::before { content: '› '; color: #5E7A76; }

@keyframes logIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ── Clip cards ──────────────────────────────────────────────────────────── */

.reel {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--lane);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--lane);
}

.card-tc { font-family: var(--mono); font-size: .8125rem; color: var(--ink); font-weight: 500; }
.card-score { font-family: var(--mono); font-size: .8125rem; color: var(--flare); font-weight: 500; }

.card-title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.3125rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  /* Two lines' worth, so the clips line up across a row whether the title
     wraps or not. */
  min-height: 2.9rem;
}

.card-event { margin: -.55rem 0 0; font-size: .8125rem; color: var(--ink-soft); }

/* the clip itself — the only dark object on the deck */
.stage {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  overflow: hidden;
}

.stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: rgba(12, 26, 25, .28);
  cursor: pointer;
  transition: opacity .25s var(--ease);
}

.stage-play span {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
}

.stage-play span::after {
  content: '';
  border-left: 15px solid var(--ink);
  border-block: 9px solid transparent;
  margin-left: 4px;
}

.stage.is-playing .stage-play { opacity: 0; pointer-events: none; }

.stage-sound {
  position: absolute;
  right: .5rem; bottom: .5rem;
  border: 0;
  padding: .3rem .55rem;
  background: rgba(12, 26, 25, .62);
  color: var(--surface);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  cursor: pointer;
}

/* fake render overlay */
.stage.is-rendering .stage-play,
.stage.is-rendering .stage-sound { opacity: 0; pointer-events: none; }

.render {
  position: absolute;
  inset: 0;
  background: rgba(12, 26, 25, .96);
  display: grid;
  align-content: center;
  gap: .8rem;
  padding: 1.5rem;
  color: var(--surface);
}

.render[hidden] { display: none; }

.render-step { font-family: var(--mono); font-size: .6875rem; line-height: 1.7; color: #A9C0BC; }
.render-step.is-now { color: var(--surface); }
.render-step.is-now::before { content: '› '; color: var(--flare); }
.render-step.is-past::before { content: '✓ '; color: var(--flare); }
.render-step.is-next { opacity: .4; }

.render-bar { height: 3px; background: rgba(251, 253, 252, .2); }
.render-bar i { display: block; height: 100%; width: 0; background: var(--flare); transition: width .45s linear; }

/* variant switch */
.switch { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--lane); }

.switch button {
  border: 0;
  border-right: 1px solid var(--lane);
  padding: .6rem .3rem;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.switch button:last-child { border-right: 0; }
.switch button:hover { background: var(--deck-sunk); color: var(--ink); }
.switch button[aria-selected="true"] { background: var(--ink); color: var(--surface); }

/* what the model read */
.read { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; }

.read dt {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--flare);
  padding-top: .12rem;
}

.read dd { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-soft); }

.note {
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--lane);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  min-height: 3.6rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  margin-top: clamp(4.5rem, 10vw, 8rem);
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--lane);
}

.footer p { margin: 0; max-width: 62ch; font-size: .8125rem; color: var(--ink-soft); }
.footer-src a { color: var(--ink-soft); }

/* ── Reveal ──────────────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); }

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .hero-meta { grid-template-columns: 1fr; }
  .source { max-width: 420px; }
  .detect { grid-template-columns: 1fr; }
  .log { min-height: 0; }

  /* Three panels side by side leave no room for their timecodes, so stack
     them. Each gets the full width and the axis break is redundant. */
  .detail-panels { flex-direction: column; align-items: stretch; }
  .panel { flex: none; margin-bottom: 1.4rem; }
  .panel:last-child { margin-bottom: 0; }
  .panel-track { height: 150px; }
  .brk { display: none; }
  .panel-range { margin-top: .55rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tick { transform: scaleY(1); }
}