/*
 * Animations de l'accueil (A1 à A5) et survols du site.
 * Version validée par Thomas le 12/11/2026 (aperçu : projet Mediweb Ops, claude/meisels-apercu-popup-animations.js).
 *
 * Feuille dédiée, chargée sur tout le site par inc/animations.php, après main.min.css.
 * Les états cachés n'existent que sous la classe mw-anim, posée par js/animations.js (accueil seulement) :
 * sans JavaScript, ou avec le réglage « réduire les animations », rien n'est caché et rien ne bouge.
 * Les mouvements utilisent les propriétés translate et scale, qui s'ajoutent aux transformations du thème
 * sans les remplacer. Le préfixe html.mw-anim donne la priorité aux états d'apparition sur les règles du thème.
 */

:root {
	--mw-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- A1 Apparitions douces (accueil) ---------- */

html.mw-anim .mw-rv {
	transition: opacity .6s var(--mw-ease), translate .6s var(--mw-ease);
}

html.mw-anim .mw-rv:not(.mw-in) {
	opacity: 0;
	translate: 0 24px;
}

/* ---------- A2 Photos qui se posent (accueil) ---------- */

html.mw-anim .mw-ph > img {
	transition: opacity .8s var(--mw-ease), scale 1.4s var(--mw-ease), transform .7s var(--mw-ease);
}

html.mw-anim .mw-ph:not(.mw-in) > img {
	opacity: 0;
	scale: 1.06;
}

html.mw-anim img.mw-fd {
	transition: opacity .8s var(--mw-ease);
}

html.mw-anim img.mw-fd:not(.mw-in) {
	opacity: 0;
}

/* ---------- A3 Survols ---------- */

/* Photos de l'équipe et vignettes vidéo : zoom léger dans leur cadre arrondi. */
.equipe .equipe-item__img img,
.video__slider .video-item__img img {
	transition: transform .7s var(--mw-ease);
}

.equipe .equipe-item__img:hover img,
.video__slider .video-item__img:hover img {
	transform: scale(1.04);
}

/* Flèche de retour du fil d'Ariane des fiches. */
.breadcrumbs-back svg {
	transition: translate .32s var(--mw-ease);
}

.breadcrumbs-back:hover svg,
.breadcrumbs-back:focus-visible svg {
	translate: -4px 0;
}

/* Menu principal sur ordinateur : un trait fin se dessine sous l'entrée survolée. */
@media only screen and (min-width: 992px) {
	.header__menu .menu > li > a {
		background-image: linear-gradient(#a3b4c3, #a3b4c3);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		transition: background-size .32s var(--mw-ease);
	}

	.header__menu .menu > li > a:hover,
	.header__menu .menu > li > a:focus-visible {
		background-size: 100% 1px;
	}
}

/* ---------- A4 Menu qui se pose (accueil) ---------- */

body.home .header.sticky {
	animation: mw-drop .5s var(--mw-ease) both;
	box-shadow: 0 8px 24px rgba(34, 34, 34, .06);
}

@keyframes mw-drop {
	from {
		translate: 0 -100%;
	}

	to {
		translate: none;
	}
}

/* ---------- A5 Signature qui s'écrit (accueil) ---------- */

html.mw-anim .mw-sig {
	-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}

html.mw-anim .mw-sig.mw-go {
	animation: mw-write 1.6s .7s cubic-bezier(.5, 0, .3, 1) forwards;
}

@keyframes mw-write {
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/* ---------- Réglage « réduire les animations » ---------- */

@media (prefers-reduced-motion: reduce) {
	html.mw-anim .mw-rv:not(.mw-in),
	html.mw-anim .mw-ph:not(.mw-in) > img,
	html.mw-anim img.mw-fd:not(.mw-in) {
		opacity: 1;
		translate: none;
		scale: none;
	}

	html.mw-anim .mw-sig {
		-webkit-mask-image: none;
		mask-image: none;
	}

	body.home .header.sticky {
		animation: none;
	}

	.equipe .equipe-item__img img,
	.video__slider .video-item__img img,
	.breadcrumbs-back svg,
	.header__menu .menu > li > a {
		transition: none;
	}

	.equipe .equipe-item__img:hover img,
	.video__slider .video-item__img:hover img {
		transform: none;
	}

	.breadcrumbs-back:hover svg,
	.breadcrumbs-back:focus-visible svg {
		translate: none;
	}
}