/* Scene 1, the back seat. Shot A: the mountain road, pushing in on the car.
   A foreground pine wipes past the camera and hides the cut to shot B: the
   car's side profile, which carries on the push-in and opens into a cut-away.
   Base styles are the poster frame: shot B with the cut-away open. */
.scene--1 {
  --pin: 340vh;
}

.scene--1 > .stage {
  --scene-bg: #0a0d27;
}

/* Its own layer: painted with the page while the scroll timeline repaints it,
   Chrome dropped the near layers and unclipped the beam on some frames. */
.s1-art {
  will-change: transform;
}

.s1-copy {
  max-width: 29rem;
}

/* Keeps the lede clear of the car's tail in the held frame. */
.s1-copy .lede {
  max-width: 26rem;
}

.s1-a,
.s1-wipe,
.s1-blush,
.s1-cue,
.s1-voice {
  opacity: 0;
}

.s1-glass {
  opacity: 0.22;
}

.s1-door {
  clip-path: inset(0 0 0 100%);
}

.s1-sky {
  transform-box: view-box;
  transform-origin: 1020px 618px;
}

.s1-acar,
.s1-acone {
  transform: translate(1020px, 618px);
}

.s1-bead {
  transform: rotate(43deg);
}

.s1-dose {
  stroke-dashoffset: 0.35;
}

.s1-wipestage {
  transform-box: view-box;
  transform-origin: 800px 0;
}

/* gen:begin staging (written by site/scenes-src/s1/gen.py: road path, zoom registration, layout staging) */
.s1-a1,
.s1-a2,
.s1-a3,
.s1-a4,
.s1-a5 {
  transform-box: view-box;
  transform-origin: 1020px 618px;
}

.s1-bzoom {
  transform-box: view-box;
  transform-origin: 1016.3px 529.8px;
}

@media (max-aspect-ratio: 4/5) {
  .s1-astage {
    transform: translate(-187.1px, 25.5px) scale(1.2);
  }

  .s1-bstage {
    transform: translate(-55.2px, 172.7px) scale(0.7887);
  }
}

@media (min-aspect-ratio: 801/1000) and (max-aspect-ratio: 3/2) {
  .s1-bstage {
    transform: translate(275.5px, 193.2px) scale(0.7408);
  }
}

@keyframes s1-drive {
  0% {
    transform: translate(832.5px, 544.6px) rotate(24deg);
  }

  10% {
    transform: translate(850.5px, 553.3px) rotate(27.3deg);
  }

  20% {
    transform: translate(869px, 563.2px) rotate(28.7deg);
  }

  30% {
    transform: translate(886.5px, 572.9px) rotate(29.1deg);
  }

  40% {
    transform: translate(904px, 582.5px) rotate(28.5deg);
  }

  50% {
    transform: translate(922.6px, 592.3px) rotate(26.5deg);
  }

  60% {
    transform: translate(940.7px, 600.7px) rotate(23.2deg);
  }

  70% {
    transform: translate(959.4px, 607.9px) rotate(18.6deg);
  }

  80% {
    transform: translate(978.6px, 613.3px) rotate(13deg);
  }

  90% {
    transform: translate(999.3px, 616.9px) rotate(6.3deg);
  }

  100% {
    transform: translate(1020px, 618px) rotate(0deg);
  }
}

@keyframes s1-voice {
  0%,
  6% {
    opacity: 0;
  }
  7.5%,
  13.5% {
    opacity: 1;
  }
  15%,
  100% {
    opacity: 0;
  }
}

@keyframes s1-a1 {
  0% {
    transform: scale(1.046);
  }

  6% {
    transform: scale(1.05);
  }

  12% {
    transform: scale(1.057);
  }

  18% {
    transform: scale(1.066);
  }

  24% {
    transform: scale(1.076);
  }

  30% {
    transform: scale(1.088);
  }

  35% {
    transform: scale(1.098);
  }

  38% {
    transform: scale(1.104);
  }

  39.6% {
    transform: scale(1.108);
  }

  100% {
    transform: scale(1.108);
  }
}

@keyframes s1-a2 {
  0% {
    transform: scale(1.094);
  }

  6% {
    transform: scale(1.103);
  }

  12% {
    transform: scale(1.118);
  }

  18% {
    transform: scale(1.136);
  }

  24% {
    transform: scale(1.158);
  }

  30% {
    transform: scale(1.183);
  }

  35% {
    transform: scale(1.205);
  }

  38% {
    transform: scale(1.22);
  }

  39.6% {
    transform: scale(1.227);
  }

  100% {
    transform: scale(1.227);
  }
}

@keyframes s1-a3 {
  0% {
    transform: scale(1.75);
  }

  6% {
    transform: scale(1.842);
  }

  12% {
    transform: scale(2.004);
  }

  18% {
    transform: scale(2.223);
  }

  24% {
    transform: scale(2.503);
  }

  30% {
    transform: scale(2.854);
  }

  35% {
    transform: scale(3.21);
  }

  38% {
    transform: scale(3.457);
  }

  39.6% {
    transform: scale(3.6);
  }

  100% {
    transform: scale(3.6);
  }
}

@keyframes s1-a4 {
  0% {
    transform: scale(1.872);
  }

  6% {
    transform: scale(1.982);
  }

  12% {
    transform: scale(2.178);
  }

  18% {
    transform: scale(2.446);
  }

  24% {
    transform: scale(2.794);
  }

  30% {
    transform: scale(3.236);
  }

  35% {
    transform: scale(3.693);
  }

  38% {
    transform: scale(4.012);
  }

  39.6% {
    transform: scale(4.198);
  }

  100% {
    transform: scale(4.198);
  }
}

@keyframes s1-a5 {
  0% {
    transform: scale(2.013);
  }

  6% {
    transform: scale(2.146);
  }

  12% {
    transform: scale(2.385);
  }

  18% {
    transform: scale(2.714);
  }

  24% {
    transform: scale(3.148);
  }

  30% {
    transform: scale(3.709);
  }

  35% {
    transform: scale(4.297);
  }

  38% {
    transform: scale(4.714);
  }

  39.6% {
    transform: scale(4.959);
  }

  100% {
    transform: scale(4.959);
  }
}

@keyframes s1-bzoom {
  0% {
    transform: scale(0.279);
  }

  66% {
    transform: scale(0.279);
  }

  70% {
    transform: scale(0.379);
  }

  75% {
    transform: scale(0.522);
  }

  80% {
    transform: scale(0.672);
  }

  86.7% {
    transform: scale(0.85);
  }

  93.3% {
    transform: scale(0.965);
  }

  100% {
    transform: scale(1);
  }
}
/* gen:end staging */

/* 4:3-ish landscape: a narrower copy column so the car's tail clears it. */
@media (min-aspect-ratio: 801/1000) and (max-aspect-ratio: 3/2) {
  .s1-copy,
  .s1-copy .lede {
    max-width: 24rem;
  }
}

/* Scroll cue: a labelled thin line with a travelling dot. */
.s1-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 3vh, 1.75rem);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.s1-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 2.25rem;
  overflow: hidden;
  background: linear-gradient(rgb(244 239 230 / 0%), rgb(244 239 230 / 40%));
}

.s1-cue-dot {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-hi);
}

.s1-cue-label {
  font: 600 0.625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-aspect-ratio: 4/5) {
  .s1-scrim {
    display: none;
  }

  .s1-copy .lede {
    max-width: none;
  }

  .s1-wipestage {
    transform: scaleX(0.75);
  }

  .s1-railmask {
    mask: none;
  }

  /* The held car sits low in the art: keep its wheels out of the shell's fade. */
  .s1-art {
    mask-image: linear-gradient(#000 94%, transparent);
  }

  /* Phone: beside the art's faded lower edge, clear of the copy. */
  .s1-cue {
    left: auto;
    right: 1.25rem;
    bottom: auto;
    top: calc(68% - 4.25rem);
    translate: none;
  }
}

/* Narrow phones: the pine's leading edge has to cross a ~610-unit window. */
@media (max-aspect-ratio: 3/5) {
  .s1-wipestage {
    transform: scaleX(0.42);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
  @supports (animation-timeline: view()) {
    .s1-sky,
    .s1-a,
    .s1-a1,
    .s1-a2,
    .s1-a3,
    .s1-a4,
    .s1-a5,
    .s1-acar,
    .s1-acone,
    .s1-wipe,
    .s1-b,
    .s1-bzoom,
    .s1-glass,
    .s1-door,
    .s1-rim,
    .s1-arc,
    .s1-sick,
    .s1-blush,
    .s1-bead,
    .s1-dose,
    .s1-bdrift1,
    .s1-bdrift2,
    .s1-bdrift3,
    .s1-refl,
    .s1-spin,
    .s1-copy,
    .s1-beat1,
    .s1-beat2,
    .s1-cue,
    .s1-voice {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --s1;
      animation-range: contain 0% contain 100%;
    }

    .s1-sky {
      animation-name: s1-sky;
    }

    .s1-a {
      animation-name: s1-a;
    }

    .s1-a1 {
      animation-name: s1-a1;
    }

    .s1-a2 {
      animation-name: s1-a2;
    }

    .s1-a3 {
      animation-name: s1-a3;
    }

    .s1-a4 {
      animation-name: s1-a4;
    }

    .s1-a5 {
      animation-name: s1-a5;
    }

    .s1-acar,
    .s1-acone {
      animation-name: s1-drive;
      animation-range: contain 0% contain 34%; /* gen:drive-range */
    }

    .s1-wipe {
      animation-name: s1-wipe;
    }

    .s1-b {
      animation-name: s1-b;
    }

    .s1-bzoom {
      animation-name: s1-bzoom;
      animation-range: contain 0% contain 60%; /* gen:bzoom-range */
    }

    .s1-glass {
      animation-name: s1-glass;
    }

    .s1-door {
      animation-name: s1-door;
    }

    .s1-rim {
      animation-name: s1-rim;
    }

    .s1-arc {
      animation-name: s1-arc;
    }

    .s1-sick {
      animation-name: s1-sick;
    }

    .s1-blush {
      animation-name: s1-blush;
    }

    .s1-bead {
      animation-name: s1-bead;
    }

    .s1-dose {
      animation-name: s1-dose;
    }

    .s1-bdrift1 {
      animation-name: s1-drift1;
    }

    .s1-bdrift2 {
      animation-name: s1-drift2;
    }

    .s1-bdrift3 {
      animation-name: s1-drift3;
    }

    .s1-refl {
      animation-name: s1-refl;
    }

    .s1-spin {
      animation-name: s1-spin;
    }

    .s1-copy {
      animation-name: s1-copy;
    }

    .s1-beat1 {
      animation-name: s1-beat1;
    }

    .s1-beat2 {
      animation-name: s1-beat2;
    }

    .s1-cue {
      animation-name: s1-cue;
      animation-range: contain 0% contain 10%;
    }

    /* The boy's line plays in shot A; the still's bubble is for the stills only. */
    .s1-voice {
      animation-name: s1-voice;
    }

    .s1-voice-still {
      opacity: 0;
    }

    .s1-cue-dot {
      animation: s1-cue-dot 2.4s var(--ease) infinite;
    }

    .s1-tw0 {
      animation: s1-twinkle 5s ease-in-out infinite alternate;
    }

    .s1-tw2 {
      animation: s1-twinkle 7s ease-in-out -3s infinite alternate;
    }
  }
}

@keyframes s1-sky {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1.06) translateX(-12px);
  }
}

/* The swap sits under the wipe, which covers the whole frame around 39.6%. */
@keyframes s1-a {
  0%,
  39.4% {
    opacity: 1;
  }

  39.8%,
  100% {
    opacity: 0;
  }
}

@keyframes s1-b {
  0%,
  39.4% {
    opacity: 0;
  }

  39.8%,
  100% {
    opacity: 1;
  }
}

@keyframes s1-wipe {
  0%,
  35.8% {
    opacity: 1;
    transform: translateX(2300px);
  }

  43.8% {
    opacity: 1;
    transform: translateX(-2500px);
  }

  43.9%,
  100% {
    opacity: 0;
    transform: translateX(-2500px);
  }
}

@keyframes s1-glass {
  0%,
  46% {
    opacity: 0.7;
  }

  52%,
  100% {
    opacity: 0.22;
  }
}

@keyframes s1-door {
  0%,
  48% {
    clip-path: inset(0 0 0 0);
  }

  55%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes s1-rim {
  0%,
  48% {
    opacity: 0;
  }

  52%,
  100% {
    opacity: 1;
  }
}

@keyframes s1-arc {
  0%,
  54% {
    clip-path: inset(0 100% 0 0);
  }

  61%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* Neutral through the approach; he pales, then greens, while the bend arc draws
   and the gauge fills (52–64 %). Shot A's small-car child stays neutral. */
@keyframes s1-sick {
  0%,
  52% {
    opacity: 0;
  }

  58% {
    opacity: 0.4;
  }

  64%,
  100% {
    opacity: 1;
  }
}

@keyframes s1-blush {
  0%,
  52% {
    opacity: 1;
  }

  58%,
  100% {
    opacity: 0;
  }
}

/* The gauge fills and its bead climbs as the back seat starts to feel it. */
@keyframes s1-bead {
  0%,
  50% {
    transform: rotate(-101deg);
  }

  62%,
  100% {
    transform: rotate(43deg);
  }
}

@keyframes s1-dose {
  0%,
  50% {
    stroke-dashoffset: 0.85;
  }

  62%,
  100% {
    stroke-dashoffset: 0.35;
  }
}

@keyframes s1-drift1 {
  0%,
  40% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50px);
  }
}

@keyframes s1-drift2 {
  0%,
  40% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-260px);
  }
}

@keyframes s1-drift3 {
  0%,
  40% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-480px);
  }
}

@keyframes s1-refl {
  0%,
  40% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-300px);
  }
}

/* Turns while a shot's car drives: s1-drive (to 34%), then the B shot from its cut (40%).
   Under 0.4 of a spoke period per wheel notch, or the spokes strobe. The total is a
   multiple of 72deg, so the five spokes land where scene 2's start. */
@keyframes s1-spin {
  0% {
    transform: rotate(0deg);
  }

  34%,
  40% {
    transform: rotate(216deg);
  }

  100% {
    transform: rotate(576deg);
  }
}

/* Clears the slot before scene 2's copy fades in (its stage shows from ~79%). */
@keyframes s1-copy {
  0%,
  66% {
    opacity: 1;
  }

  74%,
  100% {
    opacity: 0;
  }
}

@keyframes s1-beat1 {
  0%,
  46% {
    opacity: 1;
    transform: translateY(0);
  }

  49%,
  100% {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes s1-beat2 {
  0%,
  49% {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  54%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s1-cue {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes s1-cue-dot {
  0% {
    translate: 0 -5px;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    translate: 0 2.25rem;
    opacity: 0;
  }
}

@keyframes s1-twinkle {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}