/* The original scene remains still; only the vehicle groups move. */
.hero-side.hero-motion-scene { aspect-ratio: 1; display: block; overflow: hidden; }
.hero-motion-scene .traffic-car { fill: #fff; stroke: #858581; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.hero-motion-scene .river-boat { fill: #fff; stroke: #858581; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.hero-motion-scene .boat-wake { fill: none; stroke: #acaca7; stroke-width: .8; opacity: .55; }
.hero-motion-toggle { position: absolute; right: 26px; bottom: 5px; z-index: 8; border: 1px solid #ddd; border-radius: 20px; background: #fff; color: #777; padding: 5px 11px; font: 11px var(--font-sans); cursor: pointer; }
.hero-motion-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media(max-width:880px) { .hero-side.hero-motion-scene { width: min(118%,34vh); max-height: 34vh; } .hero-motion-toggle { right: 14px; bottom: 2px; font-size: 10px; } }

#hero.hero-motion-paused .cloud-track, #hero.hero-motion-paused .sky-plane { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) { #hero .cloud-track, #hero [class*="plane-"] { animation: none !important; } }

.sky-plane .jet { filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); }
.plane-1 .jet { width: 78px; } .plane-2 .jet { width: 54px; } .plane-3 .jet { width: 65px; }
.contrail { opacity: .35; background: linear-gradient(to right,transparent,#b9c5cd); height: 1px; }

.random-flight .jet { width: var(--jet-size); }
.random-flight .contrail { width: 46px; margin-right: -3px; }
@media(max-width:880px) { .random-flight .jet { width: var(--jet-mobile-size); } .random-flight .contrail { width: 22px; } }