/* AFC 13 — the intro (round 13): "De Portugal para o mundo" over the Madrid 2026 podium clip. A dark scope
   ([data-theme="dark"]), before the numbered sections. The clip barely seen-through (.9): on desktop a sharp centre
   column (it is a vertical film) over a blurred, dimmed copy of itself that fills the width, its edges feathered into
   it; on phones the clip fills the screen. A scrim keeps the line legible bottom-left. The words rise once the curtain
   opens (intro.js → .is-in); reduced motion: still poster, no rise.
   round 15 — the visor journey. The film sits in a sticky stage (.intro-stage), clipped by the helmet-visor shape
   the opening revealed it through (.intro-visor; intro.js writes the clip-path with AFC.visor). Leaving the intro the
   visor closes 1:1 with the scroll (--visor-close of scroll) down to a narrow band, the night already around it; the
   band holds while the car crosses it (--visor-cross: 01-cross is laid over this section's tail), then holds on
   (--visor-name) while it becomes the name: as the car's tail leaves, the band dissolves in place (--visor-fade of
   scroll) and the running name (01-name, laid over the same tail) arrives in that very shape, then the whole stage
   lets go and Competição follows. The first screen (.intro-first: the words, the cue) scrolls as usual over the
   stage; the title leaves through the camera ([data-exit], site.js). No JS or reduced motion: one screen, the film
   unclipped (the section keeps its old height and nothing is sticky in effect).
   3/11 (V1-2027) — the film plays by itself (the r2 scrub, 1:1 with the scroll, is gone): the podium's best 5 s as a
   muted clip on .intro-vid.intro-seq, its blurred copy on .intro-bg.intro-seq (desktop), started as the night opens,
   once, holding on the trophy aloft (intro.js). Each video is see-through (opacity 0, never visibility: Safari will
   not play a hidden video by itself) until its first frame runs, then covers its poster (the <img> right after it:
   the same box, the same fit, the same first frame), which then stops painting. The stage now holds before the visor
   closes only for the title's exit (--intro-film). Reduced motion: the poster alone (a single still frame). */

/* the journey's lengths and the band's size, shared with 01-cross (it sizes the car from --visor-h) and 01-name (the
   name is sized from --visor-h too, and its stage spans --visor-cross + --visor-name) */
:root {
  --intro-film: 50svh;                                        /* before the visor closes: the title's exit (data-exit-end .5) */
  --visor-close: 85svh;                                       /* scroll from the full screen to the band */
  --visor-cross: 80svh;                                       /* the band held while the car crosses it */
  --visor-name: 40svh;                                        /* the band held on after the car, while it becomes the name */
  --visor-fade: 30svh;                                        /* the band's dissolve into the name (from 92% of the crossing) */
  --visor-h: min(34svh, calc(min(58vw, 1000px) * .2942));     /* the band: the car (1800:413, min(58vw, 1000px) wide) is 78% of it */
  --visor-x: max(16px, 4vw);                                  /* the band's soft ends stay this far in from the sides */
}
/* phones: a taller band (~21% of the screen) and a car wider than it (01-cross: --visor-h × 3.4 ≈ 156vw): a close
   fly-by the visor frames, big wheels turning, never a miniature that does not fit the visor at once */
@media (max-width: 860px) { :root { --intro-film: 50svh; --visor-close: 75svh; --visor-cross: 70svh; --visor-h: min(28svh, 46vw); } }

.intro { position: relative; height: 100svh; overflow: clip; isolation: isolate; color: var(--ink); }
.intro[data-theme] { --ground-glow: none; }   /* plain night around the visor; Competição's glow fades in under its own top edge */
@media (prefers-reduced-motion: no-preference) {
  .js .intro { height: calc(100svh + var(--intro-film) + var(--visor-close) + var(--visor-cross) + var(--visor-name)); }
}
.intro-stage { position: sticky; top: 0; z-index: 0; height: 100svh; overflow: clip; }
.intro-visor { position: absolute; inset: 0; background: #05080a; }
.intro-media { position: absolute; inset: 0; z-index: 0; }
.intro-bg, .intro-vid { position: absolute; display: block; max-width: none; object-fit: cover; }
.intro-bg { inset: -4%; width: 108%; height: 108%; opacity: .6; z-index: 0; }
.intro-vid {
  left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: 9 / 16; translate: -50% 0; opacity: .9; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* the clips: one layer per role, video and poster alike (the fill under the column, always: a live fill never veils
   the column's poster). Each video is see-through until intro.js has seen its first frame run (.is-live); then its
   poster stops painting (desktop: under the feathered column its first frame would show at the edges). Opacity, not
   visibility: WebKit pauses a muted video that plays by itself while it is not visible */
.intro-seq:not(.is-live) { opacity: 0; }
.intro-seq.is-live + img { visibility: hidden; }
/* the scrim travels with the film inside the visor; its foot lands on solid --night */
.intro-visor::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(5 8 10 / .45) 0%, rgb(5 8 10 / 0) 26%, rgb(5 8 10 / 0) 52%, rgb(5 8 10 / .82) 86%, var(--night) 100%),
    radial-gradient(70% 60% at 0% 100%, rgb(5 8 10 / .55), rgb(5 8 10 / 0) 70%);
}
/* the visor's tint: as it closes, its ends darken like a tinted lens (the car comes out of that shade and goes
   back into it); intro.js writes its opacity with the close */
.intro-tint {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(5 8 10 / .72), rgb(5 8 10 / 0) 24%, rgb(5 8 10 / 0) 76%, rgb(5 8 10 / .72));
}
/* the band's box, never painted: intro.js and opening.js read its size (AFC.visor.band) */
.intro-band { position: absolute; left: var(--visor-x); right: var(--visor-x); top: 50%; height: var(--visor-h); translate: 0 -50%; visibility: hidden; pointer-events: none; }
/* scroll marks for intro.js, 01-cross.js and 01-name.js: the film has played and the visor starts to close; the band
   is reached (the car's run starts); the band starts to dissolve into the name (92% into the car's run, as its tail
   leaves the band); the car has crossed (its run ends; the band holds on, becoming the name); the band is gone (the
   name has arrived, --visor-fade after the dissolve began, still inside the hold: the dissolve never rides the scroll
   away). The stages let go --visor-name after the car has crossed, together, at the section's end */
.intro-mark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
.intro-mark.is-close { top: var(--intro-film); }
.intro-mark.is-band { top: calc(var(--intro-film) + var(--visor-close)); }
.intro-mark.is-fade { top: calc(var(--intro-film) + var(--visor-close) + var(--visor-cross) * .92); }
.intro-mark.is-crossed { top: calc(var(--intro-film) + var(--visor-close) + var(--visor-cross)); }
.intro-mark.is-gone { top: calc(var(--intro-film) + var(--visor-close) + var(--visor-cross) * .92 + var(--visor-fade)); }

/* the first screen: the words and the cue, scrolling over the stage */
.intro-first { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; }
.intro-first > * { pointer-events: auto; }
.intro-copy { position: absolute; z-index: 2; left: max(var(--edge, 24px), env(safe-area-inset-left, 0px)); bottom: clamp(48px, 9vh, 112px); max-width: min(64rem, 62vw); }
.intro-title {
  margin: 0; color: var(--ink); font-family: var(--display); font-stretch: 64%; font-weight: 840; text-transform: uppercase;
  font-size: clamp(3rem, .8rem + 6.4vw, 8.6rem); line-height: .86; letter-spacing: -.005em; text-wrap: balance;
}
.intro-l1 { display: block; }
.intro-title .t-accent { display: block; margin-top: .06em; text-transform: none; font-stretch: 100%; font-weight: 400; color: var(--apex); }
.intro-cue {
  position: absolute; z-index: 2; right: max(var(--edge, 24px), env(safe-area-inset-right, 0px)); bottom: clamp(48px, 9vh, 112px);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; color: var(--ink-2); text-decoration: none;
}
.intro-cue svg { width: 14px; height: 14px; }
.intro-cue:active { scale: .97; }
/* the rise, once the curtain is open */
.intro-title > span > *, .intro-cue { transition: opacity .6s ease, translate .8s cubic-bezier(.2, .7, .2, 1), scale var(--press-t, 100ms) ease-out; }
.intro-title .t-accent { transition-delay: .09s; }
.intro-cue { transition-delay: .3s, .3s, 0s; }
.js .intro:not(.is-in) .intro-title > span > *, .js .intro:not(.is-in) .intro-cue { opacity: 0; translate: 0 28px; }
/* desktop: the line holds its two lines whatever the width ("De Portugal" / "para o mundo." never wrap again) */
@media (min-width: 861px) { .intro-l1, .intro-title .t-accent { white-space: nowrap; } }
@media (max-width: 860px) {
  .intro-bg { display: none; }
  .intro-vid { inset: 0; left: 0; width: 100%; height: 100%; translate: none; -webkit-mask-image: none; mask-image: none; opacity: .92; }
  .intro-copy { left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); max-width: none; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  .intro-title { font-size: min(16vw, 4.6rem); }
  .intro-cue { display: none; }   /* the capsule sits there; the scroll is obvious on a phone */
  /* a full-screen film behind the words: a deeper floor under them */
  .intro-visor::after { background: linear-gradient(180deg, rgb(5 8 10 / .4) 0%, rgb(5 8 10 / 0) 22%, rgb(5 8 10 / 0) 46%, rgb(5 8 10 / .72) 70%, rgb(5 8 10 / .9) 88%, var(--night) 100%); }
}
/* the narrowest phones: "para o mundo." stays on one line */
@media (max-width: 374px) { .intro-title { font-size: 15.2vw; } }
@media (prefers-reduced-motion: reduce) {
  .intro-seq { display: none; }   /* a single still frame: the poster */
  .intro-title > span > *, .intro-cue { transition: none; }
  .js .intro:not(.is-in) .intro-title > span > *, .js .intro:not(.is-in) .intro-cue { opacity: 1; translate: none; }
}
@media (prefers-contrast: more) { .intro-visor::after { background: linear-gradient(180deg, rgb(5 8 10 / .55) 86%, var(--night) 100%); } }