/**
 * MOTION-01 / MOTION-02 / MOTION-03 — animações de entrada.
 *
 * Carregado apenas nos templates definidos em `rituais_v2_motion_enabled()`
 * (ver inc/enqueue.php). O estado inicial só é aplicado quando o documento
 * recebe `rv-js` no <head>; sem JavaScript, sem IntersectionObserver ou com
 * `prefers-reduced-motion: reduce` nada é escondido.
 *
 * Apenas `opacity`, `transform` e `clip-path` animam. A revelação usa
 * `animation` em vez de `transition` para não substituir as transições de hover
 * já existentes nos cards (borda, sombra, imagem).
 */

@media (prefers-reduced-motion: no-preference) {
	.rv-js [data-rv],
	.rv-js [data-rv-group] > * {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	/* Conteúdo de campanha editado por blocos: o primeiro bloco (hero) fica
	   sempre visível; só as secções seguintes são reveladas. */
	.rv-js [data-rv-content] > * + * {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	/* Conteúdo já visível no primeiro ecrã: nunca é escondido nem animado. */
	.rv-js .rv-instant {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.rv-js [data-rv].rv-in,
	.rv-js [data-rv-group] > .rv-in,
	.rv-js [data-rv-content] > * + .rv-in {
		animation: rv-reveal 750ms cubic-bezier(.2, .7, .2, 1) both;
		animation-delay: calc(var(--rv-i, 0) * 80ms);
	}

	/* MOTION-03 — revelação editorial das imagens de destaque da homepage.
	   `backwards` aplica a máscara durante o delay e liberta a imagem no fim,
	   preservando border-radius e hovers. A classe `rv-media` só é adicionada
	   a elementos abaixo da dobra. */
	.rv-js .rv-media img {
		animation: rv-unveil 1000ms cubic-bezier(.22, .61, .36, 1) backwards;
		animation-delay: calc(var(--rv-i, 0) * 80ms + 90ms);
		animation-play-state: paused;
	}

	.rv-js .rv-media.rv-in img {
		animation-play-state: running;
	}

	/* Rótulo sobreposto (Experiência): acompanha a máscara em vez de aparecer
	   com o wrapper. Só arranca quando a imagem já está suficientemente
	   revelada, sem tocar no enquadramento final. */
	.rv-js .rv-media.rv-in .photo-label {
		animation: rv-label 520ms cubic-bezier(.2, .7, .2, 1) both;
		animation-delay: calc(var(--rv-i, 0) * 80ms + 320ms);
	}

	/* Imagem full-bleed em mobile: o zoom não pode gerar overflow horizontal. */
	.rv-js .rv-media.promotion-photo {
		overflow: hidden;
	}
}

@keyframes rv-reveal {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rv-unveil {
	from {
		clip-path: inset(100% 0 0 0);
		transform: scale(1.035);
	}

	to {
		clip-path: inset(0 0 0 0);
		transform: scale(1);
	}
}

@keyframes rv-label {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}