/* Motion is an enhancement of the approved artwork; no layout or image ratios change. */
.ambience-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .hero-content,.footer-inner{z-index:1}
.footer-inner{position:relative}
.motion-enabled .hero .hero-visual img,.motion-enabled .hero .hero-characters img{transition:transform .7s cubic-bezier(.2,.65,.3,1)}
.motion-enabled .hero.has-camera .hero-visual img{transform:scale(1.012) translate(var(--camera-x,0px),var(--camera-y,0px))}
.motion-enabled .hero.has-camera .hero-characters img{transform:translate(var(--depth-x,0px),var(--depth-y,0px))}
.motion-toggle{position:absolute;right:var(--hero-inset);bottom:22px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 13px;border:1px solid #fff6;background:#071017bb;color:#fff;font-size:14px;line-height:1.2}
.motion-toggle:hover{border-color:white;background:#071017}
.motion-toggle:disabled{cursor:default;opacity:.7}
.motion-glyph{display:flex;gap:4px;align-items:center;justify-content:center;width:16px;height:18px}
.motion-glyph i{display:block;width:3px;height:12px;background:currentColor}
.motion-toggle[aria-pressed="false"] .motion-glyph i:first-child{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;background:none}
.motion-toggle[aria-pressed="false"] .motion-glyph i:last-child{display:none}
.hero::after{content:"";position:absolute;pointer-events:none;z-index:0;right:3%;bottom:-15%;width:65%;height:65%;background:radial-gradient(ellipse,#ff612119,transparent 68%);opacity:0}
.motion-enabled:not(.dialog-open) .hero.is-in-view::after{animation:festival-light 7s ease-in-out infinite alternate}
.hero .trailer-launch>.play-disc,.power-launch>.play-disc{position:relative}
.motion-enabled .hero .trailer-launch.is-play-hover>.play-disc,.motion-enabled .power-launch.is-play-hover>.play-disc{transform:translate(var(--play-x,0px),var(--play-y,0px)) scale(1.06)}
.hero .trailer-launch>.play-disc::before,.hero .trailer-launch>.play-disc::after,.power-launch>.play-disc::before,.power-launch>.play-disc::after{content:"";position:absolute;inset:-7px;border:1px solid #fff8;border-radius:50%;pointer-events:none;opacity:0}
.motion-enabled:not(.dialog-open) .hero.is-in-view .trailer-launch>.play-disc::before,
.motion-enabled:not(.dialog-open) .hero.is-in-view .trailer-launch>.play-disc::after,
.motion-enabled:not(.dialog-open) .powers.is-in-view .power-launch>.play-disc::before,
.motion-enabled:not(.dialog-open) .powers.is-in-view .power-launch>.play-disc::after{animation:signal-ring 3.6s cubic-bezier(.15,.65,.3,1) infinite}
.motion-enabled:not(.dialog-open) .hero.is-in-view .trailer-launch>.play-disc::after,
.motion-enabled:not(.dialog-open) .powers.is-in-view .power-launch>.play-disc::after{animation-delay:1.8s}
.motion-enabled .hero .trailer-launch:active>.play-disc,.motion-enabled .power-launch:active>.play-disc{transform:scale(.95)}
.motion-enabled .text-link .icon{transition:transform .24s ease}
.motion-enabled .text-link:hover .icon,.motion-enabled .text-link:focus-visible .icon{transform:translateX(5px)}
.motion-enabled .explore-link:hover .icon,.motion-enabled .explore-link:focus-visible .icon{transform:translateY(5px)}
.motion-enabled .button:active,.motion-enabled .icon-button:active{transform:translateY(1px) scale(.97)}
.motion-enabled .mobile-nav:not([hidden]){animation:menu-open .25s ease both}

/* The original commander composition remains whole, with a light behind the selected name. */
.commander-illustration::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(ellipse at 28% 62%,#b6c9952c,transparent 50%)}
.motion-enabled .commanders[data-focus="ren"] .commander-illustration::after,.motion-enabled .commanders[data-focus="aya"] .commander-illustration::after{opacity:1}
.commanders[data-focus="aya"] .commander-illustration::after{background:radial-gradient(ellipse at 67% 66%,#8abce137,transparent 48%)}
.motion-enabled .commander-art img{transition:transform .4s ease}
.motion-enabled .commanders[data-focus="ren"] .commander-art img{transform:translateX(2px)}
.motion-enabled .commanders[data-focus="aya"] .commander-art img{transform:translateX(-2px)}
.commander-names strong{position:relative}
.commander-names strong::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#e92a19;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.commander-names a:hover strong::after,.commander-names a:focus-visible strong::after{transform:scaleX(1)}
.unit-inspect{display:block;position:relative;isolation:isolate;width:100%;padding:0;border:0;background:transparent;line-height:0}
.unit-inspect::after{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:0;height:12%;background:radial-gradient(ellipse,#bd382226,transparent 66%);opacity:0;transition:opacity .3s ease}
.unit-inspect:hover::after,.unit-inspect:focus-visible::after{opacity:1}
.motion-enabled .unit-inspect:hover img,.motion-enabled .unit-inspect:focus-visible img{filter:drop-shadow(0 10px 10px #10131622)}
.motion-enabled .unit-inspect img{transition:filter .3s ease,transform .4s cubic-bezier(.2,.65,.3,1)}
.motion-enabled .unit-inspect:hover img,.motion-enabled .unit-inspect:focus-visible img{transform:perspective(900px) translateY(-9px) rotateY(var(--tilt-x,-3deg)) rotateX(var(--tilt-y,0deg))}
.unit-models figure:has(.unit-inspect:hover) figcaption,.unit-models figure:has(.unit-inspect:focus-visible) figcaption{color:var(--red)}

/* A transient hover frame sits above the unchanged native screenshot. */
.screenshot{position:relative;isolation:isolate}
.screenshot::before{content:"";position:absolute;inset:5px;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(#e92a19,#e92a19) left top/26px 2px,linear-gradient(#e92a19,#e92a19) left top/2px 26px,linear-gradient(#e92a19,#e92a19) right top/26px 2px,linear-gradient(#e92a19,#e92a19) right top/2px 26px,linear-gradient(#e92a19,#e92a19) left bottom/26px 2px,linear-gradient(#e92a19,#e92a19) left bottom/2px 26px,linear-gradient(#e92a19,#e92a19) right bottom/26px 2px,linear-gradient(#e92a19,#e92a19) right bottom/2px 26px;background-repeat:no-repeat;transition:opacity .22s ease}
.screenshot:hover::before,.screenshot:focus-visible::before{opacity:1}
.powers .screenshot::after{content:"";position:absolute;pointer-events:none;z-index:1;inset:0;background:linear-gradient(90deg,transparent,#fff9,#ff502bcc,transparent) center/100% 2px no-repeat;opacity:0}
.motion-enabled .powers .screenshot:hover::after,.motion-enabled .powers .screenshot:focus-visible::after{animation:tactical-scan 2.5s ease-out both}
.audio-toggle>.audio-label{position:relative;padding-right:42px}
.sound-meter{position:absolute;right:0;top:50%;margin-top:-12px;display:flex;align-items:center;gap:3px;height:24px;width:32px}
.sound-meter i{display:block;background:var(--red);width:3px;height:22px;transform:scaleY(.12);opacity:.45}
.sound-meter i:nth-child(2){height:15px}.sound-meter i:nth-child(4){height:18px}
.motion-enabled:not(.dialog-open) .audio-section.is-in-view .is-playing .sound-meter i{animation:sound-bar 1.05s ease-in-out infinite alternate;opacity:1}
.motion-enabled .is-playing .sound-meter i:nth-child(2){animation-delay:-.6s;animation-duration:.88s}
.motion-enabled .is-playing .sound-meter i:nth-child(3){animation-delay:-.2s;animation-duration:1.2s}
.motion-enabled .is-playing .sound-meter i:nth-child(4){animation-delay:-.8s;animation-duration:.95s}
.motion-enabled .is-playing .sound-meter i:nth-child(5){animation-delay:-.35s;animation-duration:1.1s}
.audio-sample{transition:border-color .3s ease,box-shadow .3s ease}
.audio-sample.is-playing{border-color:var(--red);box-shadow:0 0 0 1px #d7352525,0 6px 25px #d7352515}
.motion-enabled .audio-section:has(.is-playing) .audio-art img{filter:drop-shadow(0 0 16px #d7352518)}
.motion-enabled .accordions summary .icon{transition:transform .24s ease}
.motion-enabled .accordions summary:hover .icon,.motion-enabled .accordions summary:focus-visible .icon{transform:rotate(90deg)}
.motion-enabled .signup-panel:focus-within{box-shadow:0 0 0 2px #ffffff55,0 0 35px #ffbaa51a}
.motion-enabled dialog::backdrop{animation:media-backdrop .25s ease both}
@supports (transition-behavior:allow-discrete){
  .motion-enabled dialog{opacity:0;transition:opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}
  .motion-enabled dialog[open]{opacity:1}
}
@keyframes festival-light{from{opacity:.25;transform:scale(.97)}to{opacity:.95;transform:scale(1.03)}}
@keyframes signal-ring{0%{opacity:0;transform:scale(.96)}20%{opacity:.5}100%{opacity:0;transform:scale(1.36)}}
@keyframes tactical-scan{0%{opacity:0;transform:translateY(-50%)}15%{opacity:.75}85%{opacity:.35}100%{opacity:0;transform:translateY(50%)}}
@keyframes sound-bar{0%{transform:scaleY(.2)}35%{transform:scaleY(.7)}70%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@keyframes media-backdrop{from{background:#0003}to{background:#000c}}
@keyframes menu-open{from{opacity:.3;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.motion-toggle{padding:10px;min-width:44px}.motion-label{display:none}}
@media(prefers-reduced-motion:reduce){.ambience-canvas,.hero::after{display:none}.motion-glyph i{opacity:.6}}