/* SECTION: hero */
.hero {
  padding-block: clamp(32px, 4.5vw, 56px) var(--section-gap);
}

/* ---------- head: centered title, authors, links ---------- */
.hero__head {
  text-align: center;
}

/* the venue, with the Sydney Opera House beside it */
.hero__venue {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 1em 0.3em 0.75em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 1.72vw, 1.55rem);
  font-weight: 800;
  line-height: 1.3;
}

.hero__venue-icon {
  flex: none;
  width: calc(1.6em * 64 / 42);
  height: 1.6em;
}

.hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-head);
}

.hero__q {
  display: block;
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.hero__sub {
  display: block;
  max-width: 26em;
  margin: 0.45em auto 0;
  font-size: var(--fs-subtitle);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.hero__authors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--space-5);
  font-size: var(--fs-authors);
  font-weight: 600;
}

/* a name or an affiliation never breaks away from its marker */
.hero__authors span,
.hero__affil-line span {
  white-space: nowrap;
}

.hero__affil {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--ink-2);
  font-size: calc(var(--fs-small) * 1.15);
  line-height: 1.6;
}

.hero__affil-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-5);
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.hero__links .btn {
  padding: 0.55em 1.25em;
  font-size: 1.22rem;
}

/* TL;DR: the one thing to read on the first screen */
.hero__tldr {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  background: var(--accent-pastel);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.hero__tldr b {
  font-weight: 800;
}

.hero__tldr-tag {
  margin-right: 0.3em;
  padding: 2px 12px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-head);
  font-size: 0.75em;
}

.hero__scene {
  margin-top: var(--space-5);
}

/* a label over the reel (or its phone video): what it is, and how long.
   Hidden with the static diagram, which is not a 26-second piece. */
.hero__watch {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em 0.6em;
  width: 100%;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
}

/* "Click to start", small, in a yellow pill with the play button */
.hero__start {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.25em 0.9em 0.25em 0.3em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.68em;
  transition: background-color var(--dur-ui), color var(--dur-ui);
}


.hero__start-tap {
  display: none;
}

/* touch screens tap */
@media (hover: none) and (pointer: coarse) {
  .hero__start-click {
    display: none;
  }

  .hero__start-tap {
    display: inline;
  }
}

.hero__scene.has-reel .hero__watch {
  display: flex;
}

.hero__play {
  position: relative;
  flex: none;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--on-accent);
}

.hero__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  border-top: 0.36em solid transparent;
  border-bottom: 0.36em solid transparent;
  border-left: 0.56em solid var(--accent);
  transform: translate(-50%, -50%);
}

/* hover only where there is a pointer: on a phone it would stick after the tap */
@media (hover: hover) {
  .hero__watch:hover .hero__start {
    background: var(--ink);
    color: #fff;
  }

  .hero__watch:hover .hero__play {
    background: var(--accent);
  }

  .hero__watch:hover .hero__play::before {
    border-left-color: var(--on-accent);
  }
}

/* the caption is about the reel: it is shown only with the reel or its video */
.hero__cap {
  display: none;
  max-width: none;
  text-align: center;
}

.reel.is-ready ~ .hero__cap {
  display: block;
}

/* ---------- scene: Figure 1(a) as one diagram: video -> Video-LLM -> answers ---------- */
.scene {
  padding: var(--space-6);
  border-radius: 24px;
  background: var(--stage);
}

.scene__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.scene__flow {
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.scene__input,
.scene__model {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.scene__label {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* the input video: a square frame, like the dataset clips, stepping through 8 frames */
.scene__video {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fffdf5;
}

.scene__ball,
.scene__dot {
  position: absolute;
  top: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-50%, -50%);
}

/* where the object is in each of the 8 frames */
.scene__dot {
  width: 3.4%;
  opacity: 0.5;
}

.scene__ball {
  left: 12%;
  width: 14%;
  animation: scene-move var(--dur-loop) linear infinite;
}

.scene__bar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene__play {
  flex: none;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--ink);
}

.scene__progress {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}

.scene__progress span {
  display: block;
  width: 12.5%;
  height: 100%;
  background: var(--ink);
  animation: scene-progress var(--dur-loop) linear infinite;
}

.scene__arrow {
  width: 48px;
  height: 24px;
  color: var(--ink);
}

.scene__bot {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.scene__bot svg {
  width: 50px;
  height: 50px;
}

.scene__qa {
  display: grid;
  gap: var(--space-5);
}

.qa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.qa__q {
  padding: 10px 18px;
  border-radius: 14px;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
}

.qa--color .qa__q {
  background: var(--blue-soft);
}

.qa--dir .qa__q {
  background: var(--red-soft);
}

/* the model's answer: dark text on white; the outline and mark say right or wrong */
.qa__reply {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 5px 8px 5px 18px;
  border: 3px solid;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 800;
  white-space: nowrap;
}

.qa--color .qa__reply {
  border-color: var(--green);
  animation: scene-say-1 var(--dur-loop) linear infinite;
}

.qa--dir .qa__reply {
  border-color: var(--red);
  animation: scene-say-2 var(--dur-loop) linear infinite;
}

.qa__way {
  color: var(--red);
}

.qa__mark {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  color: #fff;
  font-size: 0.78em;
}

.qa--color .qa__mark {
  background: var(--green);
}

.qa--dir .qa__mark {
  background: var(--red);
}

.scene.is-paused * {
  animation-play-state: paused;
}

/* the object steps through 8 frames, then each answer gives a small pulse */
@keyframes scene-move {
  0% { left: 12%; opacity: 0; }
  4% { left: 12%; opacity: 1; animation-timing-function: steps(7, end); }
  46% { left: 88%; }
  95% { left: 88%; opacity: 1; }
  100% { left: 88%; opacity: 0; }
}

@keyframes scene-progress {
  0% { width: 12.5%; }
  4% { width: 12.5%; animation-timing-function: steps(7, end); }
  46%, 100% { width: 100%; }
}

@keyframes scene-say-1 {
  0%, 48% { transform: scale(1); }
  52% { transform: scale(1.1); }
  56%, 100% { transform: scale(1); }
}

@keyframes scene-say-2 {
  0%, 60% { transform: scale(1); }
  64% { transform: scale(1.1); }
  68%, 100% { transform: scale(1); }
}

/* the title stays on one line wherever it fits */
@media (min-width: 900px) {
  .hero__q {
    white-space: nowrap;
  }
}

@media (max-width: 1099px) {
  .scene__flow {
    grid-template-columns: repeat(3, auto);
  }

  .scene__flow .scene__arrow:last-of-type {
    display: none;
  }

  .scene__qa {
    grid-column: 1 / -1;
    justify-items: center;
  }

  .qa {
    justify-content: center;
  }
}

@media (max-width: 599px) {
  .scene {
    padding: var(--space-5);
  }

  .scene__flow {
    gap: var(--space-3);
  }

  .scene__video {
    width: 150px;
  }

  .scene__arrow {
    width: 30px;
  }

  .scene__bot {
    width: 60px;
    height: 60px;
  }

  .scene__bot svg {
    width: 36px;
    height: 36px;
  }

  .scene__input .scene__label {
    white-space: normal;
    text-align: center;
  }

  .hero {
    padding-top: var(--space-5);
  }

  .hero__title {
    margin: var(--space-3) 0 var(--space-4);
  }

  .hero__venue {
    font-size: 1.15rem;
  }

  .hero__links .btn {
    padding: 0.5em 1.1em;
    font-size: 1.15rem;
  }

  .hero__tldr {
    margin-top: var(--space-5);
    padding: var(--space-4);
    font-size: 1.0625rem;
    text-align: left;
  }
}

/* static end state */
@media (prefers-reduced-motion: reduce) {
  .hero__start {
    transition: none;
  }

  .scene__ball {
    left: 88%;
    animation: none;
  }

  .scene__progress span {
    width: 100%;
    animation: none;
  }

  .qa--color .qa__reply,
  .qa--dir .qa__reply {
    animation: none;
  }
}

/* ---------- reel: the teaser as a short motion piece ----------
   reel.js steps through the scenes and sets data-scene on the stage. CSS
   shows each scene's parts and runs its animations. Sizes are in cqw, so
   the stage scales like a video. Without the script, on small screens and
   under reduced motion, the static diagram below is shown instead. */
.reel {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  display: none;
}

.reel.is-ready {
  display: block;
}

.reel.is-ready ~ .scene {
  display: none;
}

.reel__stage {
  position: relative;
  aspect-ratio: 1280 / 500;
  overflow: hidden;
  border-radius: 24px;
  background: var(--stage);
  container-type: inline-size;
}

/* the reel in a frame: an ink border and an offset yellow shadow, so it stands out */
.reel__stage,
.hero__video {
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--accent);
}

.reel.is-paused .reel__stage * {
  animation-play-state: paused;
}

.reel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: calc(var(--space-3) + 10px);
}

.reel__controls .btn {
  padding: 0.35em 1em;
  font-size: 1rem;
}

/* one button per scene: shows where the reel is, and jumps there */
.reel__scenes {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
}

.reel__scenes button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.reel__scenes span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bar-base);
}

.reel__scenes button:hover span {
  background: var(--ink-2);
}

.reel__scenes .is-on span {
  background: var(--ink);
}

.reel__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.4cqw;
}

.reel__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow);
}

/* captions: one line per scene, top left */
.reel__cap {
  position: absolute;
  top: 3.4cqw;
  left: 4cqw;
  max-width: 90cqw;
  font-family: var(--font-head);
  font-size: 2.6cqw;
  font-weight: 700;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(1cqw);
  transition: opacity 0.3s, transform 0.5s var(--ease);
}

.reel__cap.is-on {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

/* acts: groups of parts that stay on stage across neighbouring scenes */
.reel__act {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s 0.35s;
}

.reel__stage:is([data-scene="1"], [data-scene="2"], [data-scene="3"]) .reel__act--a,
.reel__stage[data-scene="4"] .reel__act--b,
.reel__stage[data-scene="5"] .reel__act--why,
.reel__stage:is([data-scene="6"], [data-scene="7"], [data-scene="8"]) .reel__act--c,
.reel__stage[data-scene="9"] .reel__act--d {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s, visibility 0s;
}

/* ----- act A: the example ----- */
.reel__video {
  position: absolute;
  top: 57%;
  left: 50%;
  width: 22cqw;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.24cqw solid var(--ink);
  border-radius: 1.6cqw;
  background: #fffdf5;
  transform: translate(-50%, -50%);
  transition: transform 0.7s var(--ease);
}

.reel__stage:is([data-scene="2"], [data-scene="3"]) .reel__video {
  transform: translate(calc(-50% - 31cqw), -50%) scale(0.8);
}

.reel__ball,
.reel__dot {
  position: absolute;
  top: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-50%, -50%);
}

.reel__dot {
  width: 3.4%;
  opacity: 0.5;
}

.reel__ball {
  left: 12%;
  width: 14%;
}

/* 8 frames in scene 1; the same clip replays in scene 3 */
.reel__stage[data-scene="1"] .reel__ball {
  animation: reel-step 1.6s steps(7, end) 0.5s both;
}

.reel__stage[data-scene="2"] .reel__ball {
  left: 88%;
}

.reel__stage[data-scene="3"] .reel__ball {
  animation: reel-step 1.6s steps(7, end) 0.9s both;
}

.reel__bar {
  position: absolute;
  right: 6%;
  bottom: 6%;
  left: 6%;
  display: flex;
  align-items: center;
  gap: 4%;
}

.reel__play {
  flex: none;
  width: 0;
  height: 0;
  border-top: 0.5cqw solid transparent;
  border-bottom: 0.5cqw solid transparent;
  border-left: 0.8cqw solid var(--ink);
}

.reel__time {
  flex: 1;
  height: 0.6cqw;
  overflow: hidden;
  border-radius: 0.3cqw;
  background: var(--line);
}

.reel__time span {
  display: block;
  width: 12.5%;
  height: 100%;
  background: var(--ink);
}

.reel__stage[data-scene="1"] .reel__time span {
  animation: reel-time 1.6s steps(7, end) 0.5s both;
}

.reel__stage[data-scene="2"] .reel__time span {
  width: 100%;
}

.reel__stage[data-scene="3"] .reel__time span {
  animation: reel-time 1.6s steps(7, end) 0.9s both;
}

/* the true direction, drawn while the clip replays */
.reel__truth,
.reel__truth-tip {
  position: absolute;
  top: 61%;
  height: 7%;
  color: var(--ink-2);
}

.reel__truth {
  left: 12%;
  width: 76%;
  clip-path: inset(0 100% 0 0);
}

.reel__truth-tip {
  left: 85%;
  width: 5.5%;
  opacity: 0;
}

.reel__stage[data-scene="3"] .reel__truth {
  animation: reel-draw 1.6s linear 0.9s both;
}

.reel__stage[data-scene="3"] .reel__truth-tip {
  animation: reel-fade 0.2s linear 2.4s both;
}

.reel__link {
  position: absolute;
  top: 57%;
  left: 32cqw;
  width: 4.6cqw;
  margin-top: -1.15cqw;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s;
}

.reel__model {
  position: absolute;
  top: 57%;
  left: 43.5cqw;
  display: grid;
  justify-items: center;
  gap: 0.8cqw;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.3s, transform 0.5s var(--ease);
}

.reel__stage:is([data-scene="2"], [data-scene="3"]) .reel__link {
  opacity: 1;
  transition-delay: 0.35s;
}

.reel__stage:is([data-scene="2"], [data-scene="3"]) .reel__model {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.4s;
}

.reel__bot {
  display: grid;
  place-items: center;
  width: 8.6cqw;
  height: 8.6cqw;
  border: 0.24cqw solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.reel__bot svg {
  width: 5cqw;
  height: 5cqw;
}

.reel__name {
  font-size: 2.2cqw;
  font-weight: 700;
  white-space: nowrap;
}

.reel__talk {
  position: absolute;
  top: 57%;
  left: 52cqw;
  display: grid;
  justify-items: start;
  gap: 1.3cqw;
  transform: translateY(-50%);
}

.reel__q {
  padding: 0.9cqw 1.6cqw;
  border-radius: 1.2cqw;
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
}

.reel__talk--color .reel__q {
  background: var(--blue-soft);
}

.reel__talk--dir .reel__q {
  background: var(--red-soft);
}

.reel__a {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.5cqw 0.7cqw 0.5cqw 1.9cqw;
  border: 0.26cqw solid;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 2.8cqw;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
}

.reel__a i {
  color: var(--red);
  font-style: normal;
}

.reel__mark {
  display: grid;
  place-items: center;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  color: #fff;
  font-size: 1.9cqw;
}

.reel__talk--color .reel__a {
  border-color: var(--green);
}

.reel__talk--color .reel__mark {
  background: var(--green);
}

.reel__talk--dir .reel__a {
  border-color: var(--red);
}

.reel__talk--dir .reel__mark {
  background: var(--red);
}

.reel__stage[data-scene="2"] .reel__talk--color .reel__q {
  animation: reel-slide 0.5s var(--ease) 0.7s both;
}

.reel__stage[data-scene="2"] .reel__talk--color .reel__a {
  animation: reel-pop 0.45s var(--ease) 1.3s both;
}

.reel__stage[data-scene="3"] .reel__talk--dir .reel__q {
  animation: reel-slide 0.5s var(--ease) 0.2s both;
}

/* the wrong answer lands after the clip ends, then shakes once */
.reel__stage[data-scene="3"] .reel__talk--dir .reel__a {
  animation: reel-pop 0.45s var(--ease) 2.7s both, reel-shake 0.45s linear 3.15s;
}

/* ----- act B: the name, then the question ----- */
.reel__title {
  position: absolute;
  top: 54%;
  right: 0;
  left: 0;
  font-family: var(--font-head);
  font-size: 6.4cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  transform: translateY(-50%);
}

.reel__title span {
  display: block;
  opacity: 0;
}

.reel__stage[data-scene="4"] .reel__title span {
  animation: reel-rise 0.6s var(--ease) 0.15s both;
}

.reel__stage[data-scene="4"] .reel__title span:last-child {
  animation-delay: 0.32s;
}

.reel__stat {
  position: absolute;
  top: 80%;
  right: 0;
  left: 0;
  color: var(--ink-2);
  font-size: 2.1cqw;
  font-weight: 500;
  text-align: center;
  opacity: 0;
}

.reel__stage[data-scene="4"] .reel__stat {
  animation: reel-fade 0.5s ease 1.1s both;
}

.reel__why {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13cqw;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.reel__stage[data-scene="5"] .reel__why {
  animation: reel-zoom 0.7s var(--ease) both;
}

/* ----- act C: where the direction is lost, and the fix ----- */
.reel__wire {
  position: absolute;
  top: 52%;
  margin-top: -0.12cqw;
  border-top: 0.24cqw solid var(--ink);
}

.reel__wire--1 {
  left: 20cqw;
  width: 8.5cqw;
}

.reel__wire--2 {
  left: 44.5cqw;
  width: 8.5cqw;
}

.reel__wire--gap {
  left: 69cqw;
  width: 9cqw;
  border-top: 0.3cqw dashed var(--red);
}

.reel__stage[data-scene="8"] .reel__wire--gap {
  animation: reel-mend 0.01s linear 2.2s both;
}

.reel__gap {
  position: absolute;
  top: 52%;
  left: 73.5cqw;
  margin-top: -7.8cqw;
  padding: 0.35cqw 1.3cqw;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 1.8cqw;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
}

.reel__stage[data-scene="7"] .reel__gap {
  animation: reel-fade 0.4s ease 0.9s both;
}

.reel__stage[data-scene="8"] .reel__gap {
  animation: reel-out 0.3s ease 2.1s both;
}

/* the signal passes behind each module and comes out on the other side */
.reel__sig {
  position: absolute;
  top: 52%;
  left: 12cqw;
  width: 2.6cqw;
  height: 2.6cqw;
  margin: -1.3cqw 0 0 -1.3cqw;
  border: 0.24cqw solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  opacity: 0;
}

.reel__stage[data-scene="6"] .reel__sig {
  animation: reel-sig-a 2.6s linear 0.3s both;
}

.reel__stage[data-scene="7"] .reel__sig {
  animation: reel-sig-b 1s ease 0.2s both;
}

.reel__stage[data-scene="8"] .reel__sig {
  animation: reel-sig-c 2.2s linear 0.6s both;
}

.reel__node {
  position: absolute;
  z-index: 1;
  top: 52%;
  display: grid;
  place-items: center;
  width: 16cqw;
  height: 6.6cqw;
  margin-top: -3.3cqw;
  border: 0.24cqw solid var(--ink);
  border-radius: 1.3cqw;
  background: #fff;
  font-size: 1.9cqw;
  font-weight: 700;
  white-space: nowrap;
}

.reel__node--1 { left: 4cqw; }
.reel__node--2 { left: 28.5cqw; }
.reel__node--3 { left: 53cqw; }
.reel__node--4 { left: 78cqw; }

.reel__delta {
  position: absolute;
  top: -2cqw;
  right: -2cqw;
  display: grid;
  place-items: center;
  width: 4cqw;
  height: 4cqw;
  border: 0.24cqw solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  font-size: 2.2cqw;
  font-weight: 800;
  opacity: 0;
}

.reel__stage[data-scene="8"] .reel__delta {
  animation: reel-pop 0.45s var(--ease) 0.2s both;
}

/* accuracy at each stage, shown as the signal leaves it */
.reel__probe {
  position: absolute;
  top: 52%;
  margin-top: 4.7cqw;
  padding: 0.3cqw 1.5cqw;
  border: 0.26cqw solid var(--blue);
  border-radius: 999px;
  background: #fff;
  font-size: 2.4cqw;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  transform: translateX(-50%);
}

.reel__probe--1 { left: 12cqw; }
.reel__probe--2 { left: 36.5cqw; }
.reel__probe--3 { left: 61cqw; }

.reel__probe--bad,
.reel__probe--good {
  left: 86cqw;
}

.reel__probe--bad {
  border-color: var(--red);
}

.reel__probe--good {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.reel__stage[data-scene="6"] .reel__probe--1 { animation: reel-chip 0.4s var(--ease) 0.9s both; }
.reel__stage[data-scene="6"] .reel__probe--2 { animation: reel-chip 0.4s var(--ease) 1.8s both; }
.reel__stage[data-scene="6"] .reel__probe--3 { animation: reel-chip 0.4s var(--ease) 2.6s both; }

.reel__stage:is([data-scene="7"], [data-scene="8"]) .reel__probe:not(.reel__probe--bad):not(.reel__probe--good) {
  opacity: 1;
}

.reel__stage[data-scene="7"] .reel__probe--bad {
  animation: reel-chip 0.4s var(--ease) 1.4s both;
}

.reel__stage[data-scene="8"] .reel__probe--bad {
  animation: reel-out 0.3s ease 2.3s both;
}

.reel__stage[data-scene="8"] .reel__probe--good {
  animation: reel-chip 0.4s var(--ease) 2.7s both;
}

.reel__note {
  position: absolute;
  bottom: 3.4cqw;
  left: 4cqw;
  color: var(--ink-2);
  font-size: 1.6cqw;
}

/* ----- act D: the result ----- */
.reel__metric {
  position: absolute;
  top: 58%;
  right: 6cqw;
  left: 6cqw;
  display: grid;
  grid-template-columns: 31cqw minmax(0, 1fr);
  align-items: center;
  gap: 5cqw;
  transform: translateY(-50%);
}

.reel__num {
  font-family: var(--font-head);
  font-size: 8.4cqw;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.reel__who {
  position: relative;
  height: 3cqw;
  margin-top: 1cqw;
  font-size: 2cqw;
  font-weight: 700;
  white-space: nowrap;
}

.reel__who span {
  position: absolute;
  top: 0;
  left: 0;
}

.reel__who-ours {
  opacity: 0;
}

.reel__stage[data-scene="9"] .reel__who-base {
  animation: reel-out 0.3s ease 0.7s both;
}

.reel__stage[data-scene="9"] .reel__who-ours {
  animation: reel-fade 0.4s ease 0.9s both;
}

.reel__track {
  position: relative;
  height: 3.4cqw;
  border-radius: 0.7cqw;
  background: var(--line);
}

.reel__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25.9%;
  border-radius: 0.7cqw;
}

.reel__fill--base {
  background: var(--ink-2);
}

.reel__fill--ours {
  background: var(--yellow);
}

.reel__stage[data-scene="9"] .reel__fill--ours {
  animation: reel-grow 1.2s var(--ease) 0.7s both;
}

.reel__chance {
  position: absolute;
  top: -1.2cqw;
  bottom: -1.2cqw;
  left: 25%;
  border-left: 0.22cqw dashed var(--red);
}

.reel__chance b {
  position: absolute;
  bottom: 100%;
  left: -0.2cqw;
  padding-bottom: 0.3cqw;
  color: var(--red);
  font-size: 1.9cqw;
  font-weight: 700;
  white-space: nowrap;
}

.reel__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6cqw;
  color: var(--ink-2);
  font-size: 1.9cqw;
}

/* ----- keyframes ----- */
@keyframes reel-step {
  from { left: 12%; }
  to { left: 88%; }
}

@keyframes reel-time {
  from { width: 12.5%; }
  to { width: 100%; }
}

@keyframes reel-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes reel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reel-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes reel-slide {
  from { opacity: 0; transform: translateX(2cqw); }
  to { opacity: 1; transform: none; }
}

@keyframes reel-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* like reel-pop, for parts that are centered with translateX(-50%) */
@keyframes reel-chip {
  from { opacity: 0; transform: translateX(-50%) scale(0.7); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes reel-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-0.6cqw); }
  50% { transform: translateX(0.6cqw); }
  75% { transform: translateX(-0.4cqw); }
}

@keyframes reel-rise {
  from { opacity: 0; transform: translateY(2.4cqw); }
  to { opacity: 1; transform: none; }
}

@keyframes reel-zoom {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes reel-mend {
  to { border-top: 0.24cqw solid var(--ink); }
}

@keyframes reel-grow {
  from { width: 25.9%; }
  to { width: 85.9%; }
}

/* through the encoder, the projector and the LLM, pausing after each */
@keyframes reel-sig-a {
  0% { left: 12cqw; opacity: 1; }
  22%, 30% { left: 24.25cqw; opacity: 1; }
  55%, 63% { left: 48.75cqw; opacity: 1; }
  90%, 100% { left: 71cqw; opacity: 1; }
}

/* then it fades in the gap before the answer */
@keyframes reel-sig-b {
  from { left: 71cqw; opacity: 1; }
  to { left: 75cqw; opacity: 0; }
}

/* a stronger signal from the projector on, all the way to the answer */
@keyframes reel-sig-c {
  0% { left: 36.5cqw; opacity: 1; transform: scale(1.5); }
  35%, 42% { left: 48.75cqw; opacity: 1; transform: scale(1.5); }
  80% { left: 73.5cqw; opacity: 1; transform: scale(1.5); }
  100% { left: 86cqw; opacity: 1; transform: scale(1.5); }
}

/* phones: the reel as a 4:5 video (videos.js plays it), in place of the static diagram */
.hero__video {
  display: none;
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--stage);
}

@media (max-width: 759px), (prefers-reduced-motion: reduce) {
  .reel,
  .reel.is-ready {
    display: none;
  }

  .reel.is-ready ~ .scene {
    display: block;
  }

  .reel.is-ready ~ .hero__cap {
    display: none;
  }
}

@media (max-width: 759px) {
  .hero__video {
    display: block;
  }

  .hero__watch {
    display: flex;
  }

  .reel__stage,
  .hero__video {
    border-width: 2px;
    box-shadow: 6px 6px 0 var(--accent);
  }

  .hero__cap {
    margin-top: var(--space-4);
  }

  .scene,
  .reel.is-ready ~ .scene {
    display: none;
  }

  .hero__cap,
  .reel.is-ready ~ .hero__cap {
    display: block;
  }
}