/* ==========================================================
   LYNX ROLEPLAY v12 — true continuous marquee loops
   Motion is driven by requestAnimationFrame in slider-loop.js.
   ========================================================== */

/* Heading spacing retained from v11. */
.tech-heading h2 {
  line-height: 1.12 !important;
}
.tech-heading h2 em {
  display: inline-block;
  margin-top: .14em;
}

/* Disable legacy CSS keyframe animations: JS owns transform now. */
.hero-marquee-track,
.tech-marquee-track {
  display: flex !important;
  width: max-content !important;
  min-width: max-content !important;
  flex-wrap: nowrap !important;
  animation: none !important;
  animation-play-state: running !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  contain: layout style;
}

.hero-marquee-group,
.tech-marquee-group {
  flex: 0 0 auto !important;
}

/* Never switch either ticker to manual horizontal scrolling. */
.hero-marquee,
.tech-marquee {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Hover must never pause either loop. */
.hero-marquee:hover .hero-marquee-track,
.tech-marquee:hover .tech-marquee-track {
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  /* These two intentional ambient marquees remain enabled. */
  .hero-marquee-track,
  .tech-marquee-track {
    animation: none !important;
    transition: none !important;
  }
  .hero-marquee,
  .tech-marquee {
    overflow: hidden !important;
  }
}

@media (max-width: 560px) {
  .tech-heading h2 {
    line-height: 1.14 !important;
  }
  .tech-heading h2 em {
    margin-top: .16em;
  }
}