/* The character and his universe occupy separate planes. */
.universe-hero.has-layers .universe-art{object-position:center;animation:backdrop-breathe 30s ease-in-out infinite alternate}
.astronaut-drift{position:absolute;width:54%;max-width:740px;height:83%;right:-1%;top:12%;z-index:-1;pointer-events:none;animation:kai-weightless 9s ease-in-out infinite;transform-origin:55% 45%;will-change:transform}
.astronaut-cutout{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 30px #060d1860);display:block}
.has-layers .universe-copy{z-index:2}
.has-layers .hero-orbit-note,.has-layers .hero-bottom-meta,.has-layers .hero-top-meta{z-index:3}
@keyframes kai-weightless{0%,100%{transform:translate3d(0,4px,0) rotate(-2deg)}50%{transform:translate3d(-12px,-23px,0) rotate(2deg)}}
@keyframes backdrop-breathe{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(8px,-5px,0)}}
.cosmos-window .cosmos-image-wrap{inset:-2%;translate:var(--look-x,0px) var(--look-y,0px)}
.cosmic-depth{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen}
.nebula-light{position:absolute;inset:0;z-index:-3;pointer-events:none;mix-blend-mode:screen;opacity:.26;background:radial-gradient(ellipse at 56% 32%,#dbab951f 0%,#aa648f13 22%,transparent 53%);animation:nebula-light 19s ease-in-out infinite alternate}
@keyframes nebula-light{from{opacity:.2;transform:translate3d(-1%,0,0) scale(1)}to{opacity:.65;transform:translate3d(2%,-2%,0) scale(1.12)}}
.cosmos-coordinates,.cosmos-bottom-caption,.cosmos-side-label{z-index:2;pointer-events:none}
.cosmos-dialog .cosmic-depth{z-index:1}
.cosmos-dialog>p,.cosmos-dialog>button,.cosmos-dialog>.immersive-footer{z-index:3}
.cosmos-dialog .nebula-light{z-index:0}
.cosmos-dialog>img{translate:var(--look-x,0px) var(--look-y,0px)}
.cosmos-dialog .immersive-shade{z-index:2;pointer-events:none}
.cinema-paused .cosmos-image,.cinema-paused>.cosmos-image-wrap>.cosmos-image,.cinema-paused>.nebula-light,.cinema-paused>img{animation-play-state:paused}
@media(max-width:1150px) and (min-width:801px){.astronaut-drift{width:56%;right:-4%;top:20%;height:75%}}
@media(max-width:800px){.universe-hero.has-layers{min-height:930px}.has-layers .universe-art{top:24%;width:150%;right:-27%;height:72%;object-position:74% center}.astronaut-drift{width:83%;height:50%;top:auto;bottom:7%;right:-1%;max-width:490px}.has-layers .universe-copy{padding-bottom:440px}.has-layers .hero-orbit-note{bottom:80px}.cosmic-depth{opacity:.7}}
@media(max-width:420px){.universe-hero.has-layers{min-height:890px}.astronaut-drift{width:105%;right:-12%;height:48%;bottom:8%}.has-layers .universe-copy{padding-bottom:420px}.has-layers .universe-art{height:68%;top:28%;right:-26%}}

/* A late-night developer's cabin, somewhere between curiosity and bedtime. */
.midnight-lab{position:relative;isolation:isolate;min-height:655px;margin-top:37px;overflow:hidden;border:1px solid #77709b45;border-radius:10px;background:#0d1221}
.midnight-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;z-index:-4}
.midnight-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#080e1af5 0%,#080e1ade 25%,#080e1a60 42%,transparent 65%),linear-gradient(0deg,#0a0e1999,transparent 20%)}
.midnight-copy{padding:48px 39px 66px;width:45%;position:relative;z-index:2}
.midnight-copy h2{font-size:clamp(40px,5vw,66px);line-height:1.35;letter-spacing:-.04em;margin:20px 0 25px}
.midnight-copy h2>span{color:#bca5ff}
.midnight-copy p{font-size:13px;color:#b8c6d8;line-height:2.2}
.midnight-copy .midnight-punchline{margin-top:23px;color:#c9d3e0;font-size:14px}
.midnight-punchline strong{font-weight:500;color:#e5d5ba}
.mutter-button{display:inline-flex;gap:30px;align-items:center;background:#bca5ff15;border:1px solid #bca5ff5c;border-radius:4px;padding:11px 16px;color:#decfff;font-size:11px;margin-top:28px;transition:background .2s,transform .2s}
.mutter-button:hover{background:#bca5ff2f;transform:translateY(-2px)}
.mutter-button>span{font-size:21px;line-height:1}
.midnight-bubble{position:absolute;top:35px;right:4%;z-index:3;background:#ede9dc;color:#1b2231;max-width:390px;min-width:285px;padding:16px 23px;border:2px solid #1b2231;border-radius:18px 18px 3px 18px;box-shadow:5px 5px 0 #1b2231b3;transform:rotate(3deg);animation:lab-thought 7s ease-in-out infinite}
.midnight-bubble::after{content:"";position:absolute;right:37px;bottom:-15px;width:22px;height:23px;background:#ede9dc;clip-path:polygon(0 0,100% 0,100% 100%)}
.midnight-bubble>span{display:block;font-size:16px;font-weight:700;line-height:1.6}
.midnight-bubble small{display:block;margin-top:5px;font-size:10px;line-height:1.8;color:#68667b}
.midnight-label{position:absolute;right:24px;bottom:23px;font:400 8px var(--mono);letter-spacing:.1em;color:#c8d6e6}
.monitor-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 76% 65%,#60aef318,transparent 43%);mix-blend-mode:screen;animation:monitor-breathe 5s ease-in-out infinite alternate}
@keyframes monitor-breathe{to{opacity:.3}}
@keyframes lab-thought{0%,100%{translate:0 0}50%{translate:0 -5px}}
.midnight-log{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border-block:1px solid var(--line)}
.midnight-log>div{padding:19px 22px;display:flex;align-items:center;gap:18px}
.midnight-log>div+div{border-left:1px solid var(--line)}
.midnight-log>div>span{font:400 9px var(--mono);color:#a991dc;white-space:nowrap}
.midnight-log strong{font-size:12px;font-weight:400;color:#c0c6d2}
.midnight-log small{color:#7a8496;font-size:9px}
.midnight-footnote{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:10px;color:#748194}
.midnight-footnote>span:first-child{color:#a4b39f;display:flex;align-items:center;gap:8px}
.midnight-footnote i{width:5px;height:5px;border-radius:50%;background:#d9f56c;box-shadow:0 0 8px #d9f56c44}
@media(max-width:1150px){.midnight-copy{padding:40px 28px 60px;width:50%}.midnight-copy p{font-size:12px}.midnight-copy .midnight-punchline{font-size:13px}.midnight-bubble{right:3%;min-width:250px;max-width:330px;top:33px;padding:14px 17px}.midnight-bubble>span{font-size:14px}.midnight-log>div{padding:18px 15px;gap:12px}.midnight-log strong{font-size:11px}}
@media(max-width:800px){.midnight-lab{min-height:1000px;margin-top:29px}.midnight-art{top:40%;height:61%;object-position:70% center}.midnight-shade{background:linear-gradient(180deg,#080e1a 35%,#080e1a99 47%,transparent 65%,#080e1a55 100%)}.midnight-copy{width:100%;padding:30px 25px 480px}.midnight-copy h2{font-size:51px;margin:17px 0 20px}.midnight-copy p{font-size:13px}.midnight-copy .midnight-punchline{font-size:14px;margin-top:18px}.mutter-button{margin-top:20px}.midnight-bubble{top:auto;bottom:38%;right:20px;max-width:calc(100% - 40px);min-width:0}.midnight-label{font-size:6px;right:15px;bottom:20px}.midnight-log{grid-template-columns:1fr;margin-top:18px}.midnight-log>div{padding:15px 18px;gap:27px}.midnight-log>div+div{border-left:0;border-top:1px solid var(--line)}.midnight-log>div>span{min-width:40px}.midnight-log strong{font-size:12px}.midnight-footnote{flex-direction:column;gap:5px;font-size:9px}}
@media(max-width:420px){.midnight-copy{padding:28px 20px 460px}.midnight-copy h2{font-size:46px}.midnight-copy p{font-size:11px}.midnight-copy .midnight-punchline{font-size:13px}.midnight-lab{min-height:960px}.midnight-bubble{bottom:36%;padding:12px 15px;right:14px}.midnight-bubble>span{font-size:13px}.midnight-bubble small{font-size:9px}.midnight-art{object-position:68% center}.midnight-log{margin-top:15px}}

.cinema-paused .cosmos-stars{animation-play-state:paused}
@media(max-width:800px){
  .midnight-lab{display:flex;flex-direction:column;min-height:0}
  .midnight-copy{order:0;padding:30px 25px 17px;width:100%}
  .midnight-art{order:2;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;z-index:1;mask-image:linear-gradient(180deg,transparent,black 10%)}
  .midnight-bubble{order:1;position:relative;inset:auto;align-self:flex-end;margin:12px 23px -3px;max-width:calc(100% - 46px)}
  .midnight-shade{background:linear-gradient(180deg,#080e1a,transparent)}
  .midnight-label{z-index:3;bottom:13px;font-size:5px}
  .monitor-glow{z-index:2}
}
@media(max-width:420px){.midnight-copy{padding:28px 20px 17px}.midnight-bubble{margin-right:15px}}

.gaming-portrait{margin:29px 0 0;position:relative;isolation:isolate;border:1px solid #a5b68125;border-radius:6px;overflow:hidden;background:#101521}
.gaming-portrait img,.gaming-portrait video{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block}
.gaming-portrait figcaption{position:absolute;bottom:0;left:0;right:0;padding:29px 15px 12px;background:linear-gradient(transparent,#070b13ef);display:flex;flex-direction:column;gap:2px;pointer-events:none}
.gaming-portrait figcaption>span:first-child{font:7px var(--mono);letter-spacing:.13em;color:#d9f56c}
.gaming-portrait figcaption>span:last-child{font-size:10px;color:#d6dece}
.gaming-section .chapter-grid{align-items:start}
.gaming-section .shoot-machine{position:sticky;top:115px}
@media(max-width:800px){.gaming-section .shoot-machine{position:relative;top:auto}.gaming-portrait{max-width:580px}.gaming-portrait figcaption{padding-bottom:14px}}

/* A slow nebula tide moves independently from the nearby ringed world. */
.cosmos-window .cosmos-image-wrap{inset:-7%;translate:var(--look-x,0px) calc(var(--look-y,0px) + var(--nebula-shift-y,0px))}
.cosmos-window .cosmos-image-wrap::after{content:'';position:absolute;inset:-2%;background:url('./deep-space-nebula.png') 58% 50%/cover;mix-blend-mode:screen;opacity:.11;mask-image:radial-gradient(ellipse at 44% 26%,black 0%,transparent 68%);filter:blur(3px);animation:nebula-tide 46s ease-in-out infinite alternate;pointer-events:none}
.cosmos-dialog>.cosmos-nebula-background{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover;translate:var(--look-x,0px) var(--look-y,0px)}
.cosmos-planet-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;z-index:-3;pointer-events:none;translate:var(--planet-shift-x,0px) var(--planet-shift-y,0px);animation:none!important}
.cosmos-dialog>.cosmos-planet-fallback{inset:0;width:100%;height:100%;z-index:0;translate:var(--planet-shift-x,0px) var(--planet-shift-y,0px)}
@keyframes nebula-tide{from{transform:translate(-.6%,-.3%) scale(1.015);opacity:.07}to{transform:translate(1.2%,.7%) scale(1.035);opacity:.15}}
.cinema-paused .cosmos-image-wrap::after{animation-play-state:paused}
@media(max-width:800px){.cosmos-planet-fallback,.cosmos-dialog>.cosmos-planet-fallback{object-position:64% 50%}}
@media(prefers-reduced-motion:reduce){.cosmos-image-wrap::after{animation:none}}
html[data-motion=off] .cosmos-image-wrap::after{animation:none}

/* Three generated emblems share one transparent atlas and a coherent palette. */
.destination .destination-symbol{font-size:0;line-height:0;color:transparent;width:90px;height:90px;right:17px;top:12px;background-image:url('./world-icons.png');background-size:300% 100%;background-repeat:no-repeat;filter:drop-shadow(0 3px 9px #0007);transition:transform .65s var(--ease),filter .65s}
.destination-game .destination-symbol{background-position:0% 50%}.destination-ai .destination-symbol{background-position:50% 50%}.destination-space .destination-symbol{background-position:100% 50%}
.destination:hover .destination-symbol{transform:translateY(-3px) rotate(-6deg) scale(1.07);filter:drop-shadow(0 0 12px #aacaff23)}
@media(max-width:800px){.destination .destination-symbol{width:80px;height:80px;right:16px;top:13px}}
