/* The opening is the scene itself: transparent WebGL/CSS over the native
   background, never an opaque loader or a surface behind the reading copy. */
#home-opening{--opening-x:66%;--opening-y:45%;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--opening-alpha,1);contain:layout paint;overflow:hidden;background:transparent}
#home-opening[hidden],.home-opening-controls[hidden]{display:none!important}
#home-scene{position:absolute;inset:0}
#home-scene canvas{display:block;width:100%;height:100%;background:transparent}
.opening-projection{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1}
#home-opening.projected .opening-fallback{visibility:hidden}
#home-opening.webgl .opening-projection{visibility:hidden}
#home-opening::before{content:"";position:absolute;left:var(--opening-x);top:var(--opening-y);width:min(34vmin,300px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:var(--opening-core,0);transform:translate(-50%,-50%);mix-blend-mode:screen;background:radial-gradient(circle,#f3fdff 0 1%,rgba(187,239,255,.86) 3%,rgba(78,178,255,.32) 14%,rgba(41,108,255,.10) 32%,transparent 70%)}
#home-opening::after{content:"";position:absolute;left:var(--opening-x);top:var(--opening-y);width:min(90vmin,820px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:var(--opening-burst,0);transform:translate(-50%,-50%) scale(var(--opening-burst-scale,.12));mix-blend-mode:screen;background:radial-gradient(circle,rgba(250,253,255,.96) 0 1.4%,rgba(168,222,255,.72) 3.5%,rgba(80,163,255,.26) 13%,rgba(48,112,255,.10) 33%,transparent 71%);filter:drop-shadow(0 0 calc(14px + var(--opening-energy,0)*38px) rgba(101,189,255,calc(var(--opening-energy,0)*.48)))}
.opening-fallback{position:absolute;left:var(--opening-x,66%);top:var(--opening-y,45%);width:clamp(230px,36vmin,470px);aspect-ratio:1;perspective:1100px;transform:translate(-50%,-50%);opacity:1;transition:opacity .3s}
#home-opening.webgl .opening-fallback{opacity:0}
.opening-machine{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(14deg - var(--opening-open,0)*9deg)) rotateY(calc(-30deg + var(--opening-open,0)*30deg)) rotateZ(calc(var(--opening-spin,0deg)*.54)) scale(calc(1.35 - var(--opening-open,0)*.35));filter:drop-shadow(0 10px 18px #0006) drop-shadow(0 0 calc(var(--opening-energy,0)*25px) rgba(93,176,255,.7));opacity:calc(1 - var(--opening-fragments,0))}
.opening-machine>i{position:absolute;inset:calc(5% + var(--layer)*4%);transform:translateZ(calc((2 - var(--layer))*42px + var(--opening-open,0)*var(--layer)*31px));opacity:calc(.82 - var(--layer)*.12)}
.opening-machine>i svg{display:block;width:100%;height:100%;overflow:visible}
.opening-emblem{position:absolute;inset:13%;transform:translateZ(128px) scale(calc(.65 + var(--opening-open,0)*.35));display:grid;place-items:center;opacity:var(--opening-logo,0);filter:drop-shadow(0 0 calc(18px + var(--opening-energy,0)*36px) rgba(94,176,255,.48))}
.opening-emblem img{width:100%;height:100%;object-fit:contain}
.opening-line{position:absolute;left:18%;right:18%;top:calc(20% + var(--opening-scan,0)*60%);height:1px;transform:translateZ(135px);background:linear-gradient(90deg,transparent,#c6eaff,transparent);opacity:var(--opening-beam,0);box-shadow:0 0 9px #53b6f04d}
.opening-ident{position:absolute;left:max(28px,calc((100vw - 1120px)/2));bottom:max(42px,env(safe-area-inset-bottom));font:400 12px/1.8 'JetBrains Mono',monospace;letter-spacing:.11em;color:#a6bed2;opacity:var(--opening-caption,1);display:flex;gap:20px;align-items:center}
.opening-ident::before{content:'';width:36px;height:1px;background:#82b7d7}
.opening-ident span+span{color:#778d9f;font-size:12px;letter-spacing:.03em}
.home-opening-controls{position:fixed;z-index:10;top:calc(env(safe-area-inset-top,0px) + 25px);left:max(28px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:12px}
.home-opening-controls button{font:500 13px/1.4 Inter,system-ui,sans-serif;min-height:44px;padding:10px 16px;border:1px solid #9ab6d242;border-radius:100px;background:transparent;color:#d2dfeb;cursor:pointer;transition:color .2s,border-color .2s}
.home-opening-controls button:hover{color:#fff;border-color:#bcd7eb99}
.home-opening-controls button:focus-visible{outline:2px solid #bce6ff;outline-offset:5px}
.home-opening-controls .opening-counter{font:400 12px 'JetBrains Mono',monospace;color:#8096aa;min-width:48px;text-align:right}
body.home-opening-active .scene[data-scene="0"] .t{visibility:hidden}
body[data-intro="ready"] .home-opening-controls{top:auto;left:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);right:max(28px,calc((100vw - 1120px)/2))}
body[data-intro="ready"] .home-opening-controls button{border-color:#8aa7c332;color:#b3c4d8;font-size:12px}
@media(max-width:900px){#home-opening{--opening-x:50%;--opening-y:34%}.opening-fallback{width:min(74vw,380px)}.opening-ident{left:24px;bottom:72px;flex-direction:column;align-items:flex-start;gap:3px;font-size:12px}.opening-ident::before{margin-bottom:12px}.home-opening-controls{left:22px;top:calc(env(safe-area-inset-top,0px) + 20px)}body[data-intro="ready"] .home-opening-controls{left:auto;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 66px)}}
#home-opening.fallback-immediate .opening-fallback{transition:none}
@media(max-height:500px){#home-opening{--opening-y:46%}.opening-ident{bottom:22px}.opening-fallback{top:46%;width:180px}body[data-intro="ready"] .home-opening-controls{display:none}}
@media(prefers-reduced-motion:reduce){#home-opening,.home-opening-controls{display:none!important}body.home-opening-active #c{opacity:1}body.home-opening-active .scene[data-scene="0"] .t{visibility:visible}}