/* --------------------------------------------------------------------------
   Animations au défilement — CSS natif (Scroll-Driven Animations,
   `animation-timeline: view()`), sans aucune dépendance JS (pas d'AOS.js).

   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="<nom>"` imprimé par theme_get_component_animation_attr()
   (inc/helpers.php).

   Progressive enhancement stricte, en deux temps :
   1. @supports (animation-timeline: view()) — un navigateur qui ne supporte
      pas encore l'API (Safari/Firefox à la date d'écriture) ignore tout ce
      bloc : l'élément reste visible normalement, sans jamais être masqué par
      défaut. Aucun état "opacity: 0" n'existe hors de ce bloc.
   2. @media (prefers-reduced-motion: no-preference) — un visiteur ayant
      demandé un mouvement réduit ne voit également aucune animation.
   -------------------------------------------------------------------------- */
@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		[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;
		}

		@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; }
		}
	}
}