/* Cinematic opening: layered transforms, immediately readable copy. */
.system-drift{position:absolute;inset:0;transform-style:preserve-3d}
.plane-arrival{position:absolute;inset:0;transform-style:preserve-3d}
.reactor-portal{position:absolute;left:50%;top:67%;width:650px;height:650px;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-28deg);pointer-events:none;opacity:calc(.92 - var(--assembly)*.7)}
.portal-dial{position:absolute;inset:0;border-radius:50%;border:1px solid #ad6c463b;background:conic-gradient(from 35deg,transparent 0deg,#ff8a4260 65deg,#ffe2ac 90deg,transparent 93deg,transparent 220deg,#ff956660 285deg,#ffb87e 307deg,transparent 310deg);mask-image:radial-gradient(closest-side,transparent 98.6%,#000 99%);transform:rotate(0deg)}
.portal-inner{inset:58px;opacity:.7;background:conic-gradient(from 120deg,transparent,#ff976552 90deg,#ffd6a4 110deg,transparent 113deg,transparent 250deg,#ff976565 300deg,transparent 320deg);mask-image:radial-gradient(closest-side,transparent 98%,#000 98.5%);border-style:dashed;border-color:#cc815447}
.portal-field{position:absolute;inset:45px;border-radius:50%;background:radial-gradient(ellipse,#ff671419,transparent 70%);border:1px solid #bf73442a}
.hero-horizon{position:absolute;left:44%;top:69%;width:62%;height:1px;background:linear-gradient(90deg,transparent,#dc773156 25%,#ffc09290 50%,#bb613034 78%,transparent);transform:rotate(-15deg);box-shadow:0 0 20px #fb844040;opacity:.65}
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-particles i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffb87e;box-shadow:0 0 9px #ff945459;opacity:.35}
.hero-particles i:nth-child(3n){width:2px;height:2px;background:#ffe4cb}
.intro-wave{position:absolute;inset:10px -55px -10px;border:1px solid #fd976351;border-radius:50%;transform:scale(.8);opacity:0;pointer-events:none}
.emblem-light{position:absolute;inset:-26px 15px;z-index:-1;background:radial-gradient(ellipse,#ff814a25,transparent 68%);opacity:.6;pointer-events:none}
.hero-motion-controls{position:absolute;right:max(40px,calc((100% - 1280px)/2));top:117px;z-index:9;display:flex;gap:7px}
.hero-motion-controls[hidden]{display:none}
.hero-motion-controls button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #c1a09242;color:#ddc7bd;background:#171515bd;font:17px/1 var(--font);transition:background .2s,border-color .2s}
.hero-motion-controls button:hover{background:#442b22;border-color:#ffac826a}
.hero-motion-controls button:focus-visible{outline:2px solid #ffb899;outline-offset:4px}
.hero-motion-ready{--hero-play:running}
.hero-motion-ready[data-motion=paused]{--hero-play:paused}
.hero-motion-ready .system-drift{animation:system-breathe 7s ease-in-out infinite;animation-play-state:var(--hero-play)}
.hero-motion-ready .portal-dial{animation:portal-rotation 16s linear infinite;animation-play-state:var(--hero-play)}
.hero-motion-ready .portal-inner{animation-duration:23s;animation-direction:reverse}
.hero-motion-ready .portal-field{animation:field-breathe 5s ease-in-out infinite;animation-play-state:var(--hero-play)}
.hero-motion-ready .hero-particles i{animation:spark-rise var(--duration) ease-in-out infinite;animation-delay:var(--delay);animation-play-state:var(--hero-play)}
.hero-motion-ready .emblem-light{animation:core-light 4.5s ease-in-out infinite;animation-play-state:var(--hero-play)}
.hero-motion-ready .scene-tag-top{animation:tag-hover 6s ease-in-out infinite;animation-play-state:var(--hero-play)}
.hero-motion-ready .plane-edge:after{content:'';position:absolute;inset:-1px 0;max-width:50px;border-radius:50%;background:linear-gradient(90deg,transparent,#fff0cd,transparent);opacity:0;animation:edge-current 4.2s ease-in-out infinite;animation-play-state:var(--hero-play)}
.flow-plane .plane-edge:after{animation-delay:1.1s}.data-plane .plane-edge:after{animation-delay:2.2s}
.hero-motion-ready.is-arriving .arrival-data{animation:arrive-data 1.65s cubic-bezier(.16,.8,.18,1) both;animation-play-state:var(--hero-play)}
.hero-motion-ready.is-arriving .arrival-flow{animation:arrive-flow 1.8s .12s cubic-bezier(.16,.8,.18,1) both;animation-play-state:var(--hero-play)}
.hero-motion-ready.is-arriving .arrival-app{animation:arrive-app 2s .2s cubic-bezier(.16,.8,.18,1) both;animation-play-state:var(--hero-play)}
.hero-motion-ready.is-arriving .reactor-portal{animation:portal-open 2.2s ease-out both;animation-play-state:var(--hero-play)}
.hero-motion-ready.is-arriving .intro-wave{animation:arrival-wave 2.2s .25s ease-out both;animation-play-state:var(--hero-play)}
.hero-motion-ready.is-arriving .system-drift{animation-play-state:paused}
.hero-motion-ready[data-scene="2"] .system-drift{animation-play-state:paused}
.hero-motion-ready[data-motion=paused] .system-object{will-change:auto}
@keyframes system-breathe{0%,100%{transform:translate3d(0,4px,0) rotateZ(-1.2deg)}50%{transform:translate3d(0,-19px,0) rotateZ(1.5deg)}}
@keyframes portal-rotation{to{transform:rotate(360deg)}}
@keyframes field-breathe{0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes spark-rise{0%{transform:translate3d(0,28px,0);opacity:0}20%{opacity:.65}80%{opacity:.25}100%{transform:translate3d(12px,-62px,0);opacity:0}}
@keyframes core-light{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes tag-hover{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes edge-current{0%,12%{transform:translateX(-50px);opacity:0}20%{opacity:.9}72%{opacity:.9}85%,100%{transform:translateX(355px);opacity:0}}
@keyframes arrive-data{from{transform:translate3d(-220px,90px,-480px) rotateZ(-28deg);opacity:0}35%{opacity:1}to{transform:translate3d(0,0,0) rotateZ(0deg);opacity:1}}
@keyframes arrive-flow{from{transform:translate3d(260px,-90px,-240px) rotateZ(24deg);opacity:0}30%{opacity:1}to{transform:translate3d(0,0,0) rotateZ(0deg);opacity:1}}
@keyframes arrive-app{from{transform:translate3d(40px,-160px,420px) rotateY(-38deg);opacity:0}28%{opacity:1}to{transform:translate3d(0,0,0) rotateY(0deg);opacity:1}}
@keyframes portal-open{from{opacity:0;scale:.35}to{opacity:.92;scale:1}}
@keyframes arrival-wave{0%{opacity:0;transform:scale(.24)}35%{opacity:.65}100%{opacity:0;transform:scale(1.45)}}
@media(min-width:1600px){.reactor-portal{width:740px;height:740px}.hero-motion-controls{right:max(70px,calc((100% - 1480px)/2))}}
@media(max-width:1200px) and (min-width:761px){.hero-motion-controls{right:40px;top:109px}.reactor-portal{width:615px;height:615px}}
@media(max-width:760px){.hero-motion-controls{top:auto;right:20px;bottom:80px;gap:6px}.hero-motion-controls button{width:36px;height:36px;font-size:17px}.reactor-control{right:auto;left:20px;transform:none;min-height:36px;gap:10px;padding-inline:13px}.reactor-portal{top:65%;width:650px;height:650px}.hero-horizon{left:-35%;top:auto;bottom:21%;width:165%;transform:rotate(-13deg)}.hero-particles{top:50%;left:-50%;width:150%;height:45%}.hero-particles i:nth-child(n+7){display:none}.intro-wave{inset:10px -35px -10px}}
@media(max-width:360px){.reactor-control{left:16px;font-size:8px;gap:8px;padding-inline:10px}.hero-motion-controls{right:16px}.hero-motion-controls button{width:34px;height:36px}}
@media(max-height:600px) and (min-width:761px){.hero-motion-controls{top:105px}}
@media(prefers-reduced-motion:reduce){.hero-motion-ready *, .hero-motion-ready *:before,.hero-motion-ready *:after{animation:none!important}.hero-motion-controls,.intro-wave,.hero-particles{display:none}.system-drift,.plane-arrival{transform:none!important}.reactor-portal{scale:1;opacity:.6}.portal-field{opacity:.5}.portal-dial{transform:none}.hero-motion-ready .plane-edge:after{display:none}}