/* The two identical groups make the rightward drift seamless. */
.hero-art.has-motion{display:block;overflow:hidden;scroll-snap-type:none}
.hero-track{display:flex;width:800%;height:100%;animation:gentle-drift-right 340s linear infinite;will-change:transform}
.hero-group{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:18px;padding-right:18px;width:50%;height:100%;flex-shrink:0}
.hero-art .hero-group img{width:100%;height:100%;min-width:0;object-fit:contain}
.is-paused .hero-track{animation-play-state:paused}
.motion-toggle{font:inherit;font-size:11px;letter-spacing:.03em;border:1px solid var(--line);border-radius:20px;padding:5px 12px;color:var(--muted);background:var(--paper);cursor:pointer;white-space:nowrap}
.motion-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero-foot{gap:12px}
.portrait-waiting{opacity:0;transform:translateY(64px);transition:opacity 1.25s ease-out,transform 1.4s cubic-bezier(.22,.61,.36,1)}
.portrait-waiting.portrait-arrived{opacity:1;transform:translateY(0)}
@keyframes gentle-drift-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:760px){.hero-track{width:2040vw;animation-duration:450s}.hero-group{gap:12px;padding-right:12px}.hero-foot{flex-wrap:wrap;height:auto;min-height:65px;padding:10px 0}.hero-foot>span{letter-spacing:.08em;font-size:9px}.motion-toggle{padding:4px 9px}}
@media(prefers-reduced-motion:reduce){.hero-track{animation:none;transform:none;will-change:auto}.portrait-waiting,.portrait-waiting.portrait-arrived{opacity:1;transform:none;transition:none}.motion-toggle{display:none}.hero-art.has-motion{overflow-x:auto}.hero-track{width:400%}.hero-group{width:100%}.hero-group[aria-hidden]{display:none}@media(max-width:760px){.hero-track{width:1020vw}}}