/* ==========================================================================
   Movimiento e interacciones — filosofía "design engineering" (Emil Kowalski)
   --------------------------------------------------------------------------
   - Feedback al presionar (scale sutil) en todo lo accionable.
   - Hover con transform solo en dispositivos con puntero fino.
   - Reveals al entrar en viewport (transform/opacity, con stagger) vía JS.
   - Respeto total de prefers-reduced-motion.
   Solo se animan transform y opacity (GPU). Se auto-encola por glob.
   ========================================================================== */

/* --- Feedback al presionar -------------------------------------------------
   Botones (.vv-btn) ya lo tienen en main.css; aquí el resto de accionables. */
.vv-tag {
	transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft),
		border-color var(--dur), transform var(--dur-fast) var(--ease-out);
}
.vv-tag:active { transform: scale(0.96); }

.vv-header__icon {
	transition: color var(--dur) var(--ease-out), background var(--dur),
		transform var(--dur-fast) var(--ease-out);
}
.vv-header__icon:active { transform: scale(0.9); }

.vv-estrella__cta,
.vv-newsletter__btn,
.vv-blog-hero__more,
.vv-postcard__more {
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}
.vv-estrella__cta:active,
.vv-newsletter__btn:active { transform: translateX(-50%) scale(0.97); }
.vv-newsletter__btn:active { transform: scale(0.96); }

.vv-testimonials__dot { transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.vv-testimonials__dot:active { transform: scale(0.82); }

/* Tarjetas y tiles (ya animan transform en hover): press sutil */
.vv-product-card:active,
.vv-bento__tile:active,
.vv-related__card:active { transform: scale(0.99); }
.vv-postcard__link:active .vv-postcard__media { transform: scale(0.99); }

/* --- Hover solo en dispositivos con puntero fino ---------------------------
   En táctil, el hover se dispara al tocar y se queda "pegado": lo neutralizamos
   para no dejar tarjetas levantadas tras un tap. */
@media (hover: none), (pointer: coarse) {
	.vv-product-card:hover,
	.vv-bento__tile:hover,
	.vv-related__card:hover,
	.vv-estrella__item img:hover,
	.vv-home-categorias__link:hover .vv-home-categorias__circle,
	.vv-postcard__link:hover .vv-postcard__media {
		transform: none;
	}
}

/* --- Reveals al hacer scroll (los activa main.js añadiendo .vv-reveal) ------
   Solo se aplican a elementos por debajo del pliegue al cargar, así que ocultar
   no provoca parpadeo. JS no marca nada si el usuario pide reduced-motion. */
.vv-reveal {
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
}

.vv-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* --- Accesibilidad: menos movimiento --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.vv-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}