/* 2.5s reveal + 2s fully visible hold + 0.7s gate exit. Self-contained shared opening; safe to load on the owner and confirmation pages. */
.opening-film{--intro-duration:5200ms;position:fixed;inset:0;z-index:1000;display:grid;place-items:center;isolation:isolate;overflow:clip;color:#ededed;animation:opening-failsafe var(--intro-duration) steps(1,end) forwards}
.opening-film[hidden]{display:none!important}
body.intro-playing{overflow:hidden}
.opening-film .film-gate{position:absolute;top:0;bottom:0;width:calc(50% + 1px);z-index:-1;border-left:0;border-right:0;background:radial-gradient(ellipse at 50% 45%,#171321,#020305 72%);box-shadow:inset 0 0 80px #000}
.opening-film .gate-left{left:0;box-shadow:inset 0 0 80px #000}
.opening-film .gate-right{right:0;box-shadow:inset 0 0 80px #000}
.intro-playing .gate-left{animation:gate-open-left var(--intro-duration,5200ms) cubic-bezier(.2,.6,.2,1) forwards}
.intro-playing .gate-right{animation:gate-open-right var(--intro-duration,5200ms) cubic-bezier(.2,.6,.2,1) forwards}
.opening-content{position:relative;width:min(820px,91vw);text-align:center}
.intro-playing .opening-content{animation:opening-content var(--intro-duration,5200ms) linear forwards}
.opening-logo{display:block;width:clamp(170px,18vw,236px);height:auto;margin:0 auto 16px;filter:drop-shadow(0 0 12px #a9c6ee20)}
.opening-wordmark{display:flex;align-items:baseline;justify-content:center;font:450 clamp(30px,4vw,46px)/1.1 Geist,sans-serif;letter-spacing:-.055em;margin:0 auto 18px;text-shadow:none;color:#e3eaf5}
.opening-wordmark>span:last-child{color:#a8ddf8}
.opening-film .film-gate::before,.opening-film .film-gate::after{display:none}
.opening-label{display:block;font-family:GeistMono,monospace;color:#c6bfd2;font-size:10px;line-height:1.6;letter-spacing:.22em}
.opening-art{position:relative;aspect-ratio:96/60;width:100%;max-height:45svh;margin:18px auto 0;mask-image:radial-gradient(ellipse,#000 54%,transparent 87%)}
.opening-art canvas{position:absolute;inset:0;width:100%;height:100%;mask-image:radial-gradient(ellipse,#000 52%,transparent 88%)}
.intro-playing .opening-art{animation:opening-light var(--intro-duration,5200ms) ease-in-out forwards}
.opening-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:GeistMono,monospace;font-size:clamp(20px,5.4vw,52px);line-height:1.2;letter-spacing:.12em;color:#f6e3b9;text-shadow:0 0 20px #a183bd35}
.opening-art:has(.art-ready) .opening-fallback{opacity:0}
.desktop-message{position:relative;margin:8px auto 22px;line-height:1.3}
.desktop-message strong{display:block;font-family:Geist,system-ui,sans-serif;font-size:clamp(20px,2.4vw,30px);font-weight:550;color:#f4dab0;letter-spacing:-.022em;text-shadow:0 0 22px #d6b77d3d}
.desktop-message span{display:block;font-family:Plex,Geist,sans-serif;color:#b3bed0;font-size:13px;line-height:1.6;margin-top:12px}
.opening-track{position:relative;width:clamp(190px,30vw,300px);height:5px;margin:23px auto 0;border-radius:8px;border:1px solid #b6cae52e;background:#bccce510;overflow:hidden;box-shadow:inset 0 1px 2px #0006,0 0 18px #b7a0da0d}
.opening-track i{display:block;position:relative;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#87a8da 0%,#b499d6 48%,#eed3a1 84%,#fff0cc);transform:scaleX(0);transform-origin:left center;box-shadow:0 0 10px #e2c69a50}
.intro-playing .opening-track i{animation:opening-track var(--intro-duration,5200ms) linear forwards}
.opening-track i::after{content:'';position:absolute;right:0;top:0;width:10px;height:100%;border-radius:6px;background:#fff3d7;box-shadow:0 0 8px #fff3d7a0}
.intro-playing .gate-left,.intro-playing .gate-right,.intro-playing .opening-content,.intro-playing .opening-art,.intro-playing .opening-track i{animation-delay:calc(-1ms*var(--intro-elapsed,0))}
@keyframes opening-failsafe{to{visibility:hidden;pointer-events:none;opacity:0}}
@keyframes gate-open-left{0%,86.538462%{transform:translateX(0)}100%{transform:translateX(-102%)}}
@keyframes gate-open-right{0%,86.538462%{transform:translateX(0)}100%{transform:translateX(102%)}}
@keyframes opening-content{0%,86.538462%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@keyframes opening-track{to{transform:scaleX(1)}}
@keyframes opening-light{0%,32%{filter:brightness(1)}43%{filter:brightness(1.15) drop-shadow(0 0 8px #dec9f018)}48%,100%{filter:brightness(1.08)}}
@media(max-width:760px){.opening-content{width:94vw}.opening-logo{width:172px;margin-bottom:12px}.opening-art{max-height:39svh;min-height:165px}.desktop-message{margin-top:14px}.desktop-message strong{font-size:22px;line-height:1.28}.desktop-message span{font-size:12px;line-height:1.6}.opening-track{margin-top:20px}}
@media(max-width:360px){.opening-logo{width:150px}.opening-label{font-size:8px}.desktop-message strong{font-size:20px}.opening-art{min-height:150px;max-height:36svh}}
@media(max-height:550px) and (orientation:landscape){.opening-logo{width:125px;margin-bottom:0}.opening-label{display:none}.opening-art{min-height:0;max-height:42svh}.desktop-message{margin:0}.desktop-message strong{font-size:16px}.desktop-message strong br{display:none}.desktop-message span{font-size:10px;margin-top:5px}.opening-track{margin-top:12px;height:4px;width:180px}}
@media(prefers-reduced-motion:reduce){.opening-film{animation:opening-failsafe var(--intro-duration,5200ms) steps(1,end) forwards!important}.opening-content{opacity:1!important;transform:none!important}.film-gate{transform:none!important}.opening-track i{transform:scaleX(1);animation:none!important}.intro-playing .opening-art{filter:none!important;animation:none!important}.opening-art canvas{display:block!important}.opening-art:has(.art-ready) .opening-fallback{opacity:0!important}}

/* HELLO WORLD stays on one line; the ellipsis resolves into three held dots. */
.opening-dots{display:inline-flex;letter-spacing:0;gap:.12em;margin-left:.08em}
.opening-dots i{font-style:normal;animation:opening-dot var(--intro-duration,5200ms) ease-out both}
.opening-dots i:nth-child(2){animation-name:opening-dot-two}
.opening-dots i:nth-child(3){animation-name:opening-dot-three}
@keyframes opening-dot{0%,28%{opacity:.12;transform:translateY(2px)}39%,100%{opacity:1;transform:none}}
@keyframes opening-dot-two{0%,31%{opacity:.12;transform:translateY(2px)}43%,100%{opacity:1;transform:none}}
@keyframes opening-dot-three{0%,34%{opacity:.12;transform:translateY(2px)}47%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.opening-dots i{animation:none!important;opacity:1;transform:none}}