/**
 * Texte storytelling — révélation au défilement, lettre après lettre.
 *
 * Trois états : en attente (couleur discrète), dans la vague (accent), révélé
 * (couleur définitive). La transition CSS lisse le passage d'un état à l'autre,
 * pour que le front de la vague ne « saute » pas d'une lettre à la suivante.
 */

/* Couleurs par défaut : la palette BEJOY sur fond crème — noir pour le texte
   acquis, brun de la maison pour l'accent, noir très dilué pour l'attente. */
.bejoy-story {
  --story-idle: rgba(0, 0, 0, 0.16);
  --story-accent: #4f392d;
  --story-on: #000000;
  --story-wave: 12;     /* lettres teintées par l'accent */
  --story-span: 0.6;    /* part de hauteur d'écran parcourue pour tout révéler */
  margin: 0;
  display: block;
}

/* Un mot ne doit jamais se couper : chaque lettre étant un élément à part,
   le navigateur pourrait sinon passer à la ligne en plein milieu. */
.bejoy-story__w {
  display: inline-block;
  white-space: nowrap;
}

.bejoy-story__c {
  color: var(--story-idle);
  transition: color 0.35s var(--bj-ease-out, ease);
  will-change: color;
}

/* Dans la vague : en attente → accent → révélé. Deux mélanges enchaînés, pilotés
   par --ta (montée vers l'accent) puis --tb (descente vers la couleur finale) ;
   aux deux extrémités la couleur rejoint exactement l'état voisin, donc aucun
   saut visible en entrée ni en sortie de vague. */
.bejoy-story__c.is-wave {
  color: color-mix(
    in oklab,
    color-mix(in oklab, var(--story-idle), var(--story-accent) calc(var(--ta, 0) * 100%)),
    var(--story-on) calc(var(--tb, 0) * 100%)
  );
  transition: none;     /* la position dans la vague fait déjà la progression */
}

.bejoy-story__c.is-on {
  color: var(--story-on);
}

/* Sans color-mix (navigateurs anciens) : l'accent marque quand même le front,
   la révélation reste parfaitement lisible. */
@supports not (color: color-mix(in oklab, #000 50%, #fff)) {
  .bejoy-story__c.is-wave { color: var(--story-accent); }
}

/* Éditeur Elementor : texte en clair, sinon il serait invisible dans le canevas
   (la révélation dépend du défilement de la page, qui n'a pas lieu ici). */
.bejoy-story--static,
.bejoy-story--static .bejoy-story__c,
.bejoy-story--static .bejoy-story__c.is-wave {
  color: var(--story-on);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .bejoy-story__c,
  .bejoy-story__c.is-wave { color: var(--story-on); transition: none; }
}