/* Formaly-T — effets vivants (activables via Tweaks → classes body.fx-*) */

/* ── Barre de progression de lecture ── */
.lecture-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 300;
  pointer-events: none;
  display: none;
}
body.fx-progress .lecture-bar { display: block; }
.lecture-bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ── Titres révélés mot à mot ── */
@media (prefers-reduced-motion: no-preference) {
  body.fx-titres .wsplit .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0 0.16em 0.13em;
    margin: 0 -0.16em -0.13em;
  }
  body.fx-titres .wsplit .wi {
    display: inline-block;
    transform: translateY(118%);
    transition: transform 0.85s var(--ease);
    transition-delay: var(--wd, 0s);
  }
  body.fx-titres .wsplit.ws-in .wi { transform: none; }
}

/* ── Cartes inclinées en 3D (transform posé en JS) ── */
body.fx-tilt .offer,
body.fx-tilt .tst-card,
body.fx-tilt .audience-card { will-change: transform; }

/* ── Compteurs mécaniques (odomètre) ── */
.counter.od {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
}
.od-col {
  display: block;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.od-d {
  display: block;
  height: 1em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── Marquee réactif : ralentit au survol et s'incline ── */
@media (prefers-reduced-motion: no-preference) {
  body.fx-marquee .marquee-track { animation: none; }
  body.fx-marquee .marquee {
    transition: transform 0.5s var(--ease);
  }
  body.fx-marquee .marquee:hover {
    transform: rotate(-0.9deg) scale(1.012);
  }
}