/* ==========================================================================
 * Kebabchik — "Wow" conversion motion
 * Fly-to-cart, cart catch + ember spark, count pop, free-delivery goal bar.
 *
 * Design language: warm, appetizing, confident. Snappy easings (food has
 * weight → it drops; the cart catches with a playful pop; embers = grill).
 * GPU-only (transform / opacity). Fully neutralised under reduced-motion.
 * ====================================================================== */

/* The dish photo that arcs into the cart ---------------------------------- */
.kk-fly {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	width: 78px;
	height: 78px;
	margin: -39px 0 0 -39px;          /* centre the clone on its x/y point */
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow:
		0 16px 36px rgba(22, 7, 3, .45),
		inset 0 0 0 3px rgba(255, 255, 255, .94);
	pointer-events: none;
	will-change: transform, opacity;
	contain: layout style paint;
}

/* Ember sparks that burst from the cart on catch -------------------------- */
.kk-spark {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147482999;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, #ffe6a6 0%, #ff8a1e 48%, rgba(255, 70, 0, 0) 72%);
	will-change: transform, opacity;
}

/* Cart icon is the catch target — give it a clean transform origin -------- */
.kebabchik-cart-bar__icon {
	will-change: transform;
	transform-origin: 50% 60%;
}

/* Free-delivery goal bar (prepended into the cart bar) -------------------- */
.kebabchik-cart-bar.kk-has-goal {
	flex-direction: column;
	gap: 9px;
}

.kk-goal {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 360px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(28, 13, 10, .92);
	color: #fff;
	box-shadow: 0 10px 26px rgba(22, 7, 3, .28);
	font: 700 12.5px/1.15 inherit;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.kk-goal.kk-goal--in {
	opacity: 1;
	transform: none;
}

.kk-goal__track {
	position: relative;
	flex: 1 1 auto;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
}
.kk-goal__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	min-width: 7px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ffc24d 0%, #ff7a18 55%, #ff3d2e 100%);
	transition: width .6s cubic-bezier(.22, 1, .36, 1);
	will-change: width;
}
.kk-goal__fill::after {                 /* moving sheen on the fill */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
	transform: translateX(-100%);
}
.kk-goal--reached .kk-goal__fill {
	background: linear-gradient(90deg, #8bd34f 0%, #36c46a 100%);
}
.kk-goal--reached .kk-goal__fill::after {
	animation: kk-sheen 1.2s ease-in-out infinite;
}
.kk-goal__label {
	flex: 0 0 auto;
	white-space: nowrap;
	letter-spacing: .01em;
}
.kk-goal__label b {
	font-weight: 800;
}

@keyframes kk-sheen { to { transform: translateX(100%); } }

@media (max-width: 600px) {
	.kk-goal { max-width: 330px; padding: 7px 14px; font-size: 12px; }
	.kk-fly  { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}

/* Respect users who ask for less motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kk-fly,
	.kk-spark { display: none !important; }
	.kk-goal,
	.kk-goal__fill { transition: none; }
	.kk-goal--reached .kk-goal__fill::after { animation: none; }
}