#sky-opening {
 position:fixed; inset:0; z-index:20; display:grid; place-items:center;
 padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));
 background:#000; color:#ccc; --opening-accent:#2fd37a;
 animation:opening-failsafe .2s 2.2s forwards;
}
.opening-content { text-align:center; width:min(280px,75vw); }
.opening-scope { width:176px; height:176px; margin:0 auto 28px; position:relative; border:1px solid color-mix(in srgb,var(--opening-accent) 55%,transparent); border-radius:50%; box-shadow:0 0 36px color-mix(in srgb,var(--opening-accent) 12%,transparent); animation:opening-arrive .6s ease-out both; }
.opening-scope::before { content:''; position:absolute; inset:22px; border:1px solid color-mix(in srgb,var(--opening-accent) 25%,transparent); border-radius:50%; }
.opening-scope::after { content:''; position:absolute; inset:45px; border:1px solid color-mix(in srgb,var(--opening-accent) 20%,transparent); border-radius:50%; }
.opening-sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0deg 265deg,color-mix(in srgb,var(--opening-accent) 7%,transparent) 290deg,color-mix(in srgb,var(--opening-accent) 45%,transparent) 359deg,transparent 360deg); animation:opening-radar 1.35s linear both; }
.opening-plane { position:absolute; inset:49px; width:76px; height:76px; z-index:1; color:var(--opening-accent); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--opening-accent) 40%,transparent)); animation:opening-plane .7s ease-out both; }
.opening-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--opening-accent); box-shadow:0 0 9px var(--opening-accent); animation:opening-dot .8s .2s both; }
.opening-dot.one { top:29px; right:47px; } .opening-dot.two { bottom:36px; left:34px; }
.opening-title { margin:0; font:700 32px/1 'Barlow Condensed',sans-serif; letter-spacing:.12em; animation:opening-arrive .65s .12s both; }
.opening-title span { color:var(--opening-accent); }
.opening-caption { margin:14px 0 0; font:11px/1.5 'IBM Plex Mono',monospace; letter-spacing:.09em; color:#888; animation:opening-arrive .65s .22s both; }
#opening-skip { position:absolute; bottom:max(28px,env(safe-area-inset-bottom)); padding:12px; border:0; background:transparent; color:#777; font:11px 'IBM Plex Mono',monospace; min-height:44px; cursor:pointer; }
#opening-skip:focus-visible { outline:1px solid var(--opening-accent); }
#sky-opening.opening-out { animation:opening-fade .2s ease-in forwards; pointer-events:none; }
@keyframes opening-radar { from{transform:rotate(-125deg)} to{transform:rotate(235deg)} }
@keyframes opening-plane { from{opacity:0;transform:translate(-10px,16px) scale(.75)} to{opacity:1;transform:translate(0,0) scale(1)} }
@keyframes opening-arrive { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes opening-dot { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
@keyframes opening-fade { to{opacity:0;visibility:hidden} }
@keyframes opening-failsafe { to{opacity:0;visibility:hidden;pointer-events:none} }
#sky-opening[data-opening-motion=reduced] *{animation:none!important}
#sky-opening[data-opening-motion=reduced].opening-out{animation:none;opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){#sky-opening:not([data-opening-motion=full]) *{animation:none!important}#sky-opening:not([data-opening-motion=full]).opening-out{animation:none;opacity:0;visibility:hidden}}