/* ============================
   REVEAL GLOBAL + CASCADE
   ============================ */

/* Base des widgets à révéler */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

/* État visible */
.reveal.active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Dans l'éditeur Elementor : pas d'anim, tout visible */
body.elementor-editor-active .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* Éléments avec no-reveal : toujours visibles, pas d'animation */
/* Spécificité élevée pour surcharger .reveal.active */
/* IMPORTANT : Ces règles doivent être appliquées AVANT toute transition */
.no-reveal,
.no-reveal.reveal,
.no-reveal.reveal.active,
.no-reveal.reveal-lines,
.no-reveal.reveal-lines.is-visible,
.no-reveal.reveal-words,
.no-reveal.reveal-words.is-visible,
.no-reveal.reveal-chars,
.no-reveal.reveal-chars.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

/* Forcer l'état visible immédiatement, même si l'élément a déjà .active */
.elementor-widget.no-reveal,
.elementor-widget.no-reveal.reveal,
.elementor-widget.no-reveal.reveal.active {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* Désactiver les animations Splitting pour no-reveal */
.no-reveal.reveal-lines .line,
.no-reveal.reveal-lines.is-visible .line,
.no-reveal.reveal-words .word,
.no-reveal.reveal-words.is-visible .word,
.no-reveal.reveal-chars .char,
.no-reveal.reveal-chars.is-visible .char {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* ============================
   REVEAL SPLITTING
   Lignes / Mots / Caractères
   ============================ */

/* RESET commun */
.reveal-lines,
.reveal-words,
.reveal-chars {
  display: inline-block;
  position: relative;
}

.reveal-lines .line,
.reveal-words .word,
.reveal-chars .char {
  display: inline-block;
}

/* ======================
   1) LIGNE PAR LIGNE
   ====================== */

.reveal-lines .line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--line-index) * 150ms);
}

.reveal-lines.is-visible .line {
  opacity: 1;
  transform: translateY(0);
}

/* ======================
   2) MOT PAR MOT
   ====================== */

.reveal-words .word {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.2, .9, .3, 1);
  transition-delay: calc(var(--word-index) * 80ms);
}

.reveal-words.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* ======================
   3) CARACTÈRE PAR CARACTÈRE
   Version B — Effet spring/pop
   ====================== */

.reveal-chars .char {
  opacity: 0;
  transform: scale(0.85) translateY(0.3em);
  transition:
    opacity .3s ease-out,
    transform .6s cubic-bezier(.22, 1.25, .36, 1);
  transition-delay: calc(var(--char-index) * 30ms);
}

.reveal-chars.is-visible .char {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Optionnel : pour ton hero, ligne 2 décalée */
.reveal-chars .hero-sub .char {
  transition-delay: calc(300ms + var(--char-index) * 22ms);
}
/* Empêcher la coupure au milieu d'un mot avec Splitting */

.reveal-chars {
  word-break: normal;
  overflow-wrap: normal;
}

/* Chaque mot devient un bloc indivisible */
.reveal-chars .word {
  display: inline-block;
  white-space: nowrap; /* interdit la coupure dans le mot */
}