/* ── Deferred animations (loaded non-blocking, not needed for first paint) ── */

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-shimmer {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	background-size: 200% 100%;
	animation: shimmer 2s linear infinite;
}

@keyframes blob-float {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(20px, -30px) scale(1.06);
	}
	66% {
		transform: translate(-15px, 15px) scale(0.96);
	}
}

.blob {
	animation: blob-float 9s ease-in-out infinite;
}
.blob-1 {
	animation-duration: 9s;
	animation-delay: 0s;
}
.blob-2 {
	animation-duration: 11s;
	animation-delay: -4s;
}
.blob-3 {
	animation-duration: 7s;
	animation-delay: -2s;
}

/* ── Loading animations ──────────────────────────────────────────────────── */
@keyframes tp-pulse {
	0%,
	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 0px #f97316);
	}
	50% {
		transform: scale(1.12);
		filter: drop-shadow(0 0 18px #f97316aa);
	}
}

@keyframes tp-progress {
	0% {
		width: 0%;
		margin-left: 0;
	}
	50% {
		width: 60%;
		margin-left: 20%;
	}
	100% {
		width: 0%;
		margin-left: 100%;
	}
}

@keyframes progressFill {
	from {
		width: 0%;
	}
	to {
		width: 85%;
	}
}

@keyframes slide-in {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.animate-slide-in {
	animation: slide-in 0.22s ease-out;
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.animate-toast-in {
	animation: toast-in 250ms ease-out;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
.animate-marquee {
	animation: marquee 35s linear infinite;
	width: max-content;
	display: flex;
}

@keyframes scroll-x {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
.animate-scroll-x {
	animation: scroll-x 25s linear infinite;
	width: max-content;
	display: flex;
}
.animate-scroll-x:hover {
	animation-play-state: paused;
}

/* ── Category card Ken Burns animations ─────────────────────────────────── */
@keyframes kb-a {
	0% {
		transform: scale(1) translate(0%, 0%);
	}
	100% {
		transform: scale(1.18) translate(-4%, -3%);
	}
}
@keyframes kb-b {
	0% {
		transform: scale(1.12) translate(-3%, -2%);
	}
	100% {
		transform: scale(1) translate(4%, 2%);
	}
}
@keyframes kb-c {
	0% {
		transform: scale(1.06) translate(3%, 1%);
	}
	100% {
		transform: scale(1.18) translate(-3%, -4%);
	}
}
.kb-a {
	animation: kb-a 8s ease-in-out alternate infinite;
}
.kb-b {
	animation: kb-b 10s ease-in-out alternate infinite;
}
.kb-c {
	animation: kb-c 9s ease-in-out alternate infinite;
}

/* ── View Transitions ────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 180ms;
	animation-timing-function: ease-in-out;
}
::view-transition-old(product-img-*),
::view-transition-new(product-img-*) {
	animation-duration: 350ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ── Shimmer on text ─────────────────────────────────────────────────────── */
@keyframes shimmer-move {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}
.shimmer-text {
	background: linear-gradient(
		90deg,
		#ef4444 0%,
		#f97316 30%,
		#fbbf24 50%,
		#f97316 70%,
		#ef4444 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shimmer-move 4s linear infinite;
}

/* ── Pulsing dot indicator ───────────────────────────────────────────────── */
@keyframes pulse-dot {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(0.75);
	}
}
.pulse-dot {
	animation: pulse-dot 1.4s ease-in-out infinite;
}

/* ── Cart badge pop ──────────────────────────────────────────────────────── */
@keyframes badge-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.5);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes greenPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
	}
}
.badge-pop {
	animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Add-to-cart pulse ring ──────────────────────────────────────────────── */
@keyframes cart-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
	}
}
.btn-added {
	animation: cart-ring 0.8s ease-out;
}