/* The brand intro overlay. html.intro is set in the head before first paint by
   the page's decision script, so the skip case never flashes and the play
   case never shows the page early. Played by /intro.js. */
#intro { display: none; }
/* While the intro is on, the page itself is invisible on black, whatever
   happens to the overlay element (a page runtime may remove it and the intro
   script puts it back). The page shows again as the curtain moves. */
html.intro { overflow: hidden; background: #000; }
html.intro body { visibility: hidden; }
html.intro.intro-scrub body, html.intro.intro-out body { visibility: visible; }
html.intro #intro { display: block; visibility: visible; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 100000; background: #000; overflow: hidden; }
html.intro-out #intro { transition: height .9s cubic-bezier(.76, 0, .2, 1); }
html.intro-fade #intro { opacity: 0; transition: opacity .18s linear; }
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.intro-lock { visibility: hidden; }
.intro-lock.ready { visibility: visible; }
.intro-lock .sw { display: inline-block; opacity: 0; transform-origin: 50% 100%; will-change: transform; }
.intro-lock.flying { position: fixed; margin: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.76, 0, .2, 1); }

/* the hold after the sting: a Scroll chip under the logo; in scrub mode the
   scroll moves the curtain, so scrolling is unlocked and no transitions run */
html.intro.intro-scrub { overflow: visible; }
.intro-lock.flying.scrub { transition: none; }
.intro-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 0); margin-top: clamp(120px, 20vh, 220px); display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 20px; border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .02em; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.intro-hint.on { opacity: 1; }
.intro-hint svg { width: 16px; height: 16px; fill: none; stroke: #2F8F6B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }