/* =====================================================================
   ENSO Animated Title — Widget Elementor
   Le titre est découpé en mots (.word) puis en lettres (.char).
   Chaque .char reçoit un délai --d (calculé en JS ; sinusoïdal pour la vague).
   L'animation se déclenche quand le conteneur reçoit la classe .is-in.
   ===================================================================== */

.enso-atitle{
  --dur: 900ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --start: 0ms;
  --stagger: 45ms;
  --wave-amp: 120ms;
  --wave-freq: .6;
  --accent: #C0402E;
  display: block;
}
.enso-atitle-link{ text-decoration: none; color: inherit; display: inline-block; }
.enso-atitle-text{ margin: 0; }

.enso-atitle .word{ display: inline-block; white-space: normal; }
.enso-atitle .char{
  display: inline-block; white-space: pre;
  will-change: transform, opacity, filter, clip-path; backface-visibility: hidden;
}

/* Masqué seulement une fois le découpage prêt (pas de flash, pas de casse sans JS) */
.enso-atitle.enso-ready .char{ opacity: 0; }

/* Propriétés communes d'animation au déclenchement */
.enso-atitle.is-in .char{
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
}

/* =====================================================================
   TYPES D'ANIMATION
   ===================================================================== */

/* Vague (signature) — l'ondulation vient des délais sinusoïdaux (JS) */
@keyframes ensoWave{ from{ opacity:0; transform: translateY(1.05em) rotate(3deg);} to{ opacity:1; transform:none;} }
.enso-atitle[data-anim="wave"].is-in .char{ animation-name: ensoWave; }

/* Tracé d'encre — balayage gauche→droite + fondu de flou (comme un coup de pinceau) */
@keyframes ensoInk{
  0%{ opacity:0; clip-path: inset(0 100% 0 0); filter: blur(6px);}
  55%{ opacity:1; }
  100%{ opacity:1; clip-path: inset(0 0 0 0); filter: blur(0);}
}
.enso-atitle[data-anim="ink"].is-in .char{ animation-name: ensoInk; }

/* Encre verticale — balayage haut→bas */
@keyframes ensoBrushDown{
  0%{ opacity:0; clip-path: inset(0 0 100% 0); filter: blur(5px);}
  100%{ opacity:1; clip-path: inset(0 0 0 0); filter: blur(0);}
}
.enso-atitle[data-anim="brush-down"].is-in .char{ animation-name: ensoBrushDown; }

/* Montée en fondu */
@keyframes ensoRise{ from{ opacity:0; transform: translateY(.6em);} to{ opacity:1; transform:none;} }
.enso-atitle[data-anim="rise"].is-in .char{ animation-name: ensoRise; }

/* Chute depuis le haut */
@keyframes ensoFall{ from{ opacity:0; transform: translateY(-.6em);} to{ opacity:1; transform:none;} }
.enso-atitle[data-anim="fall"].is-in .char{ animation-name: ensoFall; }

/* Révélation masquée (glisse derrière une ligne) */
.enso-atitle[data-anim="mask-up"] .word{ overflow: hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.enso-atitle[data-anim="mask-up"].enso-ready .char{ opacity:1; transform: translateY(115%); }
@keyframes ensoMaskUp{ from{ transform: translateY(115%);} to{ transform: translateY(0);} }
.enso-atitle[data-anim="mask-up"].is-in .char{ animation-name: ensoMaskUp; }

/* Bascule 3D */
.enso-atitle[data-anim="flip-x"] .char{ transform-origin: 50% 100%; }
@keyframes ensoFlip{ from{ opacity:0; transform: perspective(600px) rotateX(-92deg);} to{ opacity:1; transform: perspective(600px) rotateX(0);} }
.enso-atitle[data-anim="flip-x"].is-in .char{ animation-name: ensoFlip; }

/* Apparition par zoom */
@keyframes ensoScale{ from{ opacity:0; transform: scale(.3);} to{ opacity:1; transform: scale(1);} }
.enso-atitle[data-anim="scale"].is-in .char{ animation-name: ensoScale; }

/* Flou net */
@keyframes ensoBlur{ from{ opacity:0; filter: blur(12px);} to{ opacity:1; filter: blur(0);} }
.enso-atitle[data-anim="blur"].is-in .char{ animation-name: ensoBlur; }

/* Glitch (ordre aléatoire via --d aléatoire) */
@keyframes ensoGlitch{ 0%{ opacity:0; transform: translateX(-.16em) skewX(14deg);} 55%{ opacity:1;} 100%{ opacity:1; transform:none;} }
.enso-atitle[data-anim="glitch"].is-in .char{ animation-name: ensoGlitch; }

/* Machine à écrire (fondu séquentiel simple) */
@keyframes ensoType{ from{ opacity:0;} to{ opacity:1;} }
.enso-atitle[data-anim="typewriter"].is-in .char{ animation-name: ensoType; }
.enso-atitle[data-anim="typewriter"] .enso-caret{
  display:inline-block; width:.06em; align-self:stretch; background: var(--accent);
  margin-left:.04em; animation: ensoCaret .9s steps(1) infinite;
}
@keyframes ensoCaret{ 50%{ opacity:0; } }

/* Élastique (léger dépassement) */
@keyframes ensoElastic{ 0%{ opacity:0; transform: translateY(.85em);} 55%{ opacity:1; transform: translateY(-.16em);} 100%{ transform: translateY(0);} }
.enso-atitle[data-anim="elastic"].is-in .char{ animation-name: ensoElastic; }

/* Store / volet (bas→haut) */
@keyframes ensoShutter{ from{ opacity:0; clip-path: inset(100% 0 0 0);} to{ opacity:1; clip-path: inset(0 0 0 0);} }
.enso-atitle[data-anim="shutter"].is-in .char{ animation-name: ensoShutter; }

/* Glissés latéraux */
@keyframes ensoSlideL{ from{ opacity:0; transform: translateX(-.55em);} to{ opacity:1; transform:none;} }
@keyframes ensoSlideR{ from{ opacity:0; transform: translateX(.55em);} to{ opacity:1; transform:none;} }
.enso-atitle[data-anim="slide-left"].is-in .char{ animation-name: ensoSlideL; }
.enso-atitle[data-anim="slide-right"].is-in .char{ animation-name: ensoSlideR; }

/* =====================================================================
   ACCESSIBILITÉ / RESPONSIVE
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .enso-atitle .char{
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; animation: none !important;
  }
  .enso-atitle[data-anim="typewriter"] .enso-caret{ display:none; }
}