body{background:linear-gradient(135deg,#101c2c 0%,#04090f 48%,#122032 100%);background-attachment:fixed;isolation:isolate}
.ambient-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#8398b30d 1px,transparent 1px),linear-gradient(90deg,#8398b30d 1px,transparent 1px);background-size:60px 60px}
.ambient-axis{position:absolute;background:#9cbed01a;animation:ambient-draw 2s ease-out both}.ambient-axis.horizontal{height:1px;left:0;right:0;top:25%;transform-origin:left}.ambient-axis.vertical{width:1px;top:0;bottom:0;left:80%;transform-origin:top}
.ambient-grid>i{position:absolute;width:3px;height:3px;border-radius:50%;background:#b6d8fb;opacity:.2;box-shadow:0 0 9px #93beff70;animation:ambient-float 7s ease-in-out infinite}
.ambient-cursor{position:fixed;left:0;top:0;width:360px;height:360px;pointer-events:none;z-index:45;opacity:0;background:radial-gradient(circle,#a8c8f00c,transparent 68%);border-radius:50%;transition:opacity .3s;will-change:transform}
.ambient-ripple{position:fixed;z-index:110;pointer-events:none;width:12px;height:12px;border:1px solid #a7d1ff90;border-radius:50%;animation:ambient-ripple .75s ease-out both}
.hero-copy h1 .motion-word,.motion-word{display:inline-block;white-space:nowrap}.motion-word{transition:text-shadow .25s}.motion-word:hover{text-shadow:0 0 22px #c5dbf04d}
@keyframes ambient-draw{from{opacity:0;scale:.1}to{opacity:1;scale:1}}
@keyframes ambient-float{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(7px,-18px);opacity:.5}}
@keyframes ambient-ripple{from{transform:translate(-50%,-50%) scale(.4);opacity:.8}to{transform:translate(-50%,-50%) scale(7);opacity:0}}
/* Unboxed controller; longer scroll runway and substantially larger artwork. */
.hero-sequence{height:2600px}.hero-cinematic{overflow:visible}
.hero-cinematic .hero-visual.controller-visual{background:none;border:0;border-radius:0;overflow:visible;isolation:auto;height:560px}
.controller-showcase{overflow:visible;perspective:1100px}.controller-rig{scale:1.24;transform-origin:0 0;top:44%}.controller-showcase::before{display:none}
.controller-model-label{border:0;left:10px;bottom:5px}.controller-face{filter:drop-shadow(0 1px 0 #cce4ff)}
.controller-stick{background:repeating-radial-gradient(circle at center,#25374a 0 1px,#172637 2px 3px);box-shadow:0 8px 0 #07121e,0 12px 8px #02060baa,inset 0 2px 3px #8293a877}
.controller-body::after{content:'';position:absolute;left:148px;top:75px;width:102px;height:42px;transform:translateZ(27px);border-radius:3px;background:radial-gradient(#b1c7df45 .65px,transparent .9px);background-size:4px 4px;pointer-events:none}
@media(max-width:1100px) and (min-width:651px){.controller-rig{scale:.94}.hero-sequence{height:2350px}}
@media(max-width:650px){.hero-sequence{height:auto;padding-bottom:1250px}.hero-cinematic{top:-310px;overflow:hidden}.hero-cinematic .hero-visual.controller-visual{height:380px;overflow:visible}.controller-rig{scale:.84;top:39%}.controller-model-label{left:8px;bottom:10px}.ambient-cursor,.ambient-ripple{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-grid>i,.ambient-axis{animation:none;opacity:.2}.ambient-cursor,.ambient-ripple{display:none}.hero-sequence{height:auto;padding-bottom:0}.hero-cinematic{top:auto}.controller-rig{scale:1.1}.motion-word{transform:none!important;filter:none!important;opacity:1!important}}
@media(max-width:650px) and (prefers-reduced-motion:reduce){.controller-rig{scale:.8}}