/* Slowmotion ADV — animation. The motifs made runnable: cuts, wipes, slides, travel,
   sequence. Nothing bounces, nothing springs, nothing fades up on scroll. Durations and
   easings come from motion.css; prefers-reduced-motion is neutralised globally in base.css. */

@keyframes smCut { from { opacity: 0 } to { opacity: 1 } }
@keyframes smSlideIn { from { transform: translate3d(-16px,0,0); clip-path: inset(0 100% 0 0) } to { transform: none; clip-path: inset(0 0 0 0) } }
@keyframes smSlideUp { from { transform: translate3d(0,16px,0); clip-path: inset(100% 0 0 0) } to { transform: none; clip-path: inset(0 0 0 0) } }
@keyframes smWipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes smFlash { 0% { background-color: var(--sm-yellow) } 100% { background-color: transparent } }
@keyframes smNudge { 0%, 55% { transform: none } 70% { transform: translateX(4px) } 100% { transform: none } }
@keyframes smTravel { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes smDraw { from { stroke-dashoffset: var(--sm-draw-len, 1200) } to { stroke-dashoffset: 0 } }
@keyframes smAccentPulse { 0%, 45% { fill: var(--sm-yellow) } 50%, 95% { fill: none } 100% { fill: var(--sm-yellow) } }
@keyframes smFill { from { width: 0 } to { width: var(--sm-fill, 100%) } }

/* Entrances. `both` keeps the start frame before the delay, so nothing flashes. */
.sm-anim-cut { animation: smCut var(--dur-instant) steps(1, end) both }
.sm-anim-slide { animation: smSlideIn var(--dur-base) var(--ease-out) both }
.sm-anim-slide-up { animation: smSlideUp var(--dur-base) var(--ease-out) both }
.sm-anim-wipe { animation: smWipe var(--dur-slow) var(--ease-in-out) both }
.sm-anim-flash { animation: smFlash var(--dur-base) var(--ease-cut) both }
.sm-anim-nudge { animation: smNudge 2.4s var(--ease-out) infinite }

/* Sequence: children arrive one frame at a time, 80ms apart — the index motif in time. */
.sm-seq > * { animation: smCut var(--dur-instant) steps(1, end) both }
.sm-seq > *:nth-child(1) { animation-delay: 0ms }
.sm-seq > *:nth-child(2) { animation-delay: 80ms }
.sm-seq > *:nth-child(3) { animation-delay: 160ms }
.sm-seq > *:nth-child(4) { animation-delay: 240ms }
.sm-seq > *:nth-child(5) { animation-delay: 320ms }
.sm-seq > *:nth-child(6) { animation-delay: 400ms }
.sm-seq > *:nth-child(7) { animation-delay: 480ms }
.sm-seq > *:nth-child(8) { animation-delay: 560ms }
.sm-seq > *:nth-child(n+9) { animation-delay: 640ms }