/* s00-intro: the camera was always on. Ink, MARIFAT / JAMAL, a 2021 -> 2026 odometer in the gap,
   then the gap opens as a slit -> an oval (the SAT bubble) -> full-bleed onto the montage.
   The window is a clip-path over unaltered footage (a crop). Scoped under [data-scene="s00-intro"]. */

[data-scene="s00-intro"] { height: 0; background: transparent; }

[data-scene="s00-intro"] .i0 {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  contain: strict;
  cursor: progress;
}
[data-scene="s00-intro"] .i0.is-out { pointer-events: none; }
[data-scene="s00-intro"] .i0[hidden] { display: none; }

/* layers: accent twin (trails the window by a beat), the footage window, the type */
[data-scene="s00-intro"] .i0__accent,
[data-scene="s00-intro"] .i0__win {
  position: absolute;
  inset: 0;
  clip-path: ellipse(0px 0px at 50% 50%);
  will-change: clip-path;
}
[data-scene="s00-intro"] .i0__accent { background: var(--accent); }
[data-scene="s00-intro"] .i0__win { background: var(--ink); overflow: hidden; }
[data-scene="s00-intro"] .i0__vid,
[data-scene="s00-intro"] .i0__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% var(--i0-cy, 50%);
  will-change: transform;
}
[data-scene="s00-intro"] .i0__poster { opacity: 0; }
[data-scene="s00-intro"] .i0.use-poster .i0__poster { opacity: 1; }

/* type: one block, centred. Akt 900, tight. v16 r3: the gap reads "On camera since 2021": one true year,
   from content.facts.onCameraSince, risen and removed whole (no odometer). */
[data-scene="s00-intro"] .i0__type {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
[data-scene="s00-intro"] .i0__line {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: min(17vw, 29vh);
  line-height: .8;
  letter-spacing: -.035em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
/* masks for the rise; padded so nothing clips at rest */
[data-scene="s00-intro"] .i0__mask { display: block; overflow: clip; padding: .06em .04em .02em; margin: -.06em -.04em -.02em; }
[data-scene="s00-intro"] .i0__word { display: block; will-change: transform; }

/* the gap: label + odometer. r2: the years get equal billing, set at the name's own size (Akt 900, same
   cap height), so the block reads as three lines: MARIFAT / 2026 / JAMAL. The slit opens out of the digits. */
[data-scene="s00-intro"] .i0__gap {
  position: relative;
  /* v16 r3: equal side columns (the longer label sets both), so the year stays on the centre line the
     slit draws through */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .14em;
  margin: .06em 0;
  font-size: min(17vw, 29vh);
  line-height: 1;
  will-change: transform;
}
[data-scene="s00-intro"] .i0__label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: max(12px, .075em);
  letter-spacing: .12em;
  min-width: 7.5em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  line-height: 1.2;
  white-space: nowrap;
}
[data-scene="s00-intro"] .i0__gap > .i0__mask:first-child .i0__label { text-align: right; }
/* the label masks clip at the label's own box (the gap's em is the name size, so the shared mask padding
   would leave a 15 px window above the label) */
[data-scene="s00-intro"] .i0__gap > .i0__mask { padding: 0; margin: 0; }
[data-scene="s00-intro"] .i0__odo {
  display: flex;
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
[data-scene="s00-intro"] .i0__col { display: block; height: 1em; overflow: clip; padding: 0 .01em; }
[data-scene="s00-intro"] .i0__exit { display: block; will-change: transform; }
[data-scene="s00-intro"] .i0__yr { display: block; height: 1em; line-height: 1; white-space: nowrap; }

/* perf #1: while the intro holds its last frame for the hero, a thin progress hairline along the top edge
   (only on a slow link; a fast one never holds) */
[data-scene="s00-intro"] .i0__hold {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 2px;
  background: var(--on-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* skip: always reachable, >= 12px */
[data-scene="s00-intro"] .i0__skip {
  position: absolute;
  right: var(--gut);
  bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  min-height: 44px;
  padding: 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink);
  border: 1px solid var(--line-ink);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
}
[data-scene="s00-intro"] .i0__skip:hover { border-color: var(--on-ink); }
[data-scene="s00-intro"] .i0__skip:focus-visible { outline-color: var(--accent); }

@media (max-width: 767px) {
  [data-scene="s00-intro"] .i0__line { font-size: 21.5vw; }
  [data-scene="s00-intro"] .i0__gap { font-size: 21.5vw; gap: .1em; margin: .08em 0; }
  [data-scene="s00-intro"] .i0__label { font-size: 12px; letter-spacing: .08em; min-width: 0; line-height: 1.25; }
  /* phones: a set two-line label, "On camera" over "since" (each line nowrap: it never breaks by itself) */
  [data-scene="s00-intro"] .i0__label > span { display: block; }
}