.hero-cinematic .hero-visual.controller-visual{background:radial-gradient(ellipse at 50% 42%,#1b3b59 0,#0b1928 48%,#08121d 78%);overflow:hidden}
.controller-showcase{position:absolute;inset:0;perspective:850px;overflow:hidden}
.controller-showcase::before{content:'PLAY';position:absolute;top:28px;left:25px;font:700 140px/1 var(--display);color:#9dccff08;letter-spacing:.02em;pointer-events:none}
.controller-rig{position:absolute;left:50%;top:43%;width:400px;height:280px;transform:translate(-50%,-50%);transform-style:preserve-3d}
.controller-body{position:relative;width:400px;height:280px;transform-style:preserve-3d;transform:rotateX(24deg) rotateY(-28deg) rotateZ(-14deg);will-change:transform}
.controller-slice,.controller-face,.controller-controls{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.controller-slice svg,.controller-face svg{width:100%;height:100%;overflow:visible}.controller-face{transform:translateZ(25px)}.controller-controls{transform:translateZ(38px)}
.controller-stick{position:absolute;top:136px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 27%,#3a4e62,#111d2b 75%);border:3px solid #415368;box-shadow:0 7px 0 #050e18,0 10px 8px #02060b88,inset 0 0 0 3px #1a2a3b}.controller-stick.left{left:138px}.controller-stick.right{left:222px}
.controller-dpad{position:absolute;left:76px;top:91px;width:48px;height:48px;filter:drop-shadow(0 5px 1px #0008)}.controller-dpad i,.controller-dpad b{position:absolute;background:linear-gradient(135deg,#425469,#142334);border:1px solid #52657a;border-radius:3px}.controller-dpad i{left:16px;width:16px;height:48px}.controller-dpad b{top:16px;width:48px;height:16px}
.controller-buttons{position:absolute;left:282px;top:89px;width:58px;height:58px}.controller-buttons span{position:absolute;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#3e5265,#111f2d);border:1px solid #6c859c;box-shadow:0 4px 0 #0a1420;color:#badfff;font:15px sans-serif}.controller-buttons span:nth-child(1){left:18px;top:0}.controller-buttons span:nth-child(2){left:36px;top:18px}.controller-buttons span:nth-child(3){left:18px;top:36px}.controller-buttons span:nth-child(4){left:0;top:18px}
.controller-floor{position:absolute;left:20%;right:20%;top:67%;height:35px;background:#0009;filter:blur(15px);border-radius:50%;transform:scaleX(.9)}
.controller-model-label{position:absolute;bottom:28px;left:28px;right:28px;display:grid;gap:10px;border-top:1px solid #48769a50;padding-top:19px}.controller-model-label span{font-size:9px;letter-spacing:.18em;color:#7fbaff}.controller-model-label b{font:700 34px/1 var(--display);color:#edf6ff}.controller-model-label small{font-size:10px;color:#9db3c9}
@media(max-width:1100px) and (min-width:651px){.controller-rig{scale:.78;transform-origin:0 0}.controller-model-label b{font-size:27px}}
@media(max-width:650px){.controller-rig{scale:.74;transform-origin:0 0;top:38%}.controller-model-label{bottom:17px;left:20px;right:20px;gap:7px;padding-top:12px}.controller-model-label b{font-size:26px}.controller-model-label small{font-size:9px}.controller-showcase::before{font-size:105px;top:20px}.controller-floor{top:61%}}
@media(prefers-reduced-motion:reduce){.controller-body{transform:rotateX(22deg) rotateY(-18deg) rotateZ(-10deg)!important;will-change:auto}}
.controller-webgl{position:absolute;inset:0 0 90px;pointer-events:none;z-index:2}.controller-webgl canvas{width:100%;height:100%;display:block}.real-model-ready .controller-rig,.real-model-ready .controller-floor{visibility:hidden}.real-model-ready .controller-model-label small{font-size:0}.real-model-ready .controller-model-label small::after{content:'Scroll to explore · Textured DualSense 3D model';font-size:10px}