/**
 * Sistema de animación (Fase 3).
 * Vocabulario tomado de la referencia: fade + ligera subida, una sola
 * velocidad, escalonado corto en grupos, hovers de transform discretos.
 *
 * Reglas de seguridad:
 * - Los estados iniciales ocultos SOLO se aplican bajo `html.vc-anim`,
 *   clase que añade el propio JS. Sin JS, todo es visible.
 * - Solo transform + opacity (sin reflow, sin CLS).
 * - `prefers-reduced-motion: reduce` desactiva TODO el movimiento.
 */

:root {
	--vc-rv-dist: 20px;
	--vc-rv-dur: 0.55s;
	--vc-rv-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad, como la referencia */
	--vc-stagger: 70ms;
	--vc-hover-dur: 0.25s;
}

/* Móvil: movimiento más contenido (distancia corta, escalonado mínimo) */
@media (max-width: 781px) {
	:root {
		--vc-rv-dist: 10px;
		--vc-stagger: 40ms;
	}
}

/* ---- Revelado al entrar en viewport ---- */

html.vc-anim .vc-reveal {
	opacity: 0;
	transform: translateY(var(--vc-rv-dist));
}

html.vc-anim .vc-reveal.vc-in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--vc-rv-dur) var(--vc-rv-ease),
		transform var(--vc-rv-dur) var(--vc-rv-ease);
	transition-delay: calc(var(--vc-i, 0) * var(--vc-stagger));
}

/* ---- Hovers (activos siempre, con o sin JS) ---- */

main .is-layout-grid > .wp-block-group,
main .wp-block-column > .wp-block-group.has-background {
	transition: transform var(--vc-hover-dur) ease, box-shadow var(--vc-hover-dur) ease, border-color var(--vc-hover-dur) ease;
}

@media (hover: hover) {
	main .is-layout-grid > .wp-block-group:hover,
	main .wp-block-column > .wp-block-group.has-background:hover {
		transform: translateY(-6px);
		box-shadow: var(--wp--preset--shadow--medium);
	}
}

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}

/* Zoom sutil en imágenes de galería recortada (contenedor ya recorta: sin desbordes) */
.wp-block-gallery.is-cropped .wp-block-image img {
	transition: transform 0.5s ease;
}

@media (hover: hover) {
	.wp-block-gallery.is-cropped .wp-block-image:hover img {
		transform: scale(1.03);
	}
}

/* ---- Accesibilidad: cero movimiento si el usuario lo pide ---- */

@media (prefers-reduced-motion: reduce) {
	html.vc-anim .vc-reveal,
	html.vc-anim .vc-reveal.vc-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	main .is-layout-grid > .wp-block-group,
	main .wp-block-column > .wp-block-group.has-background,
	.wp-block-button__link,
	.wp-block-gallery.is-cropped .wp-block-image img {
		transition: none !important;
	}

	main .is-layout-grid > .wp-block-group:hover,
	main .wp-block-column > .wp-block-group.has-background:hover,
	.wp-block-button__link:hover,
	.wp-block-gallery.is-cropped .wp-block-image:hover img {
		transform: none !important;
	}
}