/* ===== Site Animations ===== */
/* ============================================
   LOWKEYS GLOBAL ANIMATIONS
   Smooth motion system for modern catalog UX.
   ============================================ */
[data-animation-order="0"] { --animation-order: 0; }
[data-animation-order="1"] { --animation-order: 1; }
[data-animation-order="2"] { --animation-order: 2; }
[data-animation-order="3"] { --animation-order: 3; }
[data-animation-order="4"] { --animation-order: 4; }
[data-animation-order="5"] { --animation-order: 5; }
[data-animation-order="6"] { --animation-order: 6; }
[data-animation-order="7"] { --animation-order: 7; }
[data-animation-order="8"] { --animation-order: 8; }
[data-animation-order="9"] { --animation-order: 9; }
[data-animation-order="10"] { --animation-order: 10; }
[data-animation-order="11"] { --animation-order: 11; }
[data-animation-order="12"] { --animation-order: 12; }

[data-animate],
.reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity 620ms var(--ease-smooth),
		transform 620ms var(--ease-smooth);
	transition-delay: calc(var(--animation-order, 0) * 52ms);
}

[data-animate].is-visible,
.reveal.is-visible,
.product-card.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.product-card {
	animation: productCardIn 520ms var(--ease-smooth) both;
	animation-delay: calc(var(--animation-order, 0) * 42ms);
}

.qty-btn:active,
.remove-item:active {
	transform: scale(0.96);
}


@keyframes productCardIn {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}


@keyframes cartFlyer {
	0% {
		opacity: 1;
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
	70% {
		opacity: 0.92;
		transform: translate3d(calc(var(--tx) - 50%), calc(var(--ty) - 50%), 0) scale(0.54);
	}
	100% {
		opacity: 0;
		transform: translate3d(calc(var(--tx) - 50%), calc(var(--ty) - 50%), 0) scale(0.32);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		animation-duration: 1ms;
		animation-iteration-count: 1;
		transition-duration: 1ms;
	}

	[data-animate],
	.reveal {
		opacity: 1;
		transform: none;
	}
}