/* 041-letter-cascade — révélation du texte lettre par lettre (stagger + blur) */

.letter-cascade {
  /* Options (surchargables, ou via data-attributes côté JS) */
  --letter-cascade-stagger: 42ms;   /* délai entre deux lettres */
  --letter-cascade-duration: 700ms; /* durée de la transition d'une lettre */
  --letter-cascade-y: 0.65em;       /* amplitude verticale de départ */
  --letter-cascade-blur: 10px;      /* flou de départ */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.letter-cascade__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
}

.letter-cascade__text {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ml-fg, #e8eaf2);
}

/* Le JS garde les mots insécables pour un retour à la ligne propre */
.letter-cascade__word {
  display: inline-block;
  white-space: nowrap;
}

.letter-cascade__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--letter-cascade-y, 0.65em));
  filter: blur(var(--letter-cascade-blur, 10px));
  transition:
    opacity var(--letter-cascade-duration, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--letter-cascade-duration, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
    filter calc(var(--letter-cascade-duration, 700ms) * 0.8) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--letter-cascade-i, 0) * var(--letter-cascade-stagger, 42ms));
  will-change: transform, filter;
}

.letter-cascade--in .letter-cascade__letter {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.letter-cascade__replay {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ml-muted, #8b91a3) 35%, transparent);
  background: color-mix(in srgb, var(--ml-surface, #151a24) 70%, transparent);
  color: var(--ml-muted, #8b91a3);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.letter-cascade__replay:hover {
  color: var(--ml-accent, #7c8cff);
  border-color: color-mix(in srgb, var(--ml-accent, #7c8cff) 55%, transparent);
}

.letter-cascade__replay:focus-visible {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 2px;
}

.letter-cascade__replay:active {
  transform: scale(0.96);
}

/* État transitoire posé par le JS au replay : les lettres retournent à l'état
   caché d'un coup, sans transition ni stagger, avant de rejouer la cascade. */
.letter-cascade--reset .letter-cascade__letter {
  transition: none;
}

/* Mode statique (posé par le JS quand prefers-reduced-motion: reduce) */
.letter-cascade--static .letter-cascade__replay {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .letter-cascade__letter {
    transition: none;
  }
}