/* An eight-second threshold, not a loading meter. The film still needs START. */
.lunar-passage{position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;background:transparent;color:#b9c9d2}
.passage-space{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#111e29,#05090e 70%);animation:passage-darken 8s both}
.passage-orbits{position:absolute;left:50%;top:50%;width:max(100vw,100vh);height:max(100vw,100vh);color:#769bae;stroke-width:.35;pointer-events:none;animation:passage-orbit 8s both}
.passage-orbits g{stroke-dasharray:1700;animation:passage-lines 8s both}
.passage-moon{position:absolute;left:var(--moon-x);top:var(--moon-y);width:64px;height:64px;object-fit:contain;mix-blend-mode:screen;filter:grayscale(1) brightness(.68);transform:translate(-50%,-50%);animation:passage-approach 8s both;pointer-events:none}
/* The source has a black square border; remove it geometrically, not by blending. */
.passage-moon{mix-blend-mode:normal;clip-path:circle(46% at 50% 50%);-webkit-mask-image:radial-gradient(circle closest-side,#000 89.6%,#000 90.5%,transparent 92%);mask-image:radial-gradient(circle closest-side,#000 89.6%,#000 90.5%,transparent 92%)}
.passage-title{position:absolute;left:0;right:0;top:68%;text-align:center;animation:passage-title 8s both;pointer-events:none}
.passage-title small{display:block;font:8px monospace;letter-spacing:.36em;color:#718895;margin-bottom:20px}
.passage-title span{font:300 clamp(22px,3vw,44px) Arial,sans-serif;letter-spacing:.5em;margin-left:.5em}
.passage-title i{display:block;width:60px;height:1px;margin:25px auto 0;background:linear-gradient(90deg,transparent,#83a2b366,transparent)}
.passage-cancel,.passage-skip{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));min-height:44px;font:9px monospace;letter-spacing:.22em;color:#8398a5;z-index:2;padding:12px 20px;background:#05090e80;border-radius:2px}
.passage-cancel{left:4%}.passage-skip{right:4%}
.passage-cancel:hover,.passage-skip:hover{color:#d3e4ef}
@keyframes passage-darken{0%{opacity:0}15%,100%{opacity:1}}
@keyframes passage-approach{0%{left:var(--moon-x);top:var(--moon-y);width:64px;height:64px;opacity:0}10%{opacity:.6}48%{left:50%;top:43%;width:min(42vw,44vh);height:min(42vw,44vh);opacity:1}80%{left:50%;top:43%;width:min(48vw,50vh);height:min(48vw,50vh);opacity:1}100%{left:50%;top:43%;width:min(51vw,53vh);height:min(51vw,53vh);opacity:0}}
@keyframes passage-orbit{0%{opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(-18deg)}22%{opacity:.6}62%{opacity:.3}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(8deg)}}
@keyframes passage-lines{0%{stroke-dashoffset:1700}65%,100%{stroke-dashoffset:0}}
@keyframes passage-title{0%,30%{opacity:0;transform:translateY(12px);filter:blur(5px)}55%,79%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-6px);filter:blur(3px)}}
@media(max-width:680px){.passage-title{top:65%}.passage-title span{font-size:26px}.passage-title small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.lunar-passage *{animation:none!important}}