/* The artwork itself is the motion control; static until JavaScript is ready. */
.hero[data-motion-ready="true"] [data-hero-art="motif"]{cursor:pointer;touch-action:manipulation}
.hero[data-motion-ready="true"] [data-hero-art="motif"]:focus-visible{
  outline:2px solid #c6e3f5;outline-offset:-4px;
}

@media(prefers-reduced-motion:no-preference){
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column{
    --split-time:22s;--phase:-3s;
    position:relative;overflow:hidden;border-radius:999px;
  }
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column:nth-child(3n+1){--split-time:26s;--phase:-11s}
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column:nth-child(3n+2){--split-time:21s;--phase:-7s}
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column:nth-child(even){--phase:-13s}
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column:nth-child(5n){--phase:-17s;--split-time:24s}
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column i{
    position:absolute;inset:0;width:100%;height:100%;min-height:0;
    will-change:transform;
    animation:hero-upper-gap var(--split-time) cubic-bezier(.37,0,.63,1) var(--phase) infinite;
  }
  body[data-hero-design="panorama"] .hero[data-motion-ready="true"] .capsule-column i+i{animation-name:hero-lower-gap}
  body[data-hero-design="panorama"] .hero[data-motion-paused="true"] .capsule-column i{animation-play-state:paused}
}
/* Full-height segments slide inside a fixed rounded column. Only transforms
   animate: no per-frame flex layout, no scaling of the rounded ends.
   Matching translations carry a constant 10px gap from 45% to 80%. */
@keyframes hero-upper-gap{0%,100%{transform:translate3d(0,calc(-55% - 5px),0)}50%{transform:translate3d(0,calc(-20% - 5px),0)}}
@keyframes hero-lower-gap{0%,100%{transform:translate3d(0,calc(45% + 5px),0)}50%{transform:translate3d(0,calc(80% + 5px),0)}}