/* ==========================================================================
   Les Arts s'en Mêlent : animations au défilement
   Pilotées par asm-scroll.js, qui pose les classes sur les éléments existants
   (aucun réglage dans Elementor). Rien ne bouge sans la classe html.asm-anim,
   posée dans le <head> sauf « mouvement réduit », ?anim=0 ou éditeur Elementor.

   Les animations utilisent les propriétés translate / rotate / scale, qui se
   cumulent avec les transform du design system (tuiles inclinées, survols,
   asm-float, asm-spin) sans les écraser.
   ========================================================================== */

:root {
	--asm-rv-ease: cubic-bezier(.22, .8, .3, 1);    /* sortie douce, pour le texte */
	--asm-rv-bounce: cubic-bezier(.34, 1.56, .64, 1); /* léger rebond, façon sticker */
	--asm-rv-dist: 30px;
}
@media (max-width: 767px) {
	:root { --asm-rv-dist: 20px; }
}

/* Avant l'exécution du script, le contenu des pages reste masqué pour éviter un
   flash (le script le révèle aussitôt ; filet de sécurité de 3 s dans le <head>). */
html.asm-anim:not(.asm-anim-ready) :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], .asm-footer-cta) .elementor-widget:not(.asm-deco),
html.asm-anim:not(.asm-anim-ready) :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], .asm-footer-cta) .asm-tile {
	opacity: 0;
}

/* État de départ : invisible tant que l'élément n'est pas entré à l'écran */
html.asm-anim .asm-rv:not(.asm-in) { opacity: 0; }

html.asm-anim .asm-rv.asm-in:not(.asm-done) {
	animation: asm-rv-rise .8s var(--asm-rv-ease) var(--asm-rv-d, 0ms) both;
}
html.asm-anim .asm-rv--drop.asm-in:not(.asm-done) { animation-name: asm-rv-drop; animation-duration: .9s; animation-timing-function: var(--asm-rv-bounce); }
html.asm-anim .asm-rv--pop.asm-in:not(.asm-done) { animation-name: asm-rv-pop; animation-duration: .7s; animation-timing-function: var(--asm-rv-bounce); }
html.asm-anim .asm-rv--stamp.asm-in:not(.asm-done) { animation-name: asm-rv-stamp; animation-duration: .65s; animation-timing-function: ease-out; }
html.asm-anim .asm-rv--slide.asm-in:not(.asm-done) { animation-name: asm-rv-slide; animation-duration: .95s; animation-timing-function: var(--asm-rv-bounce); }

/* Montée douce : titres, textes, boutons */
@keyframes asm-rv-rise {
	from { opacity: 0; translate: 0 var(--asm-rv-dist); }
	to { opacity: 1; translate: 0 0; }
}
/* Chute avec un petit angle, qui se pose avec un rebond : tuiles, cartes, photos */
@keyframes asm-rv-drop {
	from { opacity: 0; translate: 0 calc(var(--asm-rv-dist) * 2); rotate: var(--asm-rv-r, -4deg); }
	35% { opacity: 1; }
	to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
/* Apparition en grossissant : logos, noms */
@keyframes asm-rv-pop {
	from { opacity: 0; scale: .7; rotate: var(--asm-rv-r, -3deg); }
	40% { opacity: 1; }
	to { opacity: 1; scale: 1; rotate: 0deg; }
}
/* Coup de tampon : badges et dates */
@keyframes asm-rv-stamp {
	0% { opacity: 0; scale: 1.9; rotate: -10deg; }
	55% { opacity: 1; scale: .93; rotate: 2deg; }
	78% { scale: 1.04; rotate: -1deg; }
	100% { opacity: 1; scale: 1; rotate: 0deg; }
}
/* Glissé latéral : cartes de la frise */
@keyframes asm-rv-slide {
	from { opacity: 0; translate: var(--asm-rv-x, 60px) 0; rotate: var(--asm-rv-r, 3deg); }
	40% { opacity: 1; }
	to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* --------------------------------------------------------------------------
   Grands titres lettre par lettre (titres de page, nom d'artiste)
   -------------------------------------------------------------------------- */
.asm-split .asm-w { display: inline-block; white-space: nowrap; }
.asm-split .asm-l { display: inline-block; }
html.asm-anim .asm-split:not(.asm-in) .asm-l { opacity: 0; }
html.asm-anim .asm-split.asm-in .asm-l {
	animation: asm-rv-letter .7s var(--asm-rv-bounce) both;
	animation-delay: calc(var(--asm-rv-d, 0ms) + var(--i, 0) * 38ms);
}
@keyframes asm-rv-letter {
	from { opacity: 0; translate: 0 -.6em; rotate: var(--r, -12deg); }
	45% { opacity: 1; }
	to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* --------------------------------------------------------------------------
   Surligneur qui se trace sous le titre
   -------------------------------------------------------------------------- */
html.asm-anim :is(.asm-hl.asm-rv, .asm-rv .asm-hl) .elementor-heading-title {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0% 100%;
	transition: background-size .9s cubic-bezier(.65, 0, .25, 1);
}
html.asm-anim :is(.asm-hl.asm-in, .asm-in .asm-hl) .elementor-heading-title {
	background-size: 100% 100%;
	transition-delay: calc(var(--asm-rv-d, 0ms) + .45s);
}

/* --------------------------------------------------------------------------
   Mur de noms des éditions passées : les noms s'allument un à un
   -------------------------------------------------------------------------- */
html.asm-anim .asm-wall:not(.asm-in) :is(span, b) { opacity: 0; }
html.asm-anim .asm-wall.asm-in :is(span, b) {
	animation: asm-rv-pop .55s var(--asm-rv-bounce) both;
	animation-delay: calc(var(--i, 0) * 24ms);
}

/* --------------------------------------------------------------------------
   Frise : le pointillé se remplit au fil du défilement
   -------------------------------------------------------------------------- */
html.asm-anim .asm-timeline::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 6px;
	margin-left: -3px;
	border-radius: 6px;
	background: var(--asm-anthracite);
	height: calc((100% - 20px) * var(--asm-tl-p, 0));
	z-index: 1;
	pointer-events: none;
}
@media (max-width: 1024px) {
	html.asm-anim .asm-timeline::after { left: 16px; }
}
/* Les pastilles s'allument quand leur carte arrive */
html.asm-anim .asm-tl-item::before { transition: scale .5s var(--asm-rv-bounce), background-color .3s ease; }
html.asm-anim .asm-tl-item:not(.asm-tl-on)::before { scale: .45; background: var(--asm-creme); }

/* Impression : tout est visible, rien ne bouge */
@media print {
	html.asm-anim .asm-rv,
	html.asm-anim .asm-l,
	html.asm-anim .asm-wall :is(span, b),
	html.asm-anim:not(.asm-anim-ready) .elementor-widget,
	html.asm-anim:not(.asm-anim-ready) .asm-tile { opacity: 1 !important; animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }
}