/* Scrollbars stay hidden site-wide; the chapter rail shows where you are. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}

/* Before and during the intro. A slow connection paints the page before intro.js runs: keep it black until the intro layer exists. */
html.intro-pending{overflow:hidden;background:#000}
html.intro-pending:not(.intro-live) body>:not(.intro-layer){visibility:hidden}
.intro-pending .site-header,.intro-pending .hero-bottom,.intro-pending .hero-footer,.intro-pending .chapter-rail{opacity:0;pointer-events:none}
.site-header,.hero-bottom,.hero-footer,.chapter-rail{transition:opacity .45s ease}
.hero h1{position:relative}

.intro-layer{position:fixed;inset:0;z-index:10000;background:transparent;overflow:hidden}
.intro-layer video,.intro-black{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.intro-layer video{opacity:1;transform-origin:0 0}
.intro-black{opacity:0}
.intro-name{position:absolute;color:#f5f5f3;text-align:center;white-space:nowrap;opacity:0;font-family:'Monument Extended',sans-serif}
.intro-skip{position:absolute;right:4.2vw;bottom:30px;color:#fff;background:#0004;border:1px solid #ffffff40;border-radius:2px;padding:10px 15px;font:11px Inter,sans-serif;cursor:pointer}

/* While footage buffers the browser shows the first frame as a still; stay black until it actually plays.
   The video element normally supplies the black backdrop, so the layer takes it over meanwhile. */
.intro-layer:not(.intro-playing){background:#000}
.intro-layer:not(.intro-playing) video{visibility:hidden}

/* While the clips gather, the video is moved onto the hero title; the layer supplies black around the smaller frame. */
.intro-steer{background:#000}

/* Hand-off: black comes up and the live title glitches in letter by letter, acid to white. */
.intro-reveal .intro-black{opacity:1;transition:opacity 75ms linear}
.intro-reveal .intro-name{opacity:1}
.intro-reveal .intro-skip{opacity:0;pointer-events:none}
.iris-letter{display:inline;animation:iris-letter-lock 330ms steps(1,end) both;animation-delay:calc(var(--i) * 5ms)}
@keyframes iris-letter-lock{0%{opacity:0;color:#c6f463}14%{opacity:1;color:#c6f463}27%{opacity:0}38%{opacity:1;color:#c6f463;text-shadow:6px 0 #c6f46380}52%{opacity:.2;text-shadow:-3px 0 #fff}66%,100%{opacity:1;color:#f5f5f3;text-shadow:none}}

/* Then the black opens around the title, which stays fully opaque; the layer is removed with it sitting exactly on the hero title.
   The video, whose own softer title sits in the same place, disappears at once, and the steering black steps aside so the page fades in around the name. */
.intro-unveil video{visibility:hidden;opacity:0}
.intro-unveil .intro-black{opacity:0;transition:opacity 360ms cubic-bezier(.22,1,.36,1)}
.intro-unveil.intro-steer{background:transparent}

@media(prefers-reduced-motion:reduce){.intro-layer{display:none}}
/* ?intro=1 previews the intro even with reduced motion on. */
html.intro-preview .intro-layer{display:block}