:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero{perspective:1100px}.network{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 650ms var(--motion-ease)}.network-lines{animation:network-float 9s ease-in-out infinite}.signal{stroke-dasharray:22 180;animation-duration:8s}.node-ripples{fill:none;stroke:#a1caff;stroke-width:1}.node-ripples circle{transform-box:fill-box;transform-origin:center;animation:node-ripple 4.5s ease-out infinite}.node-ripples circle:nth-child(2){animation-delay:-1.4s}.node-ripples circle:nth-child(3){animation-delay:-2.8s}.node-ripples circle:nth-child(4){animation-delay:-.7s}.node-ripples circle:nth-child(5){animation-delay:-3.5s}
.motion-toggle{position:absolute;bottom:14px;right:72px;min-height:44px;appearance:none;background:transparent;border:1px solid #34445c;border-radius:4px;color:#b9cbe4;padding:8px 14px;font:inherit;font-size:11px;cursor:pointer;transition:background 180ms,border-color 180ms}.motion-toggle:hover{background:#1b2c43;border-color:#7294c0}.motion-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.motion-toggle[hidden]{display:none}
.header nav a{position:relative}.header nav a::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:#aacdff;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--motion-ease)}.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.button svg,.text-link span{transition:transform 240ms var(--motion-ease)}.button:hover svg{transform:translateX(5px)}.button:active{transform:translateY(0) scale(.98)}.text-link:hover span{transform:translateY(-4px)}.principles article::before{transform-origin:left;transition:transform 400ms var(--motion-ease)}.principles article:hover::before{transform:scaleX(2.5)}.scenario-list article{position:relative;isolation:isolate}.scenario-list article::before{content:"";position:absolute;inset:0 -18px;background:linear-gradient(90deg,#243a54a0,transparent);opacity:0;z-index:-1;transition:opacity 300ms var(--motion-ease)}.scenario-list article:hover::before{opacity:1}.scenario-list h3{transition:transform 300ms var(--motion-ease),color 300ms}.scenario-list article:hover h3{transform:translateX(6px);color:#b6d4ff}
@keyframes network-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes node-ripple{0%{transform:scale(.3);opacity:.65}70%,100%{transform:scale(1.6);opacity:0}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.page-hidden *{animation-play-state:paused!important}.motion-paused .network{transform:none;transition:none}.network-offscreen .network-lines,.network-offscreen .signal,.network-offscreen .node-ripples circle{animation-play-state:paused}
@media(max-width:1100px){.motion-toggle{right:40px}}
@media(max-width:680px){.hero{padding-bottom:68px}.motion-toggle{right:24px;bottom:18px}.network{transform:none}.scenario-list article::before{inset-inline:-10px}}
@media(prefers-reduced-motion:reduce){.network{transform:none;transition:none}.node-ripples{display:none}.network-lines,.signal{animation:none}.motion-toggle{display:none}.header nav a::after,.button svg,.text-link span,.principles article::before,.scenario-list h3,.scenario-list article::before{transition:none}.button:hover,.button:hover svg,.text-link:hover span,.scenario-list article:hover h3{transform:none}}
