/* ===== Texte animé : un attribut data-texte, sept effets, déclenchés à l'arrivée à l'écran =====
   Inspiré du composant Framer « TextMotion », refait sans bibliothèque. */
[data-texte] { --ta-duree: .7s; --ta-pas: .035s; }
.ta-mot { display: inline-block; white-space: nowrap; }
.ta-lettre, .ta-motanim { display: inline-block; will-change: transform, opacity, filter; }

/* montee : chaque lettre monte et apparaît */
.js [data-texte="montee"] .ta-lettre { opacity: 0; transform: translateY(.55em); }
.js [data-texte="montee"].ta-en-vue .ta-lettre { animation: ta-montee var(--ta-duree) cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * var(--ta-pas)); }
@keyframes ta-montee { to { opacity: 1; transform: none; } }

/* flou : chaque lettre sort du flou */
.js [data-texte="flou"] .ta-lettre { opacity: 0; filter: blur(10px); transform: translateY(.2em) scale(1.06); }
.js [data-texte="flou"].ta-en-vue .ta-lettre { animation: ta-flou var(--ta-duree) cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * var(--ta-pas)); }
@keyframes ta-flou { to { opacity: 1; filter: blur(0); transform: none; } }

/* mots : mot par mot, en montant et en se défloutant */
[data-texte="mots"] { --ta-pas: .075s; }
.js [data-texte="mots"] .ta-motanim { opacity: 0; filter: blur(6px); transform: translateY(.45em); }
.js [data-texte="mots"].ta-en-vue .ta-motanim { animation: ta-flou var(--ta-duree) cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * var(--ta-pas)); }

/* lignes : le bloc entier monte depuis un masque */
.js [data-texte="lignes"] { clip-path: inset(0 0 100% 0); transform: translateY(.5em); opacity: 0; }
.js [data-texte="lignes"].ta-en-vue { animation: ta-lignes .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ta-lignes { to { clip-path: inset(0 0 -20% 0); transform: none; opacity: 1; } }

/* balayage : le texte se dévoile de gauche à droite */
.js [data-texte="balayage"] { clip-path: inset(0 100% 0 0); }
.js [data-texte="balayage"].ta-en-vue { animation: ta-balayage .8s cubic-bezier(.65,.05,.25,1) forwards; }
@keyframes ta-balayage { to { clip-path: inset(0 -2% 0 0); } }

/* brouillage : les lettres se cherchent puis se posent, piloté par le script */
.js [data-texte="brouillage"] .ta-lettre { opacity: 0; }
.js [data-texte="brouillage"].ta-en-vue .ta-lettre { opacity: 1; transition: opacity .2s ease; }
.js [data-texte="brouillage"] .ta-lettre.ta-brouille { color: #7A9BF2; }

/* machine : frappe au clavier, avec un curseur qui clignote */
.js [data-texte="machine"] .ta-lettre { opacity: 0; }
.js [data-texte="machine"].ta-en-vue .ta-lettre { animation: ta-frappe .01s steps(1) forwards; animation-delay: calc(var(--i) * .045s); }
@keyframes ta-frappe { to { opacity: 1; } }
.js [data-texte="machine"].ta-en-vue::after { content: ""; display: inline-block; width: .08em; height: .95em; margin-left: .06em; vertical-align: -.1em; background: currentColor; animation: ta-curseur 1s steps(2) infinite; }
@keyframes ta-curseur { 50% { opacity: 0; } }
.js [data-texte="machine"].ta-fini::after { display: none; }

/* lueur : un reflet traverse un titre en dégradé, en boucle lente */
[data-texte="lueur"] { background: linear-gradient(100deg, currentColor 0%, currentColor 40%, #7A9BF2 50%, currentColor 60%, currentColor 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.js [data-texte="lueur"].ta-en-vue { animation: ta-lueur 5s ease-in-out infinite; }
@keyframes ta-lueur { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-texte], [data-texte] .ta-lettre, [data-texte] .ta-motanim { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .js [data-texte="machine"].ta-en-vue::after { display: none; }
}