/*
 * Motion system — "Quiet Gold".
 * transform/opacity only; one easing family; 120–450ms.
 * Every non-essential animation collapses under prefers-reduced-motion.
 */

/* ---- Page entrance (CSS fallback + View Transitions companion) ---- */
@keyframes sbp-page-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.sbp-page-enter {
	animation: sbp-page-in var(--dur) var(--ease) both;
}

/* Opt this multi-page site into cross-document View Transitions. Supporting
   browsers animate the page swap; the rest fall back to .sbp-page-enter. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--dur);
		animation-timing-function: var(--ease);
	}
}

/* ---- Button sheen ---- */
@keyframes sbp-sheen {
	to { transform: translateX(120%); }
}

/* ---- Scroll reveal ---- */
.sbp-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.sbp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- Staggered entrance (product cards) ---- */
@keyframes sbp-rise-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.sbp-stagger > * {
	animation: sbp-rise-in var(--dur) var(--ease) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
@media (max-width: 640px) {
	.sbp-stagger > * { animation-delay: calc(var(--i, 0) * 40ms); }
}

/* ---- Input shake (wrong code / bad coupon) — single, no loop ---- */
@keyframes sbp-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}
.sbp-shake { animation: sbp-shake 0.3s var(--ease) 1; }

/* ---- Success circle-check draw ---- */
.sbp-check-draw path,
.sbp-check-draw circle {
	stroke-dasharray: var(--len, 160);
	stroke-dashoffset: var(--len, 160);
	animation: sbp-draw var(--dur-slow) var(--ease) forwards;
}
.sbp-check-draw circle { animation-duration: var(--dur); }
.sbp-check-draw path { animation-delay: var(--dur); }
@keyframes sbp-draw {
	to { stroke-dashoffset: 0; }
}

/* ---- Redirect overlay pulse ---- */
@keyframes sbp-pulse {
	0%, 100% { opacity: 0.55; transform: scale(0.94); }
	50% { opacity: 1; transform: scale(1.04); }
}
.sbp-pulse { animation: sbp-pulse 1.2s var(--ease) infinite; }

/* ---- Cart pip pulse (added to cart) ---- */
@keyframes sbp-pip {
	0% { transform: scale(1); }
	40% { transform: scale(1.5); }
	100% { transform: scale(1); }
}
.sbp-pip-pulse { animation: sbp-pip 0.4s var(--ease) 1; }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sbp-reveal { opacity: 1; transform: none; }
	.sbp-btn--primary::after { display: none; }
}