/**
 * Matière à Vivre — Animations
 *
 * Trois keyframes du design + le mécanisme de révélation au scroll.
 * Easing signature du projet : cubic-bezier(.22, .8, .3, 1).
 */

/* ======================================================================
 * Keyframes
 * ====================================================================== */

@keyframes mavFadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mavFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mavScrollCue {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	45% {
		transform: scaleY(1);
		transform-origin: top;
	}
	55% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* ======================================================================
 * Entrées à l'ouverture de page
 * ====================================================================== */

.mav-enter {
	animation: mavFadeUp var(--mav-duration-enter) var(--mav-ease) both;
}

.mav-enter--1 { animation-delay: 0.3s; }
.mav-enter--2 { animation-delay: 0.8s; }
.mav-enter--3 { animation-delay: 1.2s; }

/* Hero de page projet : entrées plus resserrées. */
.mav-enter--project {
	animation-duration: 1.4s;
}

/* En-têtes des pages secondaires. */
.mav-enter--page {
	animation-duration: 1.2s;
}

.mav-enter--page-delayed {
	animation-duration: 1.2s;
	animation-delay: 0.15s;
}

.mav-hero__cue {
	animation: mavFade 2s both 1.6s;
}

.mav-hero__cue-line {
	animation: mavScrollCue 2.6s ease-in-out infinite;
}

/* ======================================================================
 * Révélation au scroll
 *
 * Le décalage propre à certaines colonnes (translateY 48px / 64px) est porté
 * par la variable --mav-offset-y, et non par une valeur de transform figée.
 * L'animation compose donc avec lui : l'élément part de « son décalage + 36px »
 * et arrive exactement à « son décalage ». Le rythme irrégulier des grilles
 * survit ainsi à l'animation, sans que le JavaScript n'ait à mémoriser puis
 * restaurer quoi que ce soit.
 * ====================================================================== */

[data-reveal].mav-reveal-ready {
	opacity: 0;
	transform: translateY(calc(var(--mav-offset-y, 0px) + 36px));
	will-change: opacity, transform;
	transition:
		opacity var(--mav-duration-reveal) var(--mav-ease),
		transform var(--mav-duration-reveal) var(--mav-ease);
	transition-delay: var(--mav-reveal-delay, 0ms);
}

[data-reveal].mav-reveal-in {
	opacity: 1;
	transform: translateY(var(--mav-offset-y, 0px));
}

/* Une fois l'animation jouée, on libère le compositing. */
[data-reveal].mav-reveal-done {
	will-change: auto;
}

/* ======================================================================
 * Respect de prefers-reduced-motion
 *
 * Exigence du guide de style : toute animation est neutralisée.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	[data-reveal].mav-reveal-ready {
		opacity: 1 !important;
		transform: none !important;
	}

	.mav-offset-48,
	.mav-offset-64 {
		transform: none !important;
	}

	.mav-hero__cue-line {
		animation: none;
		transform: scaleY(1);
	}

	.mav-offcanvas__panel {
		transition: none;
	}

	.mav-menu--offcanvas .mav-menu__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}