/**
 * TG Marquee
 * Continuous, CSS-only ticker. The message group is rendered three times in
 * the template; animating the track by -100%/3 (one group) loops seamlessly
 * and keeps a short ticker filling wide viewports. Color + background
 * come from the section (Advanced tab); text size via the c-heading-* class.
 */
.tg-marquee-section {}

.tg-marquee {
  overflow: hidden;
  width: 100%;
  margin: 0 0 0.5rem; /* neutralize heading-class margins; 0.5rem bottom for button breathing room */
  padding: 0.2em 0; /* vertical breathing room so nothing sits at the clip edge */
}

.tg-marquee__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation: tg-marquee-scroll 65s linear infinite; /* default = Medium */
}

.tg-marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.tg-marquee__item {
  white-space: nowrap;
  margin: 0;         /* reset margins from the heading-style class */
  line-height: 1.4;  /* room for descenders (g, y, p) so they aren't clipped */
}

.tg-marquee__sep {
  padding: 0 0.75em;
}

@keyframes tg-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); } /* shift exactly one of the 3 groups → seamless */
}

/* Speed — higher seconds = slower scroll. Fast ≈ the old "Slow"; range extends much slower. */
.tg-marquee--fast .tg-marquee__track    { animation-duration: 40s; }
.tg-marquee--medium .tg-marquee__track  { animation-duration: 65s; }
.tg-marquee--slow .tg-marquee__track    { animation-duration: 90s; }
.tg-marquee--slower .tg-marquee__track  { animation-duration: 130s; }
.tg-marquee--slowest .tg-marquee__track { animation-duration: 180s; }

/* Direction — Right reverses the scroll */
.tg-marquee--right .tg-marquee__track { animation-direction: reverse; }

/* Pause on hover */
.tg-marquee--pause:hover .tg-marquee__track { animation-play-state: paused; }

/* Accessibility — stop motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tg-marquee__track { animation: none; }
}