/* intro.css - STRIKE opening animation (pairs with intro.js). Home page only.
   Integration, exactly:
   1. In <head>, right after the existing inline "js" script (before any stylesheet), this ONE line:
      <script>try{if(!matchMedia("(prefers-reduced-motion: reduce)").matches&&(/[?&]intro\b/.test(location.search)||!(sessionStorage.getItem("strike-intro")||location.hash||/[?&](still|nointro)\b/.test(location.search))))document.documentElement.classList.add("intro")}catch(e){}</script>
   2. <link rel="stylesheet" href="intro.css">   after scene.css.
   3. <script src="intro.js" defer></script>     immediately BEFORE <script src="motion.js" defer></script>.
   Needs the inline <symbol id="logo"> sprite (the wordmark) and .nav__logo svg (glide target), both already on the page.
   Behaviour: html.intro = "the intro will play". The rule below paints a paper cover from the very first paint;
   intro.js swaps it for its own overlay (html.intro-run) and removes both classes when it ends. If intro.js never
   runs, the cover fades away by itself after 6 s. ?intro forces a replay, ?nointro / ?still / a #hash skip it.
   Page scripts: if (window.__introActive) wait for "strike:intro-leave" (the wordmark starts its glide to the nav and
   the paper wipes away, ~3.55 s) or "strike:intro-done" (overlay removed, ~4.2 s) before starting hero reveals and
   canvas scenes. The glide re-measures .nav__logo svg every frame, so an animated nav pill is fine.
   Scroll hold: while the film runs, window.__smooth is stopped (if present), wheel / touchmove / scroll keys are
   prevented and scrollY is kept at 0; any of them skips the film (420 ms exit). __smooth.start() at intro-done.
   Hand-off: the leftover dots stream into the hero pin's frame, read from window.__quilleBox (an element or a
   rect) if set, else [data-scene="quille"].getBoundingClientRect(), measured once when the glide starts. */
html.intro:not(.intro-run) body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #F7F5E8; pointer-events: none;
  animation: strike-intro-failsafe .3s linear 6s forwards;
}
@keyframes strike-intro-failsafe { to { opacity: 0; visibility: hidden; } }

.strike-intro { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; contain: strict; -webkit-tap-highlight-color: transparent; }
.strike-intro.is-leaving { pointer-events: none; }
.strike-intro__bg { position: absolute; inset: 0; background: #F7F5E8; will-change: clip-path; }
.strike-intro canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.strike-intro__skip {
  position: absolute; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 9px);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px;
  font: 500 9.5px/1 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(21, 23, 21, .62); background: none; border: 0; border-radius: 2px; cursor: pointer;
  animation: strike-intro-in .6s cubic-bezier(.16, 1, .3, 1) .35s both; transition: color .2s, opacity .25s;
}
.strike-intro__skip::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; transition: width .3s cubic-bezier(.16, 1, .3, 1); }
.strike-intro__skip:hover { color: #151715; }
.strike-intro__skip:hover::before { width: 26px; }
.strike-intro__skip:focus-visible { outline: 1px solid rgba(21, 23, 21, .55); outline-offset: -6px; color: #151715; }
.strike-intro.is-leaving .strike-intro__skip { opacity: 0; }
@keyframes strike-intro-in { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 599px) {
  .strike-intro__skip { right: calc(env(safe-area-inset-right, 0px) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 1px); font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .strike-intro { display: none; } }

/* the visitor's turn: the ball waits at the foul line; this button (and the hint under it) sits beside it (intro.js
   places it every frame next to the ball, or above it on narrow screens) */
.strike-intro { touch-action: none; }
.strike-intro.is-ready:not(.is-thrown) canvas { cursor: grab; }
.strike-intro.is-grab canvas { cursor: grabbing; }
.strike-intro__go { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; opacity: 0; pointer-events: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.strike-intro.is-ready .strike-intro__go { opacity: 1; pointer-events: auto; }
.strike-intro.is-thrown .strike-intro__go, .strike-intro.is-leaving .strike-intro__go { opacity: 0; pointer-events: none; transition-duration: .25s; }
.strike-intro__throw { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px 0 24px; border: 0; border-radius: 99px;
  background: #151715; color: #F7F5E8; font: 500 12px/1 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 16px 34px -20px rgba(21, 23, 21, .6); transition: transform .4s cubic-bezier(.16, 1, .3, 1), background-color .25s; }
.strike-intro__throw::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ia, 0deg), #4ADAAD, #32B5EC, #B471EF, #F046A4, #F87A01, #4ADAAD);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: strike-intro-ring 3.2s linear infinite; }
.strike-intro__throw::after { content: "\2191"; display: inline-block; font-size: 14px; letter-spacing: 0; animation: strike-intro-nudge 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.strike-intro__throw:hover { transform: translateY(-2px); background: #000; }
.strike-intro__throw:focus-visible { outline: 2px solid #151715; outline-offset: 4px; }
.strike-intro__hint { margin: 0; padding-left: 4px; font: 500 10px/1.4 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .58); white-space: nowrap; }
@property --ia { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes strike-intro-ring { to { --ia: 360deg; } }
@keyframes strike-intro-nudge { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@media (max-width: 599px) { .strike-intro__throw { height: 44px; padding: 0 18px 0 20px; font-size: 11px; } .strike-intro__hint { font-size: 9px; } }

/* while the visitor aims: the brand's line, large, in the empty sky above the lane; it leaves with the throw */
.strike-intro__title { position: absolute; left: 0; right: 0; top: max(9vh, 64px); margin: 0; text-align: center; pointer-events: none;
  font: 400 clamp(56px, min(9vw, 15vh), 150px)/.9 "Dickens Cnd", "Instrument Serif", Georgia, serif; letter-spacing: -.025em; word-spacing: .12em; color: #151715;
  opacity: 0; transform: translateY(14px); filter: blur(10px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1); }
.strike-intro.is-ready .strike-intro__title { opacity: 1; transform: none; filter: none; }
.strike-intro.is-thrown .strike-intro__title { opacity: 0; transform: translateY(-18px); filter: blur(6px); transition-duration: .45s; }
@media (max-width: 599px) { .strike-intro__title { top: max(14vh, 96px); font-size: clamp(54px, 16vw, 78px); } }

/* round 13: one centred column at the top — the line, the button, the hint — above a symmetric lane */
.strike-intro__head { position: absolute; left: 0; right: 0; top: max(7vh, 44px); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.strike-intro__head .strike-intro__title { position: static; font-size: clamp(52px, min(9vw, 12.5vh), 150px); }
.strike-intro__head .strike-intro__go { position: static; align-items: center; margin-top: clamp(14px, 3vh, 30px); transform: none !important; }
.strike-intro__head .strike-intro__hint { padding-left: 0; text-align: center; }
@media (max-width: 599px) { .strike-intro__head { top: max(9vh, 70px); } .strike-intro__head .strike-intro__title { font-size: clamp(50px, 15vw, 72px); } }
@media (min-width: 600px) and (max-height: 640px) {   /* short windows: the column stays above the pins */
  .strike-intro__head { top: 40px; }
  .strike-intro__head .strike-intro__title { font-size: clamp(42px, 11vh, 80px); }
  .strike-intro__head .strike-intro__go { margin-top: 10px; gap: 7px; }
  .strike-intro__throw { height: 40px; padding: 0 18px 0 20px; font-size: 11px; }
  .strike-intro__hint { font-size: 9px; }
}

/* the throw button is back under the ball (intro.js places it every frame); the title alone stays at the top */
.strike-intro__go { align-items: center; z-index: 3; }
.strike-intro__hint { padding-left: 0; text-align: center; }
.strike-intro__go.is-side { align-items: flex-start; }
.strike-intro__go.is-side .strike-intro__hint { text-align: left; }
/* the hint reads over the lane's marks: a soft paper pill behind it */
.strike-intro__go .strike-intro__hint { padding: 4px 10px 3px; border-radius: 99px; background: rgba(247, 245, 232, .88); }