/* Full-screen "free shipping unlocked" celebration: a brief shower of stars
 * plus a centered badge, layered over the whole page. Built by
 * assets/js/free-shipping-celebration.js, which sets the per-star custom
 * properties (--x, --size, --delay, --duration, --drift). Purely decorative
 * and non-interactive. */

.listiko-fs-celebration {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
}

/* ── Falling stars ───────────────────────────────────────────────────────── */

.listiko-fs-celebration__star {
	position: absolute;
	top: -8vh;
	left: var(--x, 50%);
	width: var(--size, 1rem);
	height: var(--size, 1rem);
	background-color: var(--listiko-color-accent, #f5a623);
	clip-path: polygon(
		50% 0%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);
	opacity: 0;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--listiko-color-accent, #f5a623) 60%, transparent));
	animation: listiko-fs-fall var(--duration, 3s) cubic-bezier(0.4, 0.1, 0.7, 1) var(--delay, 0s) forwards;
}

@keyframes listiko-fs-fall {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(540deg) scale(1);
		opacity: 0;
	}
}

/* ── Center badge ────────────────────────────────────────────────────────── */

.listiko-fs-celebration__badge {
	position: absolute;
	top: 38%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: min(90vw, 28rem);
	padding: 0.875rem 1.5rem;
	border-radius: var(--listiko-radius-pill, 999px);
	background-color: var(--listiko-color-accent, #f5a623);
	color: var(--listiko-color-accent-contrast, #fff);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
	white-space: normal;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	transform: translate(-50%, -50%) scale(0.6);
	opacity: 0;
	animation: listiko-fs-badge 3.2s ease both;
}

.listiko-fs-celebration__badge-icon {
	font-size: 1.4em;
	line-height: 1;
}

@keyframes listiko-fs-badge {
	0% {
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 0;
	}
	12% {
		transform: translate(-50%, -50%) scale(1.08);
		opacity: 1;
	}
	20% {
		transform: translate(-50%, -50%) scale(1);
	}
	80% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(0.92);
		opacity: 0;
	}
}

/* Reduced motion: no star shower, just a brief static badge fade. */
@media (prefers-reduced-motion: reduce) {
	.listiko-fs-celebration__star {
		display: none;
	}

	.listiko-fs-celebration__badge {
		animation: listiko-fs-badge-reduced 3s ease both;
	}

	@keyframes listiko-fs-badge-reduced {
		0%,
		100% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 0;
		}
		15%,
		80% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}
}