.sonic-opening{background:#010308;overflow:hidden;isolation:isolate;opacity:1;color:#eef2f4}
.sonic-opening::backdrop{background:#010308}
.sonic-opening[open]{display:block}
#opening-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.opening-earth{position:absolute;left:0;top:0;width:1000px;height:1000px;z-index:1;pointer-events:none;will-change:transform;contain:layout style}
.opening-earth img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.opening-earth img:not([src]){visibility:hidden}
.opening-earth::after{content:'';position:absolute;inset:2.4%;border-radius:50%;box-shadow:0 0 45px #36a1e21a,0 0 120px #3479aa0a;pointer-events:none}
.opening-sun{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform,opacity}
.opening-sun::before{content:'';position:absolute;width:280px;height:280px;left:-140px;top:-140px;border-radius:50%;background:radial-gradient(circle,#fff8debc,#f6ddb95c 3%,#f6dfb21a 12%,#abcce308 38%,transparent 70%);mix-blend-mode:screen}
.opening-sun::after{content:'';position:absolute;width:min(800px,85vw);height:2px;left:0;top:0;transform:translateX(-50%) rotate(-12deg);background:linear-gradient(90deg,transparent,#c3e8f333,#ffffefd0,#aed3f133,transparent);box-shadow:0 0 10px #bfdfec3d}
.opening-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 65% 45%,transparent 22%,#01030926 62%,#010207a6),linear-gradient(0deg,#010308a6,transparent 18%,transparent 85%,#01030860)}
.opening-controls{position:absolute;top:max(28px,env(safe-area-inset-top));right:max(36px,env(safe-area-inset-right));left:36px;z-index:5;display:flex;justify-content:flex-end;gap:10px}
.opening-controls button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 17px;color:#e7eef4;background:#07101670;border:1px solid #d2e1e535;border-radius:30px;backdrop-filter:blur(12px);cursor:pointer;font:10px system-ui,sans-serif;letter-spacing:.02em}
.opening-controls button:hover{background:#1b303ec0;border-color:#e4ecf070}
.opening-controls [data-skip]{position:static}
.opening-controls .icon{width:14px;height:14px}
.opening-center{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;width:53%;padding:90px 5% 70px}
.sonic-opening .opening-signature{animation:none;opacity:0;transform:none;will-change:opacity,transform;text-align:center;max-width:450px}
.sonic-opening .opening-signature img{width:clamp(210px,29vw,410px);height:auto;max-height:none;object-fit:contain;filter:none}
.sonic-opening .opening-signature p{font:clamp(17px,2vw,24px) Georgia,serif;letter-spacing:.04em;margin:18px 0 6px;color:#e7eef4}
.sonic-opening .opening-signature small{font-size:11px;letter-spacing:.1em;color:#c4cbd0}
.sonic-opening .opening-signature>span{font:8px ui-monospace,monospace;letter-spacing:.34em;margin-top:34px;color:#adc2cf}
.opening-kicker{position:relative;margin:0 0 34px;font:8px ui-monospace,monospace;letter-spacing:.23em;color:#b4c2ca;text-align:center;opacity:0}
.opening-meta{position:absolute;bottom:37px;left:5%;right:5%;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;font:8px ui-monospace,monospace;letter-spacing:.18em;color:#b0c0cd}
.opening-meta>span:last-child{opacity:.5}
.opening-progress{position:absolute;bottom:0;left:0;right:0;z-index:5;height:1px;background:linear-gradient(90deg,#7dbadc,#d3dde0,#dfc7a0);transform:scaleX(0);transform-origin:left}
.sonic-opening[data-reduced=true]{background:radial-gradient(ellipse at 70% 40%,#142330,#010308 70%)}
.sonic-opening[data-reduced=true] #opening-canvas{visibility:hidden}
body.sonic-active{overflow:hidden}
body.sonic-active .mj-record,body.sonic-active .mj-orbital{animation-play-state:paused}
@media(max-width:699px){
 .opening-controls{left:15px;right:15px;gap:8px;top:max(18px,env(safe-area-inset-top))}
 .opening-controls button{font-size:10px;padding:9px 12px;gap:7px}
 .opening-center{width:100%;height:50%;top:auto;bottom:6%;padding:18px 24px;justify-content:center}
 .opening-kicker{font-size:7px;letter-spacing:.16em;margin:0 0 18px}
 .sonic-opening .opening-signature img{width:clamp(190px,57vw,280px)}
 .sonic-opening .opening-signature p{margin-top:10px;font-size:18px}
 .sonic-opening .opening-signature small{font-size:9px}
 .sonic-opening .opening-signature>span{font-size:7px;margin-top:19px;letter-spacing:.23em}
 .opening-meta{font-size:7px;letter-spacing:.06em;bottom:25px}
 .opening-meta>span:last-child{max-width:110px;text-align:right}
 .opening-sun::before{width:170px;height:170px;left:-85px;top:-85px}
}
@media(max-height:560px) and (min-width:700px){.opening-kicker{margin-bottom:12px}.sonic-opening .opening-signature img{width:210px}.sonic-opening .opening-signature>span{margin-top:15px}.opening-center{padding:65px 4%}}

/* Observational imagery: no synthetic planet, sun flare or procedural nebula. */
#opening-canvas,.opening-sun,.opening-earth::after{display:none}
.opening-universe{position:absolute;inset:-5%;background:#000 url('/assets/space/hubble-andromeda.webp') center/cover no-repeat;will-change:transform,opacity}
.opening-earth{mix-blend-mode:screen}
.opening-meta{bottom:113px}
.opening-credit{position:absolute;z-index:5;left:5%;right:5%;bottom:22px;max-width:780px;display:grid;gap:5px;font:10px/1.45 system-ui,sans-serif;color:#bec7d0}
.opening-credit a{color:inherit;text-decoration:none}
.opening-credit a:hover{text-decoration:underline}
@media(max-width:699px){.opening-meta{bottom:137px}.opening-credit{font-size:9px;bottom:16px}.opening-center{bottom:15%;height:38%}}