/* The ripple intro, once per session on the home (boot.js decides). Nothing here applies unless
   boot.js marks <html>. Ported from build/afg/intro-lab on 2 October. */

/* Before the overlay exists: the screen is black and the headline waits. */
html[data-intro] .hero .t > * { opacity: 0; }
html[data-intro]:not(.intro-built) body::before { content: ""; position: fixed; inset: 0; z-index: 59; background: var(--neg, #080B0A); }
html.intro-on { overflow: hidden; }

/* The overlay: black until clicked; the canvas carries everything drawn, the film shows through it. */
.intro { position: fixed; inset: 0; z-index: 60; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.intro canvas { display: block; width: 100%; height: 100%; }

/* The invitation: one line of small type at the foot of the screen. */
.intro .hint {
  position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: none;
  text-align: center; font: 500 9px/1.4 var(--font, "Public Sans"), system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--neg-mute, #858C8B); pointer-events: none; transition: opacity .35s ease;
}
.intro:focus-visible .hint { color: #fff; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }