.hero-motion{width:540px;max-width:100%;margin-top:32px;text-align:left;border-top:1px solid #ffffff70;padding-top:14px}
.motion-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;font:600 12px var(--body);color:#eee}
.motion-toggle{background:none;border:0;border-bottom:1px solid #aaa;color:#ddd;font:500 11px var(--body);padding:4px 0;cursor:pointer}
.motion-scene{height:140px;display:flex;align-items:center;gap:30px;position:relative}
.motion-copy{display:grid;gap:5px;font:500 12px var(--body)}
.motion-copy strong{font-size:16px;margin-bottom:5px;color:#fff}
.motion-copy span{color:#ddd}
.campaign-pieces{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:4px;flex:none}
.campaign-pieces i{display:block;background:#ed2531;animation:piece-assemble 7s infinite;animation-delay:calc(var(--i)*.18s);transform-origin:center}
.campaign-pieces i:nth-child(2),.campaign-pieces i:nth-child(4){background:#fff}
.campaign-pieces i:nth-child(3),.campaign-pieces i:nth-child(5){background:#ff9a9f}
@keyframes piece-assemble{0%,100%{transform:translateY(10px) rotate(10deg);opacity:.4}25%,78%{transform:none;opacity:1}}
.public-service{display:grid;gap:8px;width:360px;max-width:85%}
.public-service>div{display:flex;gap:12px;align-items:center;border-bottom:1px solid #ffffff35;padding:7px 0;font:600 14px var(--body)}
.public-service i{width:9px;height:9px;border:1px solid #fff;border-radius:50%;animation:service-select 6s infinite;animation-delay:calc(var(--i)*2s)}
.public-service b{margin-left:auto;color:#ff8c94;animation:choice-confirm 6s infinite;animation-delay:calc(var(--i)*2s)}
.service-path{display:flex;flex-direction:column;gap:9px;border-left:1px dashed #fff6;padding-left:14px}
.service-path i{width:22px;height:6px;background:#fff;animation:service-select 6s infinite}
.service-path i:nth-child(2){animation-delay:2s}.service-path i:nth-child(3){animation-delay:4s}
@keyframes service-select{0%,34%,100%{background:#fff3}10%,26%{background:#ed2531}}
@keyframes choice-confirm{0%,34%,100%{opacity:.25;transform:scale(.8)}10%,26%{opacity:1;transform:scale(1)}}
.route-map{width:100%;height:112px;position:relative;margin-top:10px}
.route-line{position:absolute;left:6%;right:6%;height:2px;top:40px;background:repeating-linear-gradient(90deg,#ff7d87 0 8px,transparent 8px 14px)}
.route-stop{position:absolute;top:26px;display:flex;align-items:center;flex-direction:column;gap:15px;transform:translateX(-50%);font:600 13px var(--body)}
.route-stop>i{width:28px;height:28px;background:#17171a;border:2px solid #fff;transform:rotate(45deg);border-radius:5px}
.stop-0{left:6%}.stop-1{left:50%}.stop-2{left:94%}
.route-traveller{position:absolute;top:34px;left:6%;width:14px;height:14px;border-radius:50%;background:#ff3745;z-index:2;animation:wayfinding-trip 8s infinite}
@keyframes wayfinding-trip{0%,8%{left:6%}40%,55%{left:50%}88%,100%{left:94%}}
.sound-scene{width:100%;max-width:410px}
.sound-beams{display:flex;align-items:center;justify-content:center;gap:13px;height:108px;border-bottom:1px solid #ffffff40}
.sound-beams i{height:var(--height);max-height:98px;width:6px;border-radius:3px;background:#fff;transform-origin:center;animation:sound-response 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.23s)}
.sound-beams i:nth-child(3n){background:#ff4552}
.sound-caption{display:flex;justify-content:space-around;font:500 12px var(--body);padding-top:10px}
@keyframes sound-response{0%,100%{transform:scaleY(.35);opacity:.65}45%{transform:scaleY(1);opacity:1}}
.simulation-model{position:relative;width:155px;height:128px;flex:none}
.model-layer{position:absolute;left:26px;top:38px;width:95px;height:55px;border:2px solid #fff;background:#ffffff18;transform:skewY(-18deg);animation:model-align 7s infinite}
.layer-one{--distance:-27px;border-color:#ff6470;background:#c0112460;z-index:3}.layer-two{--distance:0px;z-index:2}.layer-three{--distance:27px;z-index:1}
.model-axis{position:absolute;left:74px;top:12px;height:108px;width:1px;border-left:1px dashed #ffffff60}
.simulation-steps{display:grid;gap:14px;font:500 13px var(--body)}
.simulation-steps span{border-left:2px solid #ff5b67;padding-left:12px}
@keyframes model-align{0%,100%{transform:translateY(var(--distance)) skewY(-18deg)}45%,70%{transform:translateY(0) skewY(-18deg)}}
.hero-motion[data-paused=true] *,.hero-motion.is-offscreen *{animation-play-state:paused!important}
.buyer-page[data-buyer=D] .hero-motion{margin-inline:auto}
.buyer-page[data-buyer=C] .hero-photo{object-position:70% center}
.buyer-page[data-buyer=B] .hero-photo{object-position:center}
.buyer-hero .shell{padding-block:62px 32px}
@media(max-width:600px){.hero-motion{margin-top:28px}.motion-scene{height:150px;gap:20px}.campaign-pieces{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(2,30px);gap:3px}.motion-copy strong{font-size:14px}.motion-copy{font-size:11px}.motion-heading{font-size:11px}.motion-toggle{font-size:10px}.route-map{width:88%;margin-inline:auto}.route-stop{font-size:11px}.simulation-model{width:110px}.model-layer{left:12px;width:78px}.model-axis{left:50px}.simulation-steps{font-size:11px;gap:14px}.buyer-hero .shell{padding-block:40px 20px}.buyer-page h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){.hero-motion *{animation:none!important}.motion-toggle{display:none}.route-traveller{left:50%}.sound-beams i{transform:none}.model-layer{transform:translateY(var(--distance)) skewY(-18deg)}.public-service b{opacity:1}}