/* Two equal groups advance one group per cycle, preserving the gap at the seam. */
#public .feature-window { overflow: hidden; padding-block: 3px 8px; }
#public #features[data-ready=true] .feature-track {
  display: flex; width: max-content; direction: ltr;
  animation: feature-flow 12s linear infinite;
  animation-play-state: paused;
}
#public #features[data-motion=running] .feature-track { animation-play-state: running; }
#public #features[data-ready=true] .feature-grid {
  display: grid; grid-template-columns: repeat(5,clamp(245px,calc((92.8vw - 65px)/5),298px));
  gap: 13px; padding-inline-end: 13px; flex: none;
}
#public #features[data-ready=true] .feature-grid article { min-height: 151px; grid-column: auto; grid-row: auto; }
#public #features .feature-window:hover .feature-track,
#public #features .feature-window:focus-within .feature-track { animation-play-state: paused; }
.feature-motion-controls { display: flex; justify-content: flex-end; padding-top: 2px; }
#feature-motion-toggle {
  display: grid; place-items: center; width: 30px; height: 28px; padding: 0;
  border: 1px solid #bc934c70; border-radius: 8px; color: #edcd85;
  background: #161208bb; font-size: 15px; line-height: 1;
}
#feature-motion-toggle:hover { background: #352811; }
[dir=rtl] #public .feature-grid article { direction: rtl; }
/* In RTL the max-content track is anchored to the right edge, so it must advance
   rightward; sliding it left (even reversed) exposes an empty window. */
@media(prefers-reduced-motion:no-preference) {
  [dir=rtl] #public #features[data-ready=true]:not([data-reduced=true]) .feature-track { direction: rtl; animation-name: feature-flow-rtl; }
}
@keyframes feature-flow { to { transform: translateX(-50%); } }
@keyframes feature-flow-rtl { to { transform: translateX(50%); } }
#public #features[data-reduced=true] .feature-track { width: 100%; animation: none; transform: none; }
#public #features[data-reduced=true] .feature-grid {
  width: 100%; padding: 0; grid-template-columns: repeat(auto-fit,minmax(min(100%,245px),1fr));
}
#public #features[data-reduced=true] .feature-repeat { display: none; }
@media(prefers-reduced-motion:reduce) {
  #public #features .feature-track { width: 100%; animation: none; transform: none; }
  #public #features .feature-grid { width: 100%; padding: 0; grid-template-columns: repeat(auto-fit,minmax(min(100%,245px),1fr)); }
  #public #features .feature-repeat { display: none; }
}