/* ===== DMA anim kit (inspiré tekiyo.fr) ===== */

/* Reveal au scroll : fade + slide + blur */
[data-anim]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:var(--anim-delay,0ms);
  will-change:opacity,transform;
}
[data-anim].is-in{ opacity:1; transform:none; }

/* Intro hero au chargement (lignes qui montent) */
[data-hero] [data-hero-line]{
  opacity:0;
  transform:translateY(120%);
  display:inline-block;
}
[data-hero].is-ready [data-hero-line]{
  animation:hero-rise 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--hero-delay,0ms);
}
@keyframes hero-rise{ to{ opacity:1; transform:none; } }

/* Lift doux au hover sur cartes */
.anim-lift{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.anim-lift:hover{ transform:translateY(-6px); }

/* Lenis smooth scroll */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Intro plein écran (tekiyo-like) */
#intro{
  transition:transform 1.3s cubic-bezier(.76,0,.24,1), opacity 1s ease;
  will-change:transform,opacity;
  transform-origin:center 45%;
}
#intro.intro-hide{ transform:scale(2.2); opacity:0; pointer-events:none; }
.spline-float{ animation:spline-float 12s ease-in-out infinite alternate; }
@keyframes spline-float{
  from{ transform:translate(-50%,-50%) scale(1); }
  to{ transform:translate(-50%,-50%) scale(1.08); }
}
.intro-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%, rgba(150,170,255,.16), rgba(120,90,255,.06) 40%, transparent 70%);
}
html.intro-lock, html.intro-lock body{ overflow:hidden !important; height:100%; }

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  [data-anim],[data-hero] [data-hero-line]{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
  }
}

/* ===== Zones pilotées par GSAP (gsap-veo.js) — anim.js les ignore ===== */
/* garde-fou : si GSAP ne charge pas (réseau coupé), le contenu reste LISIBLE */
[data-gsap]{ opacity:1 !important; }

/* ===== Titres mot à mot =====
   Le découpage est fait en JS, la cascade en CSS pur (transition-delay). C'est anim.js
   qui pose .is-in — le même moteur que tout le reste du site.
   ⚠️ Le masquage est conditionné à [data-mots] : SANS le JS de découpage, aucun .g-word
   n'existe et le titre s'affiche normalement. Le texte ne peut pas disparaître. */
[data-mots] .g-word{ display:inline-block; will-change:transform,opacity;
  opacity:0; transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 45ms); }
/* ⚠️⚠️ `will-change:auto` OBLIGATOIRE ICI (8 août) — sinon titres qui s'affichent en
   MORCEAUX sur Chrome ordinateur (constaté : « Des sites qui convertissent… » réduit à trois
   fragments blancs à l'ouverture du panneau, puis Chrome se rattrape).
   `will-change` (posé ci-dessus pour l'animation d'apparition) force Chrome à donner à chaque
   mot SON PROPRE calque graphique. Sans cette remise à zéro, le réglage restait actif À VIE :
   des dizaines de mots × plusieurs titres = des dizaines de calques permanents. Quand un
   parent bouge (le panneau qui glisse), Chrome doit tous les recomposer et en rate une partie
   → le texte apparaît en morceaux.
   Règle générale : `will-change` est une aide TEMPORAIRE, à retirer dès l'animation finie.
   Le mot est déjà à son état final ici, il n'a plus rien à anticiper. */
[data-mots].is-in .g-word,
[data-mots].active .g-word{ opacity:1; transform:none; will-change:auto; }
@media (max-width:767px){
  [data-mots] .g-word{ transform:translateY(16px); transition-delay:calc(var(--i,0) * 32ms); }
}
@media (prefers-reduced-motion: reduce){
  [data-mots] .g-word{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== Confettis PLEIN ÉCRAN (créés puis détruits par le JS : jamais un position:fixed
   qui reste dans le DOM — c'est ce qui fabriquait les carrés fantômes sur iOS). ===== */
.veo-conf-plein{ position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
.veo-conf-plein i{ position:absolute; top:-40px; display:block;
  animation:veo-conf-chute var(--d,3s) linear var(--dl,0s) 1 both; }
@keyframes veo-conf-chute{
  0%{ transform:translateY(-40px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(105vh) rotate(760deg); opacity:.9; }
}
@media (prefers-reduced-motion: reduce){ .veo-conf-plein{ display:none; } }