/** * Animation d'apparition au défilement — OPT-IN par bloc. * * Ne s'applique QU'AUX blocs Titre / Paragraphe auxquels l'utilisateur a * choisi le style « Animé » dans l'éditeur (classe `.is-style-tcg-anim`, * enregistrée dans inc/block-styles.php). Par défaut, un titre ou un paragraphe * reste statique. * * Deux effets, joués une seule fois quand le bloc entre dans le viewport * (classe `is-visible` posée par assets/js/reveal.js) : * - Paragraphes (et titres non éclatés) : sobre fondu + légère montée. * - Titres éclatés en caractères (classe `tcg-charfx`) : effet « text swap » * caractère par caractère repris du menu header (nav-hover.css), mais en * apparition — chaque lettre revient de la droite (skew + fondu), décalée * progressivement, et reste dans la couleur normale du titre. * * Anti-flash & dégradation : l'état masqué n'est appliqué que si porte * la classe `tcg-reveal-enabled` (ajoutée par le JS AVANT la peinture). Sans JS, * ou en `prefers-reduced-motion: reduce`, aucune règle ne masque : tout est * visible d'emblée. */ @media ( prefers-reduced-motion: no-preference ) { /* État initial (avant apparition) — anti-flash des blocs « Animé ». */ .tcg-reveal-enabled .is-style-tcg-anim { opacity: 0; transform: translateY( 16px ); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* Paragraphes : montée plus discrète + léger décalage temporel. */ .tcg-reveal-enabled p.is-style-tcg-anim { transform: translateY( 10px ); transition-delay: 0.08s; } /* Révélé (fondu + montée) — paragraphes & titres non éclatés (repli). */ .tcg-reveal-enabled .is-style-tcg-anim.is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------------------- * Titres éclatés en caractères (classe .tcg-charfx posée par reveal.js, * uniquement sur les titres « Animé »). * Le conteneur est rendu visible immédiatement : l'animation se joue au * niveau des lettres, pas du bloc (remplace le fondu + montée). * ------------------------------------------------------------------- */ .tcg-reveal-enabled .wp-block-heading.tcg-charfx { opacity: 1; transform: none; /* Easing « expo out » identique à nav-hover.css (menu header). */ --tcg-reveal-ease: linear( 0, .067, .1294, .1877, .2421, .2929, .3402, .3844, .4257, .4641, .5, .5335, .5647, .5939, .6211, .6464, .6701, .6922, .7128, .7321, .75, .7667, .7824, .7969, .8105, .8232, .8351, .8461, .8564, .866, .875, .8834, .8912, .8985, .9053, .9116, .9175, .9231, .9282, .933, .9375, .9417, .9456, .9492, .9526, .9558, .9588, .9615, .9641, .9665, .9688, .9708, .9728, .9746, .9763, .9779, .9794, .9808, .9821, .9833, .9844, .9854, .9864, .9873, .9882, .989, .9897, .9904, .991, .9916, .9922, .9927, .9932, .9937, .9941, .9945, .9948, .9952, .9955, .9958, .9961, .9964, .9966, .9968, .997, .9972, .9974, .9976, .9978, .9979, .998, .9982, .9983, .9984, .9985, .9986, .9987, .9988, .9989, .999, 1 ); } /* Mot insécable : les lettres restent groupées, le retour à la ligne se fait entre les mots. */ .tcg-charfx .tcg-revealfx-word { display: inline-block; white-space: nowrap; } /* État initial de chaque lettre : décalée à droite + skew (lettre entrante). */ .tcg-charfx .tcg-revealfx-char { display: inline-block; translate: 18px 0 0; transform: skew( -14deg ); opacity: 0; } /* Apparition : chaque lettre revient en place, caractère par caractère. */ .tcg-charfx.is-visible .tcg-revealfx-char { translate: 0 0 0; transform: skew( 0 ); opacity: 1; transition: translate .6s calc( ( var( --char ) - 1 ) * 22ms ) var( --tcg-reveal-ease ), transform .25s calc( ( var( --char ) - 1 ) * 29ms ) ease-out, opacity .15s calc( ( var( --char ) - 1 ) * 22ms ) ease-out; } }