/* ==========================================================================
   Carnival Meat Lab — Premium: MOVIMIENTO (P1 «Sobria»). 2026-11-03.
   Se encola después de premium.css. La parte 1 (microinteracciones) sirve en home, tienda, categorías, búsqueda
   y ficha; la parte 2 (aparición) solo hace algo donde se carga movimiento.js, que va solo en la home D3.
   Ritmo premium: duraciones largas y curvas que frenan suave, sin rebotes:
   - --cml-p-suave  cubic-bezier(.22, 1, .36, 1)  «ease-out-soft» de Joselito (transform 1 s, color .3 s).
   - --cml-p-enf    cubic-bezier(.05, .7, .1, 1)  «emphasized decelerate» de Material 3 (entradas de 400–600 ms).
   Solo transform/scale, opacity y clip-path: CLS 0. Nada empieza oculto sin JS; con «reducir movimiento»,
   nada se mueve ni se oculta y los cambios de color son instantáneos.
   ========================================================================== */
:root {
	--cml-p-suave: cubic-bezier(.22, 1, .36, 1);
	--cml-p-enf: cubic-bezier(.05, .7, .1, 1);
	--cml-p-color: 300ms cubic-bezier(.2, 0, 0, 1);
}

/* ==========================================================================
   1. MICROINTERACCIONES — tarjetas (.cml-d3-cards), botones (.cml-btn, ficha, barra fija) y galería de la ficha
   ========================================================================== */
.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:focus-visible { outline: 1px solid var(--cml-granate, #630d16); outline-offset: 4px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cml-granate, #630d16); }
.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title,
.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:focus-visible .woocommerce-loop-product__title { color: var(--cml-granate, #630d16) !important; }
/* Respuesta al toque (móvil): velo casi imperceptible sobre la foto, solo opacidad */
.cml-d3-cards ul.products > li.product .cml-d3-foto::after { content: ""; position: absolute; inset: 0; background: #1a1a1a; opacity: 0; pointer-events: none; }
.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:active .cml-d3-foto::after { opacity: .06; }

@media (prefers-reduced-motion: no-preference) {
	body .cml-d3-cards.cml-d3-cards ul.products > li.product .woocommerce-loop-product__title { transition: color var(--cml-p-color); }
	.cml-d3-cards ul.products > li.product .cml-d3-foto::after { transition: opacity 400ms var(--cml-p-suave); }
	.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:active .cml-d3-foto::after { transition-duration: 80ms; }
	/* Botones: el color cambia despacio (300 ms) y al pulsar ceden un 2 % */
	body .cml-d3-cards.cml-d3-cards ul.products > li.product .cml-btn,
	body .cml-d3 .cml-btn,
	body.single-product form.cart .single_add_to_cart_button,
	body .cml-buybar__btn {
		transition: background-color var(--cml-p-color), color var(--cml-p-color), border-color var(--cml-p-color), scale 160ms var(--cml-p-suave) !important;
	}
	body .cml-d3-cards.cml-d3-cards ul.products > li.product .cml-btn:active,
	body .cml-d3 .cml-btn:active,
	body.single-product form.cart .single_add_to_cart_button:active,
	body .cml-buybar__btn:active { scale: .98; }
	/* Ficha: miniaturas de la galería, fundido lento (la foto grande no se toca: es el LCP) */
	body.single-product .woocommerce-product-gallery .flex-control-thumbs img { transition: opacity 400ms var(--cml-p-suave); }
}
/* Zoom lento de la foto de tarjeta, solo con ratón (Joselito 1.06 en 1 s; Aesop 1.1 en .5 s; aquí 1.03 en 700 ms) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	body .cml-d3-cards.cml-d3-cards ul.products > li.product .cml-d3-foto > img { transition: scale 700ms var(--cml-p-suave); }
	body .cml-d3-cards.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:hover .cml-d3-foto > img,
	body .cml-d3-cards.cml-d3-cards ul.products > li.product a.woocommerce-LoopProduct-link:focus-visible .cml-d3-foto > img { scale: 1.03; }
}

/* ==========================================================================
   2. APARICIÓN — solo home D3 (las clases las pone movimiento.js, y solo a lo que está debajo de la pantalla)
   ==========================================================================
   .cml-rv-t  titular: se revela con una máscara de abajo hacia arriba (clip-path) y sube un cuarto de línea. 600 ms.
   .cml-rv-f  texto y filas del horario: solo fundido, sin desplazamiento, escalonado 90 ms. 700 ms.
   .cml-rv-b  tarjeta/bloque: fundido y 8 px, escalonado 90 ms (tope 3). 800 ms.
   El recorte deja 0,3 em de margen alrededor para no cortar tildes ni descendentes al terminar. */
@media (prefers-reduced-motion: no-preference) {
	.cml-rv-t { clip-path: inset(calc(100% + .3em) -.3em -.3em -.3em); transform: translateY(.25em); }
	.cml-rv-t.cml-rv--in { clip-path: inset(-.3em -.3em -.3em -.3em); transform: none;
		transition: clip-path 600ms var(--cml-p-enf), transform 600ms var(--cml-p-enf); }
	.cml-rv-f { opacity: 0; }
	.cml-rv-f.cml-rv--in { opacity: 1; transition: opacity 700ms var(--cml-p-suave) calc(120ms + var(--cml-i, 0) * 90ms); }
	.cml-rv-b { opacity: 0; transform: translateY(8px); }
	.cml-rv-b.cml-rv--in { opacity: 1; transform: none;
		transition: opacity 700ms var(--cml-p-suave), transform 800ms var(--cml-p-suave);
		transition-delay: calc(var(--cml-i, 0) * 90ms); }
}
@media print { .cml-rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } }