/*
 * Movimiento: scroll suave, animaciones de entrada y de hover.
 *
 * Reglas de juego:
 * - Todo vive dentro de `prefers-reduced-motion: no-preference`: quien pidió
 *   menos movimiento en su sistema no ve ninguna de estas animaciones.
 * - Las entradas sólo ocultan contenido bajo `html.or-anim`, clase que pone un
 *   script en el <head> y que se retira sola si site.js no llega a cargar
 *   (inc/assets.php). Sin JS, todo se ve desde el principio.
 * - Sólo se animan opacity, transform y filter: no provocan relayout.
 * - Lo que está arriba al cargar (heroes, ficha) entra con @keyframes por CSS
 *   y no con IntersectionObserver: así no parpadea antes de que corra el JS.
 */

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
		/* Las anclas (#resenas, #modelos-bebes…) no quedan tapadas por la cabecera fija. */
		scroll-padding-top: calc(var(--or-hdr-h) + 24px);
	}

	/* ---------- Entradas al hacer scroll ----------
	 * site.js marca cada bloque con data-or-reveal="<variante>" y le agrega
	 * .is-in al entrar en pantalla. --or-d escalona elementos hermanos. */

	/* El estado oculto se aplica SIN transición: con la transición aquí, al
	 * marcar un bloque éste primero se animaba «hacia afuera» (se desvanecía y
	 * se corría 40 px a la derecha) y después entraba. Ese corrimiento durante
	 * la carga generaba scroll horizontal y un parpadeo en lo ya visible. */
	html.or-anim [data-or-reveal] {
		opacity: 0;
		will-change: opacity, transform;
	}
	html.or-anim [data-or-reveal="up"] { transform: translateY(28px); }
	html.or-anim [data-or-reveal="left"] { transform: translateX(-40px); }
	html.or-anim [data-or-reveal="right"] { transform: translateX(40px); }
	html.or-anim [data-or-reveal="zoom"] { transform: scale(0.94); }
	html.or-anim [data-or-reveal="pop"] { transform: scale(0.86) translateY(12px); }
	html.or-anim [data-or-reveal="pop"].is-in { transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1), ease; }
	html.or-anim [data-or-reveal="flip"] { transform: perspective(900px) rotateX(14deg) translateY(24px); transform-origin: 50% 100%; }
	html.or-anim [data-or-reveal="blur"] { filter: blur(10px); transform: scale(1.02); }
	html.or-anim [data-or-reveal="fade"] { transform: none; }

	html.or-anim [data-or-reveal].is-in {
		opacity: 1;
		transform: none;
		filter: none;
		transition:
			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--or-d, 0ms),
			transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--or-d, 0ms),
			filter 0.8s ease var(--or-d, 0ms);
	}

	/* Al terminar, site.js quita data-or-reveal: se liberan will-change (que
	 * reserva memoria de GPU por tarjeta) y la transición de entrada. */

	/* ---------- Entradas al cargar (lo que ya está en pantalla) ---------- */

	@keyframes or-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
	@keyframes or-in-zoom { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
	@keyframes or-in-fade { from { opacity: 0; } to { opacity: 1; } }

	html.or-anim .or-hero .or-stack > * { animation: or-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
	html.or-anim .or-hero .or-stack > :nth-child(2) { animation-delay: 0.08s; }
	html.or-anim .or-hero .or-stack > :nth-child(3) { animation-delay: 0.16s; }
	html.or-anim .or-hero .or-stack > :nth-child(4) { animation-delay: 0.24s; }
	html.or-anim .or-hero .or-stack > :nth-child(n+5) { animation-delay: 0.32s; }
	html.or-anim .or-hero :is(.or-hero__imgs, .or-duo, .or-single-img) > img { animation: or-in-zoom 1s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s; }
	html.or-anim .or-hero :is(.or-hero__imgs, .or-duo) > img:nth-child(2) { animation-delay: 0.3s; }
	html.or-anim .or-hero .or-hero__imgs > img:nth-child(3) { animation-delay: 0.45s; }
	html.or-anim .or-hero .or-quick { animation: or-in-zoom 0.8s cubic-bezier(0.22, 1, 0.36, 1) both 0.25s; }

	html.or-anim .or-shop-hero .or-wrap > * { animation: or-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
	html.or-anim .or-shop-hero .or-wrap > :nth-child(2) { animation-delay: 0.06s; }
	html.or-anim .or-shop-hero .or-wrap > :nth-child(3) { animation-delay: 0.12s; }

	html.or-anim .or-pdp__media { animation: or-in-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
	html.or-anim .or-pdp__summary > * { animation: or-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
	html.or-anim .or-pdp__summary > :nth-child(2) { animation-delay: 0.07s; }
	html.or-anim .or-pdp__summary > :nth-child(3) { animation-delay: 0.14s; }
	html.or-anim .or-pdp__summary > :nth-child(n+4) { animation-delay: 0.21s; }

	html.or-anim .or-done__head > * { animation: or-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
	html.or-anim .or-done__head > .or-okmark { animation: or-pop-check 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
	@keyframes or-pop-check { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

	/* ---------- Hover y foco de elementos clickeables ---------- */

	/* Transición base para todo lo clickeable: ningún hover cambia de golpe.
	 * :where() tiene especificidad cero, así que cualquier regla de abajo con
	 * su propia transición (con transform, curvas con rebote…) la reemplaza. */
	:where(a, button, summary, label, input, select, textarea, .or-chip, .or-sz, .or-opt, .or-chk-row, .or-mn__item, .or-mn__sub, .or-search) {
		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease, transform 0.25s ease, text-decoration-color 0.2s ease;
	}

	.or-btn, #place_order, .checkout-button, .woocommerce a.button, .woocommerce button.button {
		transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
	}
	.or-btn:hover, #place_order:hover, .checkout-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgb(17 17 17 / 0.16);
	}
	.or-btn:active, #place_order:active { transform: translateY(0) scale(0.98); box-shadow: none; }
	.or-btn svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.or-btn:hover svg { transform: translateX(3px); }

	.or-icon-btn { transition: background 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.or-icon-btn:hover { transform: scale(1.08); }
	.or-icon-btn:active { transform: scale(0.94); }

	.or-arrow { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
	.or-arrow:not(:disabled):hover { background: var(--or-ink); color: var(--or-white); transform: scale(1.06); }

	.or-chip, .or-sz, .or-pill { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.or-chip:hover, .or-sz-opt:hover .or-sz { transform: translateY(-2px); }

	/* Subrayado que crece desde la izquierda en el menú principal. */
	.or-nav__list > li > a { position: relative; }
	.or-nav__list > li > a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--or-coral);
		transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.or-nav__list > li > a:hover::after, .or-nav__list > li:focus-within > a::after { transform: scaleX(1); }
	.or-nav__sub a { transition: background 0.2s, padding-left 0.2s, color 0.2s; }
	.or-nav__sub a:hover { background: var(--or-cream); padding-left: 22px; }

	/* Tarjetas de producto: se elevan y la foto se acerca. */
	.or-card__link .or-ph { transition: box-shadow 0.35s, border-color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
	/* Sombra con spread negativo: queda compacta y entra en el relleno del
	 * carrusel sin cortarse en los bordes. */
	.or-card__link:hover .or-ph { transform: translateY(-4px); box-shadow: 0 12px 22px -10px rgb(17 17 17 / 0.28); border-color: transparent; }
	.or-card__link .or-ph img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	.or-card__link:hover .or-ph img { transform: scale(1.06); }
	.or-card__name { transition: color 0.2s; }
	.or-card__link:hover .or-card__name { color: var(--or-coral-deep); }

	/* Categorías: la foto se acerca y la etiqueta se abre un poco. */
	.or-cat .or-ph { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.35s; }
	.or-cat .or-ph img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	.or-cat:hover .or-ph { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 22px -10px rgb(17 17 17 / 0.28); }
	.or-cat:hover .or-ph img { transform: scale(1.08); }
	.or-cat__lab { transition: letter-spacing 0.3s, color 0.2s; }
	.or-cat:hover .or-cat__lab { letter-spacing: 0.12em; color: var(--or-coral-deep); }

	/* Banners: cada foto gira levemente al pasar. */
	.or-banner__img img { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.or-banner__img a:hover img { transform: scale(1.06) rotate(-2deg); }

	/* Reseñas y tarjetas de beneficios no tienen hover a propósito: no son
	 * clickeables, y un efecto de hover promete un clic que no lleva a nada. */

	/* Datos de contacto: sólo suben. */
	a.or-citem { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
	a.or-citem:hover { transform: translateY(-4px); }

	.or-foot__col a { transition: color 0.2s, transform 0.2s; display: inline-block; }
	.or-foot__col a:hover { transform: translateX(4px); }

	.or-opt, .wc_payment_method { transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s; }
	.or-opt:hover { transform: translateY(-1px); }

	.or-gallery__thumb { transition: border-color 0.2s, transform 0.2s; }
	.or-gallery__thumb:hover { transform: translateY(-2px); }

	.or-mn__item, .or-mn__sub { transition: background 0.2s, padding-left 0.2s; }
	.or-mn__sub:hover { background: var(--or-cream); padding-left: 42px; }
	.or-mn__group > summary svg, .or-facet > summary svg, .or-acc summary span { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

	/* WhatsApp: un pulso cada pocos segundos para que se note sin molestar. */
	.or-wa { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s; }
	.or-wa:hover { transform: scale(1.1); }
	.or-wa::after {
		content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--or-wa);
		animation: or-wa-pulse 3.2s ease-out infinite 2s; pointer-events: none;
	}
	@keyframes or-wa-pulse {
		0% { transform: scale(1); opacity: 0.7; }
		45%, 100% { transform: scale(1.55); opacity: 0; }
	}

	/* Contador del carrito: rebota cuando se agrega algo (site.js pone .is-bump). */
	.or-badge-count.is-bump { animation: or-pop-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

	/* Cajón: el producto recién agregado se ilumina un instante y el aviso
	 * «Agregaste…» entra desde arriba. */
	.or-drawer__added { animation: or-in-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.or-mini__item.is-added { animation: or-flash 1.6s ease both; }
	@keyframes or-flash { 0%, 35% { background: #FBEDE9; } 100% { background: transparent; } }
	.or-mini__item.is-added { margin: 0 -20px; padding-left: 20px; padding-right: 50px; }
	.or-mini__item.is-added .or-mini__remove { right: 20px; }

	/* Las líneas del cajón entran escalonadas al abrirlo. */
	.or-drawer.is-entering .or-mini__item { animation: or-in-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.or-drawer.is-entering .or-mini__item:nth-child(2) { animation-delay: 0.05s; }
	.or-drawer.is-entering .or-mini__item:nth-child(3) { animation-delay: 0.1s; }
	.or-drawer.is-entering .or-mini__item:nth-child(n+4) { animation-delay: 0.15s; }
	.or-drawer.is-entering .or-mini__item.is-added { animation: or-flash 1.6s ease both; }
}