.motion-component{--progress:0;--spread:0px;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:40%;--depth:0px;min-width:0;color:#152747}.motion-component .motion-scene{position:relative;isolation:isolate;background:#e5f3ff;border:1px solid #b9d8f5;aspect-ratio:1.33;max-height:540px;border-radius:8px;overflow:hidden;touch-action:pan-y;outline-offset:5px}.motion-component .motion-scene:focus-visible{outline:3px solid #f26338}.motion-component .scene-caption{position:absolute;left:24px;top:23px;font-size:8px;letter-spacing:.1em;z-index:4}.motion-component .scene-caption.right{left:auto;right:24px}.motion-component .light{position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff73,transparent 63%);opacity:.75;transition:opacity .3s;pointer-events:none}.motion-component .rig{position:absolute;inset:4% 1% 3%;perspective:1000px;transform-style:preserve-3d;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .25s ease}.motion-component .layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:filter .25s;pointer-events:none}.motion-component .layer-base{transform:translateY(calc(var(--spread)*.35));filter:drop-shadow(0 16px 15px #31588740)}.motion-component .layer-middle{transform:translateY(calc(var(--spread)*-.45 - var(--depth)*.45));filter:drop-shadow(0 9px 7px #2b4d844b)}.motion-component .layer-top{transform:translateY(calc(var(--spread)*-1.1 - var(--depth)));filter:drop-shadow(0 11px 9px #2b4d8448)}.motion-component .layer-connections{opacity:calc(var(--progress)*.65);transition:opacity .2s}.motion-component .orbit-line{position:absolute;width:60%;height:31%;border:1px solid #b6d5f0;border-radius:100%;left:20%;top:34%;transform:rotate(-18deg);z-index:-1}.motion-component .orbit-two{width:78%;height:43%;left:11%;top:27%;transform:rotate(18deg)}.motion-component .scene-bottom{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:12px;font-size:8px;letter-spacing:.1em;z-index:3}.motion-component .progress-readout{font-variant-numeric:tabular-nums;letter-spacing:0;font-weight:700}.motion-component .motion-controls{display:flex;align-items:center;gap:10px;padding-top:15px}.motion-component .motion-controls button{font-family:inherit;min-height:44px;cursor:pointer;border-radius:3px;font-size:10px;color:inherit;background:transparent;border:1px solid #aabdd8;padding:0 17px;display:inline-flex;justify-content:center;align-items:center;gap:9px}.motion-component .motion-controls .activate{background:#245ada;color:#fff;border-color:#245ada;min-width:154px}.motion-component .activate i{width:6px;height:6px;border-radius:100%;background:#c4d8ff}.motion-component.is-active .activate i{background:#ffe787;box-shadow:0 0 8px #ffe785}.motion-component .motion-controls .reset{margin-left:auto;border-color:transparent;padding:0 8px}.motion-component .signal-status{font-size:9px;color:#53677f;line-height:1.6;margin:10px 0 13px;min-height:15px}.motion-component .manual-control{display:flex;gap:18px;align-items:center;font-size:9px;color:#53677f}.motion-component .manual-control label{white-space:nowrap}.motion-component .manual-control input{width:100%;min-width:60px;accent-color:#245ada;height:26px;cursor:pointer}.motion-component .motion-option{font-size:9px;display:inline-flex;align-items:center;gap:8px;min-height:36px;color:#53677f;cursor:pointer}.motion-component .motion-option input{accent-color:#245ada;width:16px;height:16px}.motion-component .scene-help{font-size:8px;line-height:1.6;color:#53677f;max-width:520px;margin:0}.motion-component .motion-controls button:focus-visible,.motion-component .progress-input:focus-visible,.motion-component .reduced-input:focus-visible{outline:3px solid #f26338;outline-offset:4px}.motion-component .packet{opacity:0;transform-origin:350px 340px}.motion-component.is-active .packet{opacity:1;animation:signal-flow 2.5s linear infinite}.motion-component .signal-ring{stroke:#94eaff;transition:stroke .2s,opacity .2s;opacity:.35}.motion-component.is-active .signal-ring{stroke:#fff3a5;opacity:1}.motion-component .led{fill:#ff924c;transition:fill .25s}.motion-component.is-active .led{fill:#ffe981}.motion-component .core-glow{opacity:.28;transition:opacity .3s}.motion-component.is-active .core-glow{opacity:.7}.motion-component.is-exploring .motion-scene{background:#dbedff}.motion-component.is-exploring .light{opacity:1}.motion-component.is-exploring .layer-top{filter:drop-shadow(0 19px 13px #284b8255)}.motion-component.is-offscreen .packet,.motion-component.is-hidden .packet{animation-play-state:paused}.motion-component.reduced-motion .rig{transition:none;transform:none}.motion-component.reduced-motion .layer,.motion-component.reduced-motion .light,.motion-component.reduced-motion .motion-scene,.motion-component.reduced-motion .led,.motion-component.reduced-motion .core-glow{transition:none}.motion-component.reduced-motion .packet{animation:none}.motion-component.reduced-motion .layer-connections{transition:none}
@keyframes signal-flow{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@media(max-width:700px){.motion-component .motion-scene{aspect-ratio:1.03;max-height:none}.motion-component .rig{inset:2% -5% 2%}.motion-component .scene-caption{top:17px;left:17px;font-size:7px}.motion-component .scene-caption.right{right:17px}.motion-component .scene-bottom{left:17px;right:17px;bottom:17px;font-size:7px}.motion-component .motion-controls{gap:6px;padding-top:10px}.motion-component .motion-controls button{font-size:9px;padding:0 11px;min-height:44px}.motion-component .motion-controls .activate{min-width:138px}.motion-component .motion-controls .reset{padding:0 5px}.motion-component .manual-control{gap:12px;font-size:8px}.motion-component .signal-status{font-size:8px;margin:8px 0}.motion-component .scene-help{font-size:7px}.motion-component .motion-option{font-size:8px}}
@media(max-width:360px){.motion-component .motion-controls .activate{min-width:123px}.motion-component .motion-controls button{padding:0 7px;font-size:8px}.motion-component .manual-control{display:block}.motion-component .manual-control input{display:block;width:100%;height:26px}.motion-component .scene-help{font-size:7px}.motion-component .scene-caption.right{display:none}}
@media(prefers-reduced-motion:reduce){.motion-component .rig,.motion-component .layer,.motion-component .light,.motion-component .led,.motion-component .core-glow{transition:none}}