/* ============================================================
   Marquee — CSS replacement for Framer's Ticker component
   ------------------------------------------------------------
   Framer rendered horizontal tickers as a <ul> with an inline
   transform:translateX(...) (and often an opacity:0 wrapper),
   then drove the scroll + reveal with JS. marquee.js strips
   those placeholders, duplicates the items for a seamless loop,
   and adds .fx-marquee — the scroll itself is this CSS keyframe.
   Used on: index (video ticker), about, work-physicswallah,
   youtube (image marquees).
   ============================================================ */

.fx-marquee {
  width: max-content !important;
  opacity: 1 !important;
  transform: translateX(0);
  will-change: transform;
  animation: fx-marquee-scroll var(--fx-marquee-dur, 50s) linear infinite;
}

.fx-marquee:hover {
  animation-play-state: paused;
}

@keyframes fx-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-marquee { animation: none; transform: none; }
}