/* -------------------------------------------------------------------------- Animations au défilement — deux mécanismes, un seul jeu de @keyframes. Activées sur tout composant via le champ générique « Animation au défilement » (onglet Avancé, voir inc/acf-loader.php) → attribut `data-animate=""` imprimé par theme_get_component_animation_attr() (inc/helpers.php), qui n'imprime l'attribut QUE si une animation réelle doit s'appliquer (jamais data-animate="none" ni data-animate=""). 1. Mécanisme natif — CSS pur (Scroll-Driven Animations, `animation-timeline: view()`), sans JS : @supports (animation-timeline: view()). 2. Repli — IntersectionObserver (assets/js/components/animations.js), pour les navigateurs sans support natif (Safari/Firefox à la date d'écriture) : @supports not (animation-timeline: view()), scopé à `html.js` (classe posée en tout début de , voir header.php) pour ne jamais masquer un élément si le JS ne peut pas, in fine, le révéler (navigateur avec JS désactivé, script bloqué, etc.). Dans les deux cas : @media (prefers-reduced-motion: no-preference) — un visiteur ayant demandé un mouvement réduit ne voit aucune animation, et n'a jamais d'état "opacity: 0" à sortir de. -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: no-preference ) { @keyframes nwk-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nwk-fade-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } } @keyframes nwk-fade-down { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: none; } } @keyframes nwk-fade-left { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } } @keyframes nwk-fade-right { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } } @keyframes nwk-zoom-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes nwk-zoom-out { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } } /* -- 1. Mécanisme natif (aucun JS) -------------------------------------- */ @supports ( animation-timeline: view() ) { [data-animate] { animation-duration: 1ms; /* la durée réelle est pilotée par animation-range, pas par le temps */ animation-timeline: view(); animation-range: entry 0% cover 35%; animation-fill-mode: both; animation-timing-function: ease-out; } [data-animate="fade"] { animation-name: nwk-fade; } [data-animate="fade-up"] { animation-name: nwk-fade-up; } [data-animate="fade-down"] { animation-name: nwk-fade-down; } [data-animate="fade-left"] { animation-name: nwk-fade-left; } [data-animate="fade-right"] { animation-name: nwk-fade-right; } [data-animate="zoom-in"] { animation-name: nwk-zoom-in; } [data-animate="zoom-out"] { animation-name: nwk-zoom-out; } } /* -- 2. Repli IntersectionObserver (animations.js) ---------------------- */ @supports not ( animation-timeline: view() ) { /* État initial masqué : UNIQUEMENT si le JS a pu s'exécuter (classe posée en tout début de , voir header.php) — sinon un élément resterait invisible à vie sur un navigateur qui n'a jamais pu retirer cet état. */ html.js [data-animate] { opacity: 0; } html.js [data-animate].is-in-view { animation-duration: 0.6s; animation-timing-function: ease-out; animation-fill-mode: both; } html.js [data-animate="fade"].is-in-view { animation-name: nwk-fade; } html.js [data-animate="fade-up"].is-in-view { animation-name: nwk-fade-up; } html.js [data-animate="fade-down"].is-in-view { animation-name: nwk-fade-down; } html.js [data-animate="fade-left"].is-in-view { animation-name: nwk-fade-left; } html.js [data-animate="fade-right"].is-in-view { animation-name: nwk-fade-right; } html.js [data-animate="zoom-in"].is-in-view { animation-name: nwk-zoom-in; } html.js [data-animate="zoom-out"].is-in-view { animation-name: nwk-zoom-out; } } }