/* ==========================================================================
   NOFAIL · Animations de texte de la landing
   --------------------------------------------------------------------------
   Pilotées par js/ui/landing-animations.js. Principe : sans JavaScript ou
   avec « réduire les animations », tout le texte est visible et immobile.
   Les états de départ ne s'appliquent que sous html.anim (classe ajoutée
   par le script), jamais par défaut.
   ========================================================================== */

/* ---------- 1. Titre : mots qui montent un par un ---------- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em; /* évite de couper les jambages */
}
.split-word__inner { display: inline-block; }
.anim .split-word__inner {
  transform: translateY(105%);
  animation: word-up .7s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes word-up { to { transform: translateY(0); } }

/* Le dernier mot (« vide. ») se fait barrer au surligneur, comme le logo.
   Le trait est sur le mot intérieur : il monte avec lui et reste dans le masque. */
.split-word--strike .split-word__inner { position: relative; }
.split-word--strike .split-word__inner::after {
  content: "";
  position: absolute;
  left: -2%;
  top: 54%;
  width: 104%;
  height: .12em;
  background: var(--c-signal);
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 2px;
}
.anim .split-word--strike .split-word__inner::after { animation: strike-x .6s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 900ms); }
@keyframes strike-x { to { transform: scaleX(1); } }

/* ---------- 2. Phrase tournante « NOFAIL … » ---------- */
.rotator {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .35em;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  margin-top: calc(var(--space-2) * -1);
}
.rotator__lead { color: var(--fg-muted); }
.rotator__window {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  color: var(--accent);
}
/* Toutes les phrases occupent la même cellule : la fenêtre prend la largeur de la plus longue. */
.rotator__word { grid-area: 1 / 1; white-space: nowrap; }
.rotator__word:not(.is-active) { visibility: hidden; }
.anim .rotator__word { visibility: visible; transform: translateY(110%); transition: transform .55s var(--ease), opacity .55s var(--ease); opacity: 0; }
.anim .rotator__word.is-active { transform: translateY(0); opacity: 1; }
.anim .rotator__word.is-leaving { transform: translateY(-110%); opacity: 0; }

/* ---------- 3. Bulle IA : machine à écrire ---------- */
.typer { min-height: 3.2em; }
.anim .typer.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--ai);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- 4. Bandeau défilant d'exemples ---------- */
.marquee {
  margin-top: var(--space-7);
  border-block: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: 14px;
}
.marquee__track li { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.marquee__track strong { font-weight: 700; }
.marquee__track span { color: var(--fg-muted); }
.marquee__track em { font-style: normal; color: var(--accent); font-size: 12px; }
.marquee__track li::after { content: "／"; margin-left: var(--space-5); color: var(--fg-faint); }
/* Avec animation : une seule ligne qui défile en boucle (la liste est dupliquée par le script). */
.anim .marquee__track { flex-wrap: nowrap; width: max-content; animation: marquee 48s linear infinite; }
.anim .marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 5. Apparition au défilement ---------- */
.anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 6. Douleurs : la plainte se fait barrer, la réponse arrive ---------- */
.anim .pain__quote-text {
  background: linear-gradient(var(--alert), var(--alert)) no-repeat 0 62% / 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .7s var(--ease), color .7s var(--ease);
}
.anim .pain .pain__answer { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.anim .pain.is-visible .pain__quote-text { background-size: 100% 2px; color: var(--fg-muted); transition-delay: calc(var(--i) * 90ms); }
.anim .pain.is-visible .pain__answer { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms + 600ms); }

/* ---------- Réduire les animations : tout reste lisible et immobile ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .split-word__inner,
  .anim .rotator__word,
  .anim [data-reveal],
  .anim .pain .pain__answer { transform: none !important; opacity: 1 !important; animation: none !important; }
  .anim .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
}