/* Scroll-driven 3D guidebook intro (js/intro.js). Hidden unless the inline gate adds .intro-on to <html>.
   #intro is a tall spacer; .intro-stage is pinned with position:sticky while native scroll scrubs the book.
   JS sets the exact spacer height and the negative bottom margin that pulls the content up under the stage. */
#intro{display:none}
.intro-on #intro{display:block;position:relative;z-index:50;height:400vh;margin-bottom:-100vh;pointer-events:none}
/* The spacer itself must never catch taps: it overlaps the top of the site by one screen (negative margin), and once the
   stage is hidden at the hand-off it would otherwise swallow taps on the video and links there. Only the stage takes input. */
#intro .intro-stage{pointer-events:auto}
@supports (height:100lvh){.intro-on #intro{height:400lvh;margin-bottom:-100lvh}}
#intro .intro-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;
  background:radial-gradient(120% 95% at 46% 42%,#3d2b1c 0%,#24180f 42%,#110b07 78%,#080504 100%)}
/* Static poster of the closed book (same framing as the first WebGL frame), painted with the first frame of the page;
   it fades out as the canvas fades in. Portrait screens (narrower than 4:5, like the 3D framing) get the phone render.
   Under it, a tiny inlined blur of the same frame (under 1 KB) so the book's shape is there in the very first paint. */
#intro .intro-stage::before{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .6s ease;
  background:url(../assets/intro-poster-wide.webp) 50% 50%/cover no-repeat,url(data:image/webp;base64,UklGRoYBAABXRUJQVlA4IHoBAADQCQCdASpAACgAPm0uk0YkIqGhLVM8kIANiWYAp0daR5laLyveWAd1/BI54ITB+JYgG0laWZKXdMLGoOGB9f9sbq1uLKtUkP7p9IQ0NDhrdBSz9+fEmAAA/v6f+/+XVi0h94Kvh5DSmBjEaG4KjsK2Oz6FNKuwpsxio5+rm7vHJZUfTfqeiYD4R/5PsWOUEM/YFgkWm27lnDeBe9en56ApSIb0faJKWsc13WSg9mfXMR7DEGPgcHxzZ8071do2zeNNH7jpUmFtl99MiRXnYYOC+5srtriLXcMW85ZsVMqXBxnmGMgXjlbcObMhWI/T+OeAVoiBmt4MGs8ZGhZgU+VyARGQbbw5VWw4w3yzL4FfsDeTgi9vV4J2inMUFgKL1pKc1YwhPjTZIgRs0K1c6TIPRhinjjGK0Lez+rJ5xnByv7emGL8FD7O5dqEQ1rnJVniGkidNA0+ZQE+MxGZ8IpzAugA4a220z6LdhTgaDj36tg6+kQfTCwjeAAA=) 50% 50%/cover no-repeat}
@media (max-aspect-ratio:4/5){#intro .intro-stage::before{background-image:url(../assets/intro-poster-tall.webp),url(data:image/webp;base64,UklGRl4BAABXRUJQVlA4IFIBAACwCQCdASooAFcAPm00k0akIyGhKrqqAIANiUAXqgDayXeNwW/fH9hsp17jNzP/g6A/Ano7vc5tr1acQf0UDnmsP9m+fSj4Bm71uFru3Pip2t/oi/F7AAD++5PYhi4uWw6RrAlTSJzpxDN7bX9ZelUTqmMFM/gRwE6wvYKExH1OkWiB3uCIY8x/XwGKNaAc+CnxA54a8W7eroDqk71H7nIZQNHpngj8z12rShLIA6HF4hH0wyYg++uBx4HUKOA8vMzrlJT/pXv43q/KKzE3F61xdr+G5gFhFnz9pUVjDLFLys8QmRKv+E11zjb1aWePWi0hGAfN4fYoz330+SAa2jIIMfRsNlcaKMa4jcBNJVJeZ989gAJNXMAlDk+LRs9VDGzSpl2ORZmUVsoL+grwePq3GI6sTscyDk/iNC420F0pc3SbjPUx19oyiu/E4xNcp8MgAA==)}}
#intro .intro-stage.gl-ready::before{opacity:0}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
/* parallax light layers (moved by JS at different rates from the book) */
#intro .intro-light{position:absolute;left:-20%;top:-15%;width:140%;height:130%;pointer-events:none;will-change:transform;
  background:radial-gradient(38% 34% at 42% 46%,rgba(255,196,120,.16) 0%,rgba(255,170,90,.06) 45%,rgba(0,0,0,0) 72%)}
#intro .intro-shaft{position:absolute;left:-30%;top:-40%;width:90%;height:170%;pointer-events:none;will-change:transform;
  mix-blend-mode:screen;transform-origin:30% 0;
  background:linear-gradient(90deg,rgba(255,220,170,0) 0%,rgba(255,220,170,.055) 35%,rgba(255,226,180,.09) 50%,rgba(255,220,170,.05) 65%,rgba(255,220,170,0) 100%)}
#intro .intro-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 46%,rgba(0,0,0,0) 50%,rgba(5,3,2,.6) 100%)}
#intro .intro-hint{position:absolute;left:0;right:0;bottom:max(5.5vh,40px);margin:0;text-align:center;pointer-events:none;opacity:0;
  font:italic 400 clamp(17px,2.1vw,21px)/1.2 Schola,Georgia,serif;letter-spacing:.04em;color:#efe1c4;-webkit-text-stroke:0;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
#intro .intro-hint span{display:inline-block;animation:intro-bob 2.4s ease-in-out infinite}
#intro .intro-hint span::after{content:"";display:block;width:9px;height:9px;margin:10px auto 0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.8}
@keyframes intro-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
#intro .intro-skip{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:2;
  background:none;border:0;padding:10px 12px;margin:0;font:italic 15px/1 Schola,Georgia,serif;letter-spacing:.06em;
  color:rgba(240,226,200,.6);cursor:pointer;-webkit-text-stroke:0;text-shadow:none}
#intro .intro-skip:hover,#intro .intro-skip:focus-visible{color:rgba(252,243,224,.95)}
#intro .intro-skip:focus-visible{outline:2px solid rgba(252,243,224,.8);outline-offset:2px}