/* Dashboard Live Feed is an explicitly controllable status surface. Its
   continuous movement is isolated to transform so it remains compositor-smooth. */
@keyframes trygc-live-feed-marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--marquee-distance, -25%), 0, 0); }
}

.animate-marquee,
.animate-marquee-reverse,
html[data-trygc-page="index"] .animate-marquee,
html[data-trygc-page="index"] .animate-marquee-reverse {
  animation-name: trygc-live-feed-marquee !important;
  animation-duration: var(--marquee-duration, 70s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform;
  backface-visibility: hidden;
}

.animate-marquee:not([data-paused="true"]),
.animate-marquee-reverse:not([data-paused="true"]),
html[data-trygc-page="index"] .animate-marquee:not([data-paused="true"]),
html[data-trygc-page="index"] .animate-marquee-reverse:not([data-paused="true"]) {
  animation-play-state: running !important;
}

.animate-marquee-reverse,
html[data-trygc-page="index"] .animate-marquee-reverse {
  animation-direction: reverse !important;
}

.animate-marquee[data-paused="true"],
.animate-marquee-reverse[data-paused="true"],
html[data-trygc-page="index"] .animate-marquee[data-paused="true"],
html[data-trygc-page="index"] .animate-marquee-reverse[data-paused="true"] {
  animation-play-state: paused !important;
}

/* The React feed can recalculate its travel distance while paused. Keep the
   visual position fixed until the user explicitly resumes it. */
html[data-trygc-page="index"] .animate-marquee[data-paused="true"][data-trygc-feed-frozen="true"],
html[data-trygc-page="index"] .animate-marquee-reverse[data-paused="true"][data-trygc-feed-frozen="true"] {
  transform: var(--trygc-feed-paused-transform) !important;
}

/* Do not make a status feed compete with an explicit OS reduced-motion choice. */
@media (prefers-reduced-motion: reduce) {
  html[data-trygc-page="index"] .animate-marquee,
  html[data-trygc-page="index"] .animate-marquee-reverse {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
  }
}