/* A branded optical opening. No video download or simulated loading percentage. */
.opening{position:fixed;inset:0;z-index:100;background:#02080b;display:grid;place-items:center;overflow:hidden;color:#e9f5ef;isolation:isolate;transition:opacity .9s ease,visibility .9s}.opening[hidden]{display:none}.opening::before{content:'';position:absolute;inset:-12%;background:radial-gradient(ellipse at center,#407f792b,transparent 56%),url('assets/cosmos.webp') 67% 45%/cover;opacity:.19;filter:blur(12px);transform:scale(1.2);animation:opening-space 5s ease-out both}.opening::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#02080b88,transparent 30%,transparent 70%,#02080b);z-index:-1}.opening-lock{overflow:hidden}.opening-content{text-align:center;position:relative;width:min(90%,850px);padding:40px 0}.opening-signature{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:#a9c9bc}.opening-emblem{width:clamp(140px,23vh,230px);aspect-ratio:1;position:relative;margin:25px auto 12px;filter:drop-shadow(0 0 35px #7de4de35);animation:opening-emblem 1.8s cubic-bezier(.16,1,.3,1) both}.opening-emblem img{width:100%;height:100%;object-fit:contain}.opening-ring{position:absolute;inset:-14%;border:1px solid #abf9e742;border-radius:50%;transform:rotateX(64deg) rotate(-28deg);box-shadow:0 0 28px #88dfd520;animation:opening-ring 4.5s ease-out both}.opening-ring:nth-child(2){inset:-27%;border-color:#b9a2f72d;animation-delay:.15s}.opening h2{font:clamp(46px,7vw,84px)/.96 Instrument,Georgia,serif;letter-spacing:-.035em;margin:0 0 17px;animation:opening-copy 1s .2s both}.opening-description{font-size:13px;line-height:1.7;color:#b3c8c0;max-width:430px;margin:auto;animation:opening-copy 1s .4s both}.opening-worlds{display:flex;justify-content:center;gap:clamp(15px,3vw,35px);margin:28px 0 18px}.opening-world{display:grid;justify-items:center;gap:9px;opacity:0;animation:opening-world .85s calc(.7s + var(--i)*.12s) forwards}.opening-world img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 14px #8edac42b)}.opening-world span{font-size:8px;letter-spacing:.06em;color:#b9cdc4}.opening-status{font-size:9px;letter-spacing:.12em;color:#719c8d;min-height:18px}.opening-skip{position:absolute;right:clamp(22px,4vw,65px);bottom:28px;border:1px solid #c1e4d63d;border-radius:30px;padding:11px 19px;font-size:11px}.opening-line{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:1px;height:8vh;background:linear-gradient(transparent,#c3ffe688)}.opening.leaving{opacity:0;visibility:hidden;pointer-events:none}.opening.leaving .opening-emblem{transition:transform 1s ease-in;transform:scale(2.4)}.opening.leaving .opening-content{transition:filter .9s,opacity .7s;filter:blur(8px);opacity:0}.opening-replay{position:fixed;bottom:18px;left:24px;z-index:24;border:1px solid #b5ead62b;background:#061611d9;border-radius:30px;padding:9px 14px;font-size:10px;backdrop-filter:blur(10px)}
@keyframes opening-emblem{from{opacity:0;transform:scale(.65) rotate(-20deg);}to{opacity:1;transform:scale(1) rotate(0);filter:none}}@keyframes opening-ring{from{opacity:0;scale:.35;rotate:-45deg}to{opacity:1;scale:1;rotate:0deg}}@keyframes opening-copy{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes opening-world{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}@keyframes opening-space{from{opacity:.04;transform:scale(1.35)}to{opacity:.2;transform:scale(1)}}
@media(max-width:600px){.hero-satellites{display:none!important}.opening-content{padding:20px 0}.opening-signature{font-size:7px;letter-spacing:.2em}.opening-description{font-size:12px;max-width:290px}.opening-worlds{gap:17px;flex-wrap:wrap;max-width:310px;margin:26px auto 16px}.opening-world img{width:32px;height:32px}.opening-world span{font-size:7px}.opening-emblem{width:150px;margin:22px auto}.opening h2{font-size:51px}.opening-skip{bottom:24px}.opening-replay{left:16px;bottom:14px;font-size:9px}.hero-copy{top:46%}.hero-vignette{background:linear-gradient(90deg,#030b0cb8,#030b0c20),linear-gradient(0deg,#030b0c,transparent 40%)}}
@media(max-height:500px){.opening-emblem{width:95px;margin:10px auto}.opening-content{padding:12px}.opening h2{font-size:42px;margin-bottom:10px}.opening-worlds{margin:12px auto}.opening-world img{width:25px;height:25px}.opening-description{font-size:11px}}
@media(prefers-reduced-motion:reduce){.opening,.opening *{animation:none!important;transition:none!important}.opening-world{opacity:1}.opening::before{transform:none;filter:none}.opening-emblem{opacity:1}.opening.leaving .opening-emblem{transform:none}}

/* Keep the identity sharp in iOS embedded browsers and paused openings. */
.opening-emblem{filter:none}.opening-emblem img{filter:none}.opening-world{opacity:1}.motion-paused .opening-emblem,.motion-paused .opening-world,.motion-paused .opening h2,.motion-paused .opening-description{animation:none!important;opacity:1;transform:none;filter:none}
.opening-worlds{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;width:100%;max-width:820px;margin:26px auto 16px}.opening-world span{letter-spacing:0;line-height:1.3}.opening{overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:safe center;justify-content:center;padding:24px 0 calc(78px + env(safe-area-inset-bottom,0px))}.opening-content{flex-shrink:0;margin:auto}.opening-skip{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:#02080bf2}.opening-line{display:none}
@media(max-width:600px){.opening-worlds{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 10px;max-width:340px;margin:20px auto 12px}.opening-world img{width:34px;height:34px}.opening-world span{font-size:8px}.opening-emblem{width:clamp(90px,18svh,140px);margin:16px auto}.opening h2{font-size:clamp(38px,6.5svh,51px)}.opening-content{padding:14px 0}.opening-signature{line-height:1.6}.opening-description{font-size:11px}.opening-status{font-size:8px}}
@media(max-height:500px) and (min-width:601px){.opening-content{padding:0}.opening-emblem{width:60px;margin:4px auto}.opening h2{font-size:30px;margin-bottom:6px}.opening-worlds{margin:10px auto}.opening-signature{font-size:7px}.opening-world img{width:25px;height:25px}}
