/* The opening, "Broadcast". intro.js renders the 3D picture into one canvas; this file styles the
   broadcast graphics over it: the bug (with the host's emblem), the sport's title, the tracked callout, the partners' billboard,
   the cold open's title, the closing lockup and the controls. Text moves with
   transforms, clip paths and opacity. It shows only when js.js has set html.intro-open. */

html.intro-open { overflow: hidden; }
.intro { touch-action: none; }
.intro { display: none; }
html.intro-open .intro {
  --ink: #f4f1ea; --ink-2: rgba(244, 241, 234, 0.66); --gold: #d8b45a; --red: #e2513a;
  display: block; position: fixed; inset: 0; z-index: 10000; overflow: hidden; background: #020305; color: var(--ink);
  font-family: var(--font-body); -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none;
}
.intro.is-leaving { pointer-events: none; }
.intro__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.intro.is-live .intro__gl { opacity: 1; }
/* the grade: a soft vignette and fine film grain over the picture */
.intro__grade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 34%), radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%); }
.intro__grade::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay; }

.intro__safe { position: absolute; z-index: 4; inset: 0; pointer-events: none; }

/* loading: one ball, drawn in points of gold by loader.js, turning from one sport's ball into the next inside a
   fine ring that fills with the real progress, a spark of light at its head. The ball's glass and the ring are
   drawn here so they show from the first paint, before any script (intro.js sets --p, 0 to 1); once loader.js's
   canvas is drawing it draws the ring's arc itself, and this one steps aside. */
.intro__load { position: absolute; z-index: 7; inset: 0; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 50% 46%, rgba(216, 180, 90, 0.07), rgba(0, 0, 0, 0) 70%), #030406;
  transition: opacity 800ms ease, visibility 0s linear 800ms; }
.intro.is-loaded .intro__load { opacity: 0; visibility: hidden; }
.intro__load-kicker { position: absolute; top: max(26px, env(safe-area-inset-top)); left: 0; right: 0; margin: 0; text-align: center; font: 500 0.875rem/1 var(--font-body); color: var(--ink-2); }
.intro__load-kicker b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
/* on a phone the line sits under the Skip button rather than behind it */
@media (max-width: 36rem) { .intro__load-kicker { top: calc(max(14px, env(safe-area-inset-top)) + 58px); } }
.intro__load-stage { --r: clamp(58px, min(19vw, 15vh), 112px); display: grid; justify-items: center; margin-top: -2vh; }
/* the orbit is 2.7 ball-radii across: the ball in the middle, the ring at 1.3 radii (loader.js reads its width) */
.intro__load-orbit { position: relative; width: calc(var(--r) * 2.7); aspect-ratio: 1; transition: scale 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro.is-loaded .intro__load-orbit { scale: 1.08; }
.intro__load-glass { position: absolute; inset: 12.96%; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, rgba(255, 236, 190, 0.11), rgba(216, 180, 90, 0.03) 40%, rgba(0, 0, 0, 0) 66%), radial-gradient(circle, rgba(0, 0, 0, 0) 64%, rgba(247, 217, 138, 0.07) 100%);
  box-shadow: 0 0 70px rgba(216, 180, 90, 0.06), inset 0 0 0 1px rgba(247, 217, 138, 0.05); }
.intro__load-balls { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; }
.intro__load-balls.is-on ~ .intro__load-ring .intro__load-arc, .intro__load-balls.is-on ~ .intro__load-head { visibility: hidden; }
.intro__load-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__load-track { fill: none; stroke: rgba(244, 241, 234, 0.09); stroke-width: 1; }
.intro__load-arc { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0.02)); transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 4px rgba(247, 217, 138, 0.55)); }
.intro__load-head { position: absolute; inset: 0; rotate: calc(var(--p, 0.02) * 1turn); pointer-events: none; }
.intro__load-head::after { content: ""; position: absolute; left: 50%; top: 2%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 6px 1px rgba(247, 217, 138, 0.9), 0 0 18px 4px rgba(226, 179, 76, 0.35); }
/* the ball's names, stacked; loader.js fades each in halfway through the change to its ball */
.intro__load-sport { display: grid; margin: calc(var(--r) * 0.3) 0 0; padding-left: 0.34em; font: 800 0.75rem/1 var(--font-display); font-stretch: 125%; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.intro__load-sport span { grid-area: 1 / 1; justify-self: center; opacity: 0; }
.intro__load-sport span:first-child { opacity: 1; }
.intro__load-foot { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 0.7em; font: 500 0.9375rem/1 var(--font-body); color: var(--ink-2); }
.intro__load-pct { min-width: 2.6em; font: 800 0.9375rem/1 var(--font-display); font-stretch: 80%; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.intro__load-pct::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 0.7em 0.2em 0; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.intro__load-pct span { font-size: 0.7em; color: var(--gold); margin-left: 1px; }
/* full: the ring closes and the ball flares once before the screen lifts */
.intro.is-full .intro__load-orbit { animation: intro-full 700ms ease-out both; }
@keyframes intro-full { 30% { filter: brightness(1.5) drop-shadow(0 0 24px rgba(255, 220, 140, 0.45)); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .intro.is-full .intro__load-orbit { animation: none; } }

/* The type, as a sports title designer sets it, all upright: Anybody is the voice, heavy and wide for the sports'
   names and the callout's word, at its normal width for the narration; Schibsted Grotesk in sentence case carries
   the facts, small and untracked. No chapter numbers: the picture carries the order. Everything sits inside the picture, clear of the letterbox (--bar: the bars'
   height, which intro.js draws at 10.5% of the frame, 5% on a portrait screen). */
.intro { --bar: 10.5%; --edge: max(22px, 5vw); }
@media (max-aspect-ratio: 999/1000) { .intro { --bar: 5%; --edge: 20px; } }

/* the bug, in the top bar */
.intro__bug { position: absolute; left: var(--edge); top: max(20px, env(safe-area-inset-top)); display: flex; align-items: baseline; gap: 10px; margin: 0; font: 600 0.8125rem/1 var(--font-body); color: var(--ink); opacity: 0; }
/* the host's emblem in the corner, as a broadcaster's mark */
.intro__bug-seal { align-self: center; flex: none; width: 24px; height: 24px; margin-right: -2px; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55)); }
.intro__bug b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.intro__bug span { color: var(--ink-2); font-weight: 500; }

/* the sport's title card, bottom left: the name, heavy and wide, then the venue and who can enter in one quiet line */
.intro__lower { position: absolute; left: var(--edge); bottom: calc(var(--bar) + clamp(18px, 4.5vh, 48px)); display: grid; justify-items: start; isolation: isolate; }
/* shade that rises from the corner of the picture, like lens falloff, so the card reads over a bright court or water */
.intro__lower::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--edge)); bottom: calc(-1 * clamp(18px, 4.5vh, 48px)); width: max(64vw, 720px); height: 64vh; background: radial-gradient(ellipse 100% 100% at 0% 100%, rgba(4, 6, 10, 0.62), rgba(4, 6, 10, 0.3) 38%, rgba(4, 6, 10, 0.08) 62%, transparent 78%); pointer-events: none; }
/* sized by the screen, then by the name's length (--n, set per sport) so the longest still fits a phone */
.intro__name { --n: 8; margin: 0; padding: 0.06em 0.04em 0.04em 0; overflow: hidden; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: min(clamp(2.2rem, 5.4vw, 6.4rem), 10.5vh, calc((100vw - 2 * var(--edge)) / (var(--n) * 0.96))); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.intro__name .ch { display: inline-block; white-space: pre; }
.intro__meta { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 2vw, 28px); margin: clamp(10px, 1.6vh, 18px) 0 0; font: 500 clamp(0.875rem, 0.3vw + 0.78rem, 1.0625rem)/1.35 var(--font-body); color: var(--ink-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.intro__meta span:first-child { color: var(--ink); font-weight: 600; }

/* the tracked callout */
.intro__call { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity 260ms ease; }
.intro__call.is-on { opacity: 1; }
.intro__call line { stroke: rgba(244, 241, 234, 0.75); stroke-width: 1.2; }
.intro__call circle { fill: none; stroke: var(--gold); stroke-width: 2; }
.intro__tag { position: absolute; left: 0; top: 0; display: grid; gap: 5px; margin: 0; padding: 10px 14px 11px; border-left: 1px solid var(--gold); background: rgba(6, 8, 12, 0.55); opacity: 0; transition: opacity 260ms ease; white-space: nowrap; }
.intro__tag.is-on { opacity: 1; }
.intro__tag b { font: 800 1rem/1 var(--font-display); font-stretch: 115%; text-transform: uppercase; color: var(--ink); }
.intro__tag span { font: 500 0.8125rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* the cold open */
/* the cold open: everything inside the picture, above the bottom bar, sized by the shorter side so a wide, short
   window (a laptop, a phone on its side) keeps the ball clear */
.intro__standby { position: absolute; z-index: 5; inset: var(--bar) 0; display: grid; place-items: center; align-content: end; gap: clamp(6px, 1.2vh, 12px); padding: 0 24px clamp(18px, 4.5vh, 52px); text-align: center; pointer-events: none; }
.intro__standby > * { opacity: 0; margin: 0; }
/* the host's emblem, crowning the title (here and on the closing lockup) */
.intro__seal { display: block; width: clamp(54px, 7.4vh, 84px); height: auto; margin-bottom: clamp(2px, 0.8vh, 10px) !important; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6)); }
.intro__kicker { font: 500 clamp(0.875rem, 0.3vw + 0.8rem, 1.05rem)/1.2 var(--font-body); color: var(--ink-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.intro__title { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(3rem, min(8vw, 14vh) + 0.4rem, 8.8rem); line-height: 0.84; text-transform: uppercase; letter-spacing: 0.005em; color: var(--ink); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55); }
.intro__year { font: 500 clamp(0.95rem, 0.4vw + 0.85rem, 1.2rem)/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--gold); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
/* Kick Off: the one thing to press, and it looks it: gold leaf with a play mark, and a ring of light that keeps
   breathing out from it. (A click anywhere on the cold open starts the film too.) */
.intro__enter { position: relative; pointer-events: auto; margin-top: clamp(10px, 1.8vh, 18px) !important; display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 30px 0 9px; border: 0; border-radius: 999px; background: linear-gradient(105deg, #a9822f, #f3dc94 38%, #dcb65d 58%, #b18a35); color: #15120b; font: 800 1.0625rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.35), 0 12px 34px -12px rgba(216, 180, 90, 0.85), 0 0 46px -6px rgba(216, 180, 90, 0.45); transition: transform 220ms ease, box-shadow 300ms ease, filter 300ms ease; }
.intro__enter i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #15120b; }
.intro__enter i::before { content: ""; position: absolute; left: 16px; top: 12px; border-left: 13px solid #f3dc94; border-block: 8px solid transparent; }
.intro__enter::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: intro-call 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) 1.6s infinite; }
@keyframes intro-call { from { box-shadow: 0 0 0 0 rgba(236, 206, 128, 0.75); } to { box-shadow: 0 0 0 22px rgba(236, 206, 128, 0); } }
.intro__enter:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 14px 38px -12px rgba(216, 180, 90, 0.95), 0 0 64px -4px rgba(216, 180, 90, 0.6); }
.intro__enter:active { transform: translateY(1px); }
.intro__enter:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
/* anywhere on the cold open is a press of Kick Off */
.intro.is-live:not(.is-running) { cursor: pointer; }
.intro__hint { font: 500 0.8125rem/1 var(--font-body); color: rgba(244, 241, 234, 0.6); }

/* the partners' billboard, then their rail (index.html, intro.js). In the bottom bar, each partner's logo on a card of
   soft light that fades into the dark at its edges (their artwork is drawn for a light ground); the cards light up
   like floodlight banks, and a gold glint crosses them now and then. When the film starts the billboard settles into
   the rail: the label gives way to the host's emblem, and at every segue a sweep of gold light runs across the bar
   while the next logo steps forward. */
.intro__credits { --h: min(84%, 100px); --gap: clamp(14px, 1.6vw, 26px); position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--bar); display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: 0 24px max(0px, env(safe-area-inset-bottom)); overflow: hidden; opacity: 0; pointer-events: none; }
.intro__credits-label { max-width: 16em; margin: 0 4px 0 0; overflow: hidden; font: 600 0.75rem/1.25 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--gold); transition: max-width 600ms ease, margin 600ms ease, opacity 300ms ease; }
.intro__plate { position: relative; isolation: isolate; display: block; flex: none; box-sizing: border-box; height: var(--h); padding: 9px 15px; transition: height 600ms cubic-bezier(0.2, 0.7, 0.3, 1), max-width 600ms ease, margin 600ms ease, opacity 380ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.intro__plate img { position: relative; display: block; width: auto; height: 100%; }
.intro__plate::before { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 18px; background: #f6f3ee; filter: blur(4px); box-shadow: 0 0 38px 8px rgba(246, 230, 190, 0.2); }
.intro__plate::after { content: ""; position: absolute; z-index: 1; inset: 1px; border-radius: 18px; background: linear-gradient(105deg, transparent 40%, rgba(255, 214, 130, 0.38) 50%, transparent 60%) no-repeat; background-size: 280% 100%; background-position: 140% 0; animation: intro-glint 6.5s ease-in-out 3s infinite; pointer-events: none; }
.intro__plate[data-i="2"]::after { animation-delay: 3.5s; }
@keyframes intro-glint { 0%, 74% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
/* the host's emblem has its own disc: no card, only a glow; it joins on the rail */
.intro__plate--host { max-width: 0; margin-right: calc(-1 * var(--gap)); padding: 0; opacity: 0; filter: drop-shadow(0 0 16px rgba(246, 230, 190, 0.28)); }
.intro__plate--host::before, .intro__plate--host::after { display: none; }
.intro__credits.is-rail { --h: min(70%, 84px); }
.intro__credits.is-rail .intro__credits-label { max-width: 0; margin: 0 calc(-1 * var(--gap)) 0 0; opacity: 0; }
.intro__credits.is-rail .intro__plate--host { max-width: 140px; margin-right: 0; opacity: 1; }
.intro__credits.is-rail .intro__plate::after { animation: none; }
/* the logo of this segue steps forward; the others wait a shade back */
.intro__credits[data-feature] .intro__plate { opacity: 0.8; transform: scale(0.93); }
.intro__credits[data-feature="0"] [data-i="0"], .intro__credits[data-feature="1"] [data-i="1"], .intro__credits[data-feature="2"] [data-i="2"] { opacity: 1; transform: scale(1.06); }
.intro__sweep { position: absolute; z-index: 2; top: 6%; bottom: 6%; left: 0; width: 26%; background: linear-gradient(90deg, transparent, rgba(255, 226, 150, 0.5) 50%, transparent); mix-blend-mode: screen; filter: blur(3px); opacity: 0; pointer-events: none; }

/* the closing lockup */
.intro__lockup { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; align-content: start; padding: max(7vh, 56px) 24px 0; text-align: center; pointer-events: none; }
.intro__lock { display: grid; justify-items: center; gap: 8px; }
.intro__lock > * { margin: 0; opacity: 0; }
.intro__lockup .intro__title { font-size: clamp(3.4rem, 8.4vw, 9rem); }
.intro__counts { margin-top: 12px !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 clamp(20px, 3vw, 44px); font: 500 clamp(0.9375rem, 0.4vw + 0.85rem, 1.15rem)/1 var(--font-body); color: var(--ink-2); }
.intro__counts b { margin-right: 0.35em; color: var(--ink); font: 800 1.5em/1 var(--font-display); font-stretch: 115%; font-variant-numeric: tabular-nums; }
.intro__flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }

/* controls */
.intro__skip { position: absolute; z-index: 8; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); min-height: 38px; padding: 0 16px; border: 1px solid rgba(244, 241, 234, 0.25); border-radius: 999px; background: rgba(4, 6, 10, 0.35); color: rgba(244, 241, 234, 0.86); font: 500 0.8125rem/1 var(--font-body); cursor: pointer; }
.intro__skip:hover { border-color: rgba(244, 241, 234, 0.6); color: var(--ink); }
.intro__skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* a portrait screen: the card spans the width */
@media (max-aspect-ratio: 999/1000) {
  /* the sport's card stands above the partners' rail */
  .intro__lower { right: var(--edge); bottom: calc(var(--bar) + 70px + max(16px, 2vh, env(safe-area-inset-bottom))); }
  .intro__lower::before { bottom: calc(-1 * (70px + max(16px, 2vh, env(safe-area-inset-bottom)))); width: 100vw; height: 52vh; }
  .intro__name { font-size: min(13vw, calc((100vw - 2 * var(--edge)) / (var(--n) * 0.96))); }
  .intro__tag b { font-size: 0.9375rem; }
  /* the bottom bar is too thin for the billboard here: it stands just above it, the title card rising to make room */
  .intro__standby { padding-bottom: calc(clamp(18px, 4.5vh, 52px) + 104px); }
  .intro__credits { --h: 60px; bottom: var(--bar); height: auto; flex-wrap: wrap; row-gap: 8px; padding-bottom: clamp(12px, 2.2vh, 22px); }
  .intro__credits-label { flex-basis: 100%; max-width: none; margin: 0; text-align: center; font-size: 0.6875rem; }
  .intro__credits.is-rail { --h: 52px; }
  .intro__credits.is-rail .intro__credits-label { display: none; }
  .intro__plate { padding: 7px 12px; }
}
/* a short landscape screen (a phone on its side): the cold open's title steps down so the ball stays clear */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .intro__hook, .intro__hint { display: none; }
  /* no room for the callout beside the narration on a screen this short: the narration carries the story */
  .intro__call, .intro__tag { display: none; }
  .intro__lower { bottom: calc(var(--bar) + 12px); }
  .intro__lower::before { bottom: -12px; height: 80vh; }
  .intro__name { font-size: min(13vh, 3rem); }
  .intro__meta { margin-top: 8px; }
  .intro__standby .intro__seal { display: none; }   /* the emblem stays in the corner; the ball keeps its room */
  .intro__credits-label { display: none; }
  .intro__credits, .intro__credits.is-rail { --h: 82%; }
  .intro__plate { padding: 4px 9px; }
}

/* the hero's own entrance waits until the opening has finished */
html.intro-open .hero h1 .char, html.intro-open .hero h1 .word--year, html.intro-open .hero__ball-body, html.intro-open .hero__ball-shadow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) { html.intro-open { overflow: auto; } html.intro-open .intro { display: none; } }
@media print { .intro { display: none !important; } }

/* The story: one line of narration at a time, upright and plain, each word arriving out of a soft blur */
.intro__story { position: absolute; left: 50%; top: max(15vh, 92px); transform: translateX(-50%); margin: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-stretch: 100%; font-size: clamp(1.25rem, 1.6vw + 0.65rem, 2.3rem); letter-spacing: -0.01em; color: #f6ecdc; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4); }
.intro__story .w { display: inline-block; white-space: pre; opacity: 0; will-change: transform, opacity, filter; }
.intro__hook { font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, 0.6vw + 0.85rem, 1.3rem); color: rgba(246, 236, 220, 0.86); margin-top: 6px !important; }
@media (max-width: 600px) { .intro__story { top: max(12vh, 80px); white-space: normal; width: 86vw; text-align: center; } }