/**
 * marquee-pro.css — Seamless gap-free marquee.
 *
 * Two-set technique: JS renders [Set 1 | Set 2], measures Set 1's exact pixel
 * width, then animates translateX(0) → translateX(-set1Width). When the loop
 * restarts, Set 2 is in exactly the position Set 1 began → zero gap.
 *
 * No !important used. Specificity alone handles cascade ordering:
 *   styles.css  →  .tf-marquee .wrap-marquee          (0,2,0) slide-har animation
 *   this file   →  .tf-marquee .wrap-marquee          (0,2,0) later in cascade → wins, sets animation:none
 *   this file   →  .tf-marquee .wrap-marquee.mq--ready (0,3,0) higher specificity → wins, starts mq-scroll
 */

/* ── Kill the percentage-based slide-har from styles.css ─────────────────────
   Same specificity (0,2,0), later in load order → overrides without !important. */
.tf-marquee .wrap-marquee {
    animation: none;
    -webkit-animation: none;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── Seamless animation — applied by JS after measuring Set 1 width ───────────
   Specificity 0,3,0 beats the rule above (0,2,0) so animation:none is overridden. */
.tf-marquee .wrap-marquee.mq--ready {
    animation: mq-scroll var(--mq-dur, 20s) linear infinite;
    -webkit-animation: mq-scroll var(--mq-dur, 20s) linear infinite;
}

.tf-marquee .wrap-marquee.mq--ready:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* ── Keyframe: translate exactly one set-width (--mq-w is set by JS in px) ── */
@keyframes mq-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--mq-w, 50%))); }
}
@-webkit-keyframes mq-scroll {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(calc(-1 * var(--mq-w, 50%))); }
}

/* ── RTL support ──────────────────────────────────────────────────────────── */
.rtl .tf-marquee .wrap-marquee.mq--ready {
    animation-name: mq-scroll-rtl;
    -webkit-animation-name: mq-scroll-rtl;
}
@keyframes mq-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(1 * var(--mq-w, 50%))); }
}
@-webkit-keyframes mq-scroll-rtl {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(calc(1 * var(--mq-w, 50%))); }
}

/* ── Accessibility: slow down for users who prefer less motion ────────────── */
@media (prefers-reduced-motion: reduce) {
    .tf-marquee .wrap-marquee.mq--ready {
        animation-duration: 90s;
        -webkit-animation-duration: 90s;
    }
}