/* Aqua Forme Réunion : animations et micro-interactions. Chargé en dernier.
   Règle d'or : rien n'est caché par défaut. Les états de départ (.af-r) ne s'appliquent que si
   motion.js a posé la classe « af-motion » sur <html>, et seulement sans préférence de mouvement réduit.
   Sans JS, pour Google ou sous prefers-reduced-motion : tout est visible, aucun décalage de mise en page.
   La ligne d'eau (houle) et les survols des cartes, boutons et galerie sont dans style.css / pages.css / nav.css. */

/* ==========================================================================
   1. Révélation au défilement et entrée du hero (classes posées par motion.js)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* état de départ (posé par motion.js) ; l'arrivée est jouée en Web Animations : fade + translateY(24px), 650 ms, cubic-bezier(.2,.7,.2,1) */
	html.af-motion .af-r { opacity: 0; transform: translate3d(0, 24px, 0); }
	/* titre et photo du hero : glissement seul, l'élément LCP reste peint dès le premier rendu */
	html.af-motion .af-r--t, html.af-motion .hero__media.af-r, html.af-motion .hero__media.af-r img { opacity: 1; }
}
@media print {
	html.af-motion .af-r { opacity: 1; transform: none; }
}

/* ==========================================================================
   2. Caustiques : dérive lente des taches de lumière posées par style.css
      (.hero::before, .avis-apercu::before, .bandeau__inner::before ; inset -30% -20%, z-index -1)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.hero::before, .avis-apercu::before, .bandeau__inner::before { animation: af-caustique 28s ease-in-out infinite alternate; }
	.avis-apercu::before { animation-duration: 34s; animation-direction: alternate-reverse; }
	.bandeau__inner::before { animation-duration: 24s; }
}
@keyframes af-caustique {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to { transform: translate3d(3%, 3%, 0) scale(1.06); }
}

/* ==========================================================================
   3. Micro-interactions complémentaires (photos dans leur masque, cartes sans lien, FAQ)
   ========================================================================== */
.chiffre__valeur { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
	/* Photos : zoom doux dans leur masque (les cartes activités et la galerie sont déjà gérées par style.css) */
	.cours__img, .article-carte__img, .video__img, .coach__img, .apropos__img, .bassin__img { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
	.cours--lien:hover .cours__img, .article-carte:hover .article-carte__img, .video__lien:hover .video__img, .coach:hover .coach__img { transform: scale(1.04); }
	.apropos__media:hover .apropos__img, .bassin__media:hover .bassin__img { transform: scale(1.02); }
	.cours--lien:hover .cours__lien .ico--btn { transform: translateX(4px); }
	.btn:active { transform: translateY(0) scale(0.98); }

	/* Cartes sans lien (formules, coachs, étapes) : même soulèvement que les cartes liens */
	.formule, .coach, .etape { transition: transform 300ms cubic-bezier(.2, .7, .2, 1), box-shadow 300ms cubic-bezier(.2, .7, .2, 1); }
	.formule:hover, .coach:hover, .etape:hover {
		transform: translateY(-4px);
		box-shadow: 0 1px 2px rgba(7, 42, 71, 0.06), 0 12px 32px -12px rgba(7, 42, 71, 0.25);
	}

	/* Accordéon FAQ : hauteur animée par motion.js (classe posée le temps de l'ouverture) ; le « + » tourne déjà via style.css */
	.af-acc { transition: height 360ms cubic-bezier(.2, .7, .2, 1), opacity 300ms ease; }
}