.motion-picker{padding:20px var(--pad) 14px;background:#fff;border-bottom:1px solid #e3e8ee;position:relative;z-index:2}
.motion-picker strong{font-size:14px}.motion-picker>div{display:inline-flex;gap:8px;margin-left:24px;flex-wrap:wrap}
.motion-picker button{font:500 13px Poppins,sans-serif;padding:9px 14px;border:1px solid #d5dfe9;border-radius:6px;background:white;color:#31465b;cursor:pointer}
.motion-picker button[aria-pressed=true]{background:#2f7fe8;border-color:#2f7fe8;color:white}
.motion-picker p{font-size:13px;color:#526171;margin:12px 0 0}
.dhero .device-drift{animation:none!important}
.dhero .signal-run{fill:none;stroke:#2687ec;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:22 260;stroke-dashoffset:282;animation:run-path 3.6s linear infinite;animation-delay:var(--offset)}
@keyframes run-path{to{stroke-dashoffset:0}}
.dhero[data-motion=focus] .callout{opacity:1;animation:feature-turn 12s ease-in-out infinite;animation-delay:var(--focus-delay)}
.dhero[data-motion=focus] .label{transition:fill .3s}
.dhero .focus-rule{stroke:#2f7fe8;stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:left;animation:focus-rule 12s ease-in-out infinite;animation-delay:var(--focus-delay)}
@keyframes feature-turn{0%,22%,100%{opacity:1}28%,94%{opacity:.55}}
@keyframes focus-rule{0%,18%{transform:scaleX(1);opacity:1}24%,94%{transform:scaleX(.04);opacity:0}100%{transform:scaleX(1);opacity:1}}
.dhero .wireless-wave{fill:none;stroke:#2f7fe8;stroke-width:1.4;opacity:0;transform-origin:313px 180px;animation:wireless-wave 4.8s ease-out infinite;animation-delay:var(--offset)}
@keyframes wireless-wave{0%{transform:scale(.75);opacity:0}20%{opacity:.45}100%{transform:scale(1.8);opacity:0}}
.dhero .data-packet{fill:#2f7fe8;animation:data-packet 3s ease-in-out infinite;animation-delay:var(--offset)}
@keyframes data-packet{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:.8;transform:translateY(-8px)}}
@media(max-width:700px){.motion-picker>div{margin:12px 0 0;display:flex}}
@media(prefers-reduced-motion:reduce){.dhero .signal-run,.dhero .wireless-wave,.dhero .data-packet,.dhero .focus-rule{animation:none!important}.dhero[data-motion=focus] .callout{animation:none!important;opacity:1}}

.dhero .signal-run{stroke-dasharray:10 100;stroke-dashoffset:10;opacity:0;animation:signal-travel 3.6s linear infinite both;animation-delay:var(--offset)}
@keyframes signal-travel{0%{stroke-dashoffset:10;opacity:0}5%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.hero.wireless-hero{position:relative;isolation:isolate;overflow:hidden}
.wireless-hero>.hero-text,.wireless-hero>.dhero{position:relative;z-index:1}
.wireless-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.wireless-ring{position:absolute;box-sizing:border-box;border:solid var(--signal-colour,#2f7fe8);border-radius:50%;opacity:0;will-change:transform,opacity;animation:ring-spread 8s linear 1 both}
@keyframes ring-spread{0%{transform:scale(var(--ring-start));opacity:.38}12%{opacity:.28}65%{opacity:.16}100%{transform:scale(1);opacity:0}}
.wireless-hero:has(.dhero.paused) .wireless-ring{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wireless-ring{animation:none!important;opacity:0}}

body[data-motion-study="field"] .hero{border-bottom:1px solid #e1e7ee}

/* Switch quickly; rings emit only once either antenna is selected. */
.dhero[data-motion="field"] .rf-switch{animation-name:rfselect-fast;animation-delay:2.15s;animation-fill-mode:both}
@keyframes rfselect-fast{0%,47%,100%{transform:translateX(0)}50%,97%{transform:translateX(140px)}}

.dhero[data-motion="field"] .rf-switch{animation:none;transition:transform .21s ease-in-out}