/* One-time intro. Only active while <html> has .intro-on (set in the page head, removed by intro.js). */
html.intro-on { background: #000; overflow: hidden; scrollbar-gutter: stable; scroll-behavior: auto; }
html.intro-on body { background: transparent; }
html.intro-on:not(.intro-ready) body { opacity: 0; }

html.intro-on .intro-stage { opacity: 0; }
html.intro-on .intro-stage.intro-in { opacity: 1; }
html.intro-on .intro-p:not(.intro-pd) { opacity: 0; }
html.intro-on .intro-p { transition: none !important; will-change: transform, opacity; }

.intro-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10000; display: block; cursor: progress; }

/* Big title over the build; slides off left at the end. */
.intro-title { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 0 5vw; pointer-events: none; transform: translateX(0); transition: transform .7s cubic-bezier(.6, 0, .9, .4); }
.intro-title span { display: block; max-width: 100%; text-align: center; font: 900 clamp(2.9rem, 13vw, 9rem)/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 .25em #000, 0 0 .5em #000, 0 .04em 0 #000; opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s ease; }
.intro-title.intro-title-in span { opacity: 1; transform: scale(1); }
.intro-title.intro-title-out { transform: translateX(-110%); }