/**
 * Animaciones de entrada (revelado al hacer scroll) y micro-interacciones.
 *
 * Los elementos NO se ocultan desde el marcado: es assets/js/oz-anim.js el que
 * pone el atributo `data-oz-anim`. Así, si el JS falla o está desactivado, el
 * contenido se ve siempre (sin FOUC ni bloques invisibles).
 *
 * Al terminar la transición el JS retira el atributo, de modo que estas reglas
 * no pisan los `transform` de :hover de las tarjetas.
 *
 * @package OZ_Tema_2
 */

:root {
	--oz-anim-dur: 0.62s;
	--oz-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--oz-anim-shift: 26px;
}

/* ==========================================================================
   1. REVELADO
   ========================================================================== */

[data-oz-anim] {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--oz-anim-dur) var(--oz-anim-ease),
		transform var(--oz-anim-dur) var(--oz-anim-ease);
}

[data-oz-anim="up"] {
	transform: translate3d(0, var(--oz-anim-shift), 0);
}

[data-oz-anim="down"] {
	transform: translate3d(0, calc(var(--oz-anim-shift) * -1), 0);
}

[data-oz-anim="left"] {
	transform: translate3d(calc(var(--oz-anim-shift) * -1), 0, 0);
}

[data-oz-anim="right"] {
	transform: translate3d(var(--oz-anim-shift), 0, 0);
}

[data-oz-anim="zoom"] {
	transform: scale(0.94);
}

[data-oz-anim="pop"] {
	transform: translate3d(0, 14px, 0) scale(0.96);
}

/* "fade" no lleva transform: solo opacidad. */

[data-oz-anim].is-inview {
	opacity: 1;
	transform: none;
}

/* Nunca ocultar contenido al imprimir ni en el personalizador. */
@media print {
	[data-oz-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   2. MICRO-INTERACCIONES — TIENDA
   ========================================================================== */

.oz-loop-product__inner {
	transition:
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		transform 0.3s var(--oz-anim-ease);
}

.oz-loop-product__inner:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.oz-loop-product__media {
	position: relative;
	overflow: hidden;
}

.oz-loop-product__media img {
	transition: transform 0.45s var(--oz-anim-ease);
}

.oz-loop-product__inner:hover .oz-loop-product__media img {
	transform: scale(1.07);
}

/* Destello diagonal al pasar el cursor por la imagen. */
.oz-loop-product__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	/* Se desplaza con transform (no con `left`) para no forzar layout. */
	transform: translateX(-150%) skewX(-18deg);
	opacity: 0;
}

.oz-loop-product__inner:hover .oz-loop-product__media::after {
	animation: oz-anim-shine 0.85s var(--oz-anim-ease);
}

@keyframes oz-anim-shine {
	0% {
		transform: translateX(-150%) skewX(-18deg);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		transform: translateX(280%) skewX(-18deg);
		opacity: 0;
	}
}

.oz-loop-product__title a {
	transition: color 0.2s var(--oz-anim-ease);
}

.oz-loop-product__actions .add_to_cart_button,
.oz-loop-product__actions .button {
	transition:
		filter 0.2s ease,
		transform 0.18s var(--oz-anim-ease),
		box-shadow 0.25s ease;
}

.oz-loop-product__actions .add_to_cart_button:hover,
.oz-loop-product__actions .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
}

.oz-loop-product__actions .add_to_cart_button:active,
.oz-loop-product__actions .button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}

.oz-loop-product__qty-btn {
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		transform 0.15s var(--oz-anim-ease);
}

.oz-loop-product__qty-btn:active {
	transform: scale(0.9);
}

/* —— Tarjeta del cotizador (.ozc-product-card): es la que está activa en el
   catálogo. El pack de diseño ya trae sombra y zoom de imagen al pasar el
   cursor; aquí se suma la elevación, el destello y el rebote de los botones. */
.ozc-product-card {
	transition:
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		transform 0.3s var(--oz-anim-ease);
}

.ozc-product-card:hover {
	transform: translateY(-5px);
}

.ozc-product-card__media {
	position: relative;
}

.ozc-product-card__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translateX(-150%) skewX(-18deg);
	opacity: 0;
}

.ozc-product-card:hover .ozc-product-card__media::after {
	animation: oz-anim-shine 0.85s var(--oz-anim-ease);
}

.ozc-product-card__btn,
.ozc-product-card__wa-btn {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.18s var(--oz-anim-ease),
		box-shadow 0.25s ease;
}

.ozc-product-card__btn:hover,
.ozc-product-card__wa-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
}

.ozc-product-card__btn:active,
.ozc-product-card__wa-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}

/* Tira de categorías del catálogo */
.oz-shop-category-strip__item {
	transition:
		transform 0.25s var(--oz-anim-ease),
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		background-color 0.25s ease;
}

.oz-shop-category-strip__item:hover,
.oz-shop-category-strip__item:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.oz-shop-category-strip__icon,
.oz-shop-category-strip__icon img {
	transition: transform 0.35s var(--oz-anim-ease);
}

.oz-shop-category-strip__item:hover .oz-shop-category-strip__icon,
.oz-shop-category-strip__item:hover .oz-shop-category-strip__icon img {
	transform: scale(1.09);
}

/* Productos relacionados / recomendados de la ficha */
.oz-reco__shop-btn {
	transition:
		transform 0.22s var(--oz-anim-ease),
		box-shadow 0.25s ease;
}

.oz-reco__shop-btn:hover {
	transform: translateY(-2px);
}

.oz-reco__arrow {
	display: inline-block;
	transition: transform 0.25s var(--oz-anim-ease);
}

.oz-reco__shop-btn:hover .oz-reco__arrow {
	transform: translateX(5px);
}

/* ==========================================================================
   3. MICRO-INTERACCIONES — BLOG
   ========================================================================== */

.oz-archive-card {
	transition:
		transform 0.3s var(--oz-anim-ease),
		box-shadow 0.3s ease,
		border-color 0.25s ease;
}

.oz-archive-card:hover {
	transform: translateY(-6px);
}

.oz-archive-card__date {
	transition: transform 0.3s var(--oz-anim-ease);
}

.oz-archive-card:hover .oz-archive-card__date {
	transform: translateY(-3px) scale(1.04);
}

.oz-mini {
	transition: transform 0.25s var(--oz-anim-ease);
}

.oz-mini:hover {
	transform: translateX(4px);
}

.oz-mini__media img {
	transition: transform 0.4s var(--oz-anim-ease);
}

.oz-mini:hover .oz-mini__media img {
	transform: scale(1.08);
}

.blog-cta__btn {
	transition:
		transform 0.22s var(--oz-anim-ease),
		box-shadow 0.25s ease,
		background-color 0.2s ease;
}

.blog-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(227, 6, 19, 0.25);
}

.blog-cta__btn svg {
	transition: transform 0.25s var(--oz-anim-ease);
}

.blog-cta__btn:hover svg {
	transform: translateX(4px);
}

.oz-postnav__item {
	transition:
		transform 0.25s var(--oz-anim-ease),
		box-shadow 0.25s ease;
}

.oz-postnav__item:hover {
	transform: translateY(-3px);
}

/* Paginación (blog y catálogo) */
.navigation.pagination .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
	transition:
		transform 0.2s var(--oz-anim-ease),
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.navigation.pagination a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a:hover {
	transform: translateY(-2px);
}

/* ==========================================================================
   4. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-oz-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.oz-loop-product__inner:hover,
	.ozc-product-card:hover,
	.ozc-product-card__btn:hover,
	.ozc-product-card__wa-btn:hover,
	.oz-archive-card:hover,
	.oz-shop-category-strip__item:hover,
	.oz-postnav__item:hover,
	.oz-mini:hover,
	.blog-cta__btn:hover {
		transform: none;
	}

	.oz-loop-product__inner:hover .oz-loop-product__media img,
	.oz-mini:hover .oz-mini__media img {
		transform: none;
	}

	.oz-loop-product__inner:hover .oz-loop-product__media::after,
	.ozc-product-card:hover .ozc-product-card__media::after {
		animation: none;
	}
}