/**
 * «Añadir al carrito» → la foto del producto vuela hasta el carrito del header.
 *
 * Dos piezas:
 *   · `.pz-fly`      — la copia de la foto que viaja (la crea pz-fly-to-cart.js).
 *   · `.pz-cart--bump` — el rebote del botón «Ver carrito» cuando aterriza.
 *
 * El vuelo se dibuja con dos cajas anidadas para que la trayectoria sea un ARCO:
 * la de fuera se mueve solo en X y la de dentro solo en Y, cada una con su curva
 * de aceleración. Con una sola caja el movimiento saldría en línea recta.
 *
 * Las animaciones las lanza el JS con la Web Animations API; aquí solo viven la
 * posición/aspecto del clon y el rebote del carrito, que sí es CSS puro porque
 * el fragmento AJAX de WooCommerce reemplaza el `<a class="pz-cart">` entero y
 * es más simple volver a ponerle una clase que rehacer una animación en JS.
 */

.pz-fly {
	position: fixed;
	top: 0;
	left: 0;
	/* Por encima del header (1000) y de los avisos toast (99990); por debajo del
	   carrito lateral del cotizador (1000000). */
	z-index: 100000;
	pointer-events: none;
	will-change: transform;
}

.pz-fly__inner {
	width: 100%;
	height: 100%;
	will-change: transform, opacity;
}

.pz-fly__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	background-color: var(--ev-cream, #f4e9e1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 16px 34px rgba(17, 17, 17, .28);
}

/* -------------------------------------------------------------------------
   Rebote del botón «Ver carrito» del lateral.
   La clase se pone en el <a> DESPUÉS de que WooCommerce sustituya el fragmento,
   así que no se pierde a mitad de animación.
   ------------------------------------------------------------------------- */

.pz-cart--bump {
	animation: pz-cart-bump .5s cubic-bezier(.22, .9, .3, 1.2);
}

.pz-cart--bump .pz-cart__ico {
	animation: pz-cart-ico .5s cubic-bezier(.22, .9, .3, 1.2);
}

/* El contador cambia de número justo en este momento: el destello lo hace
   evidente sin tener que mirar la cifra. */
.pz-cart--bump .pz-cart__count {
	animation: pz-cart-count .6s cubic-bezier(.22, .9, .3, 1.2);
}

@keyframes pz-cart-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.07); }
	70%  { transform: scale(.985); }
	100% { transform: scale(1); }
}

@keyframes pz-cart-ico {
	0%   { transform: translateY(0) rotate(0); }
	30%  { transform: translateY(-4px) rotate(-12deg); }
	60%  { transform: translateY(0) rotate(8deg); }
	100% { transform: translateY(0) rotate(0); }
}

@keyframes pz-cart-count {
	0%   { transform: scale(1); background: rgba(255, 255, 255, .26); }
	30%  { transform: scale(1.45); background: #fff; color: var(--pz-c-purple, #6b4bd8); }
	100% { transform: scale(1); background: rgba(255, 255, 255, .26); }
}

/* -------------------------------------------------------------------------
   Sin animación por preferencia del sistema: el JS ni siquiera lanza el vuelo,
   pero el rebote se anula aquí por si la clase llega igualmente.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pz-cart--bump,
	.pz-cart--bump .pz-cart__ico,
	.pz-cart--bump .pz-cart__count { animation: none !important; }
}