/* Home — "see it run": the video playlist, its chapter rail, and the gooey
   selection capsule that slides between them.

   The capsule's box is measured and set by main.js, so most of what you see on
   screen is not decided here. */

/* ── See it run ─────────────────────────────────────────────────
   Still capped short of the text column's full width — the extra width over the
   old single-column band is the control rail, not a bigger video. */


/* Recording and controls side by side: the list of what you are about to watch
   stays readable while it plays, and the column of rows gives the selection
   somewhere to travel. The rail is its own card so the pair reads as one device. */
.see__stage {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(226px, 25%, 286px);
  gap: clamp(12px, 1.5vw, 20px); align-items: stretch;
}
.see__stage > .frame { align-self: start; }
/* Sized to its five rows and centred against the recording: a control panel
   beside a screen, rather than a column of air with five labels floating in it. */
.see__rail {
  position: relative; display: flex; flex-direction: column; align-self: center; padding: 8px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
/* The five clips as chapter marks. The running one carries a ring that fills off
   --p, which the player sets on timeupdate, so the row that is playing is also
   the read-out of how far through it is. */
.see__steps { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; }
/* Side by side the labels wrap to different depths, and a capsule that only
   covered its own two lines next to a neighbour's three would look mis-set. The
   buttons fill their row instead, so every capsule is the same box. */
.see__steps li { display: flex; }
.see__step {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  /* Room on the right for the progress ring, whether or not this row owns it —
     otherwise the labels would reflow every time the running step changed. */
  padding: 15px 42px 15px 18px; border: 0; border-radius: 999px;
  background: none; text-align: left; color: var(--ink-50);
  font-size: 13.5px; line-height: 1.3; transition: color .22s ease-out;
}
.see__step b { font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .06em; }
/* The clip's progress, as a ring at the right end of the capsule — the place a
   row of text leaves free, and the only mark in the panel that moves on its own.
   A conic gradient sweeps the accent round; the mask punches out the middle, so
   the ring is transparent inside and sits on the capsule rather than on a disc
   of its own. It belongs to the running step, so it fades in with the capsule
   and is never drawn on the other four. */
.see__step::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 17px; height: 17px; margin-top: -9px;
  border-radius: 50%; opacity: 0; transition: opacity .28s ease-out .12s;
  background: conic-gradient(var(--blue-deep) calc(var(--p, 0) * 1turn), rgba(25, 27, 30, .17) 0);
  -webkit-mask: radial-gradient(closest-side, #0000 57%, #000 58%);
  mask: radial-gradient(closest-side, #0000 57%, #000 58%);
}
.see__step.is-on::after { opacity: 1; }
.see__step.is-on { color: var(--ink); }
.see__step:hover { color: var(--ink); }

/* ── The molecule ───────────────────────────────────────────────
   The selection is a capsule and it stays a capsule: no wobble, no blob shape.
   What is liquid is the way it MOVES. Two bodies carry it — the capsule itself,
   and a circle of the same height parked dead centre inside it, invisible while
   nothing moves because it is the same fill. On a change the capsule leaves
   first and the circle follows a beat behind, which gives the goo filter two
   separating shapes to fuse: the capsule pulls a neck back to the circle, the
   neck thins, then the circle catches up and is swallowed again. --sx/--sy add
   the squash across the direction of travel, released as the capsule lands.

   Neutral fill, no accent: the blue in this section belongs to the progress line
   inside the capsule, and a coloured capsule would compete with it. */
/* The filter lives in the stage so its comment sits beside the effect; out of
   flow so it claims no grid cell. Not display:none — a filter referenced out of
   a hidden subtree resolves inconsistently. */
.see__filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.see__goo { position: absolute; inset: 8px; pointer-events: none; filter: url(#seeGoo); }
.see__blob, .see__drop {
  position: absolute; top: 0; left: 0; display: block;
  background: #F0EEEA; border-radius: 999px; will-change: translate, scale;
}
.see__blob {
  width: var(--w, 0px); height: var(--h, 0px);
  translate: var(--x, 0px) var(--y, 0px); scale: var(--sx, 1) var(--sy, 1);
  transition: translate .5s cubic-bezier(.22, .92, .3, 1), scale .3s cubic-bezier(.32, 1.2, .5, 1),
              width .4s ease-out, height .4s ease-out;
}
/* A circle the height of the capsule, so the neck it pulls has no corners to
   give the trick away. Same curve and duration as the capsule, offset only by
   --lag — which main.js sets per jump, because the gap between the two is the
   lag times the speed, and the speed goes up with the distance. A fixed lag
   would hold across one row and tear open across four, leaving a bare dot
   parked on a step nothing is happening on. */
.see__drop {
  width: var(--h, 0px); height: var(--h, 0px);
  translate: calc(var(--x, 0px) + (var(--w, 0px) - var(--h, 0px)) / 2) var(--y, 0px);
  transition: translate .5s cubic-bezier(.22, .92, .3, 1) var(--lag, 60ms);
}
/* Reduced motion keeps the selection but drops the travel: the capsule appears
   on the new row, and nothing stretches. */
@media (prefers-reduced-motion: reduce) {
  .see__blob, .see__drop { transition: none; }
}
/* The last row of the panel. Negative margins pull the rule out to the card's own
   edges so it divides the panel rather than floating inside the padding. */
.see__more { margin: 8px -8px -8px; padding: 8px; border-top: 1px solid var(--line); }

/* ── Breakpoints ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Beside the recording the rail needs about 226px, and taking that out of a
     tablet's width leaves the video too small to read a slide in. So the rail
     goes under the frame — still one column of rows, because five of them side
     by side wrap "Send it where you post" onto three lines and drag every
     capsule down to match. The capsule is placed from measured boxes, so the
     move costs it nothing. */
  .see__stage { grid-template-columns: 1fr; }
  .see__stage > .frame { align-self: stretch; }
  .see__rail { align-self: stretch; }
}