/* ============================================================
   Motion / 3D layer — Akshaya Home Foods
   Additive on top of style.css. Nothing here removes existing
   styles; it only adds depth, tilt and micro-interaction polish.
   ============================================================ */

:root {
	--tilt-perspective: 1500px;
	--card-lift: -10px;
}

/* The hero owns its own motion now — see css/hero3d.css and js/hero/. */

/* ---------- Tilt-to-inspect product / content cards ---------- */

.tilt-3d {
	perspective: 1000px;
}

.tilt-3d-inner {
	transform: perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) translateZ(var(--tilt-tz, 0px));
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
	position: relative;
}

.tilt-3d.is-tilting .tilt-3d-inner {
	transition: transform .08s linear, box-shadow .4s ease;
}

.tilt-3d .mc-img,
.tilt-3d .chef-img,
.tilt-3d .gallery-tile-img,
.tilt-3d .blog-img {
	position: relative;
	overflow: hidden;
}

.tilt-shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, .55), transparent 55%);
	opacity: 0;
	transition: opacity .3s ease;
	mix-blend-mode: soft-light;
	z-index: 5;
}

.tilt-3d.is-tilting .tilt-shine {
	opacity: 1;
}

/* ---------- Magnetic buttons ---------- */

.magnetic-btn {
	display: inline-flex;
	will-change: transform;
}

/* ---------- Add-to-cart flight ---------- */

.fly-to-cart-clone {
	position: fixed;
	top: 0;
	left: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
	z-index: 3000;
	box-shadow: 0 10px 30px -6px rgba(36, 22, 8, .5);
	border: 3px solid var(--cream);
	will-change: transform, opacity;
}

.fly-to-cart-clone img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Uses the individual `scale` / `rotate` properties rather than `transform`,
   so these compose with the magnetic-hover transform GSAP writes inline on
   the cart button instead of overriding it. */
@keyframes cartBadgeBump {
	0% { scale: 1; }
	35% { scale: 1.7; color: var(--chili); }
	100% { scale: 1; }
}

.cart-badge-bump {
	display: inline-block;
	animation: cartBadgeBump .55s cubic-bezier(.22, 1, .36, 1);
}

@keyframes cartWobble {
	0% { rotate: 0deg; scale: 1; }
	12% { rotate: -14deg; scale: 1.12; }
	28% { rotate: 11deg; scale: 1.1; }
	44% { rotate: -8deg; scale: 1.05; }
	60% { rotate: 5deg; scale: 1.02; }
	76% { rotate: -2deg; scale: 1; }
	100% { rotate: 0deg; scale: 1; }
}

.cart-btn-wobble {
	animation: cartWobble .75s cubic-bezier(.36, .07, .19, .97);
	transform-origin: 50% 60%;
}

#navCartBtn {
	position: relative;
}

/* "+1" chip that rises out of the cart once the item lands */
.cart-plus-chip {
	position: absolute;
	top: -6px;
	right: 6px;
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 100px;
	background: var(--chili);
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	pointer-events: none;
	animation: cartPlusChip .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes cartPlusChip {
	0% { opacity: 0; translate: 0 6px; scale: .6; }
	20% { opacity: 1; translate: 0 -4px; scale: 1.08; }
	70% { opacity: 1; translate: 0 -14px; scale: 1; }
	100% { opacity: 0; translate: 0 -24px; scale: .95; }
}

@media (prefers-reduced-motion: reduce) {
	.cart-btn-wobble,
	.cart-badge-bump {
		animation: none;
	}
}

/* ---------- Marquee, given a subtle 3D shelf tilt ---------- */

.marquee-strip {
	perspective: 800px;
}

.marquee-strip .marquee-track {
	transform: rotateX(2deg);
}

/* ---------- Scroll-reveal helper (state set/removed via JS+GSAP only) ---------- */

.reveal-3d {
	will-change: transform, opacity;
}

/* ---------- Reduced motion & touch safety ---------- */

@media (prefers-reduced-motion: reduce) {

	.tilt-3d-inner,
	.magnetic-btn {
		transition: none !important;
		transform: none !important;
	}
}

@media (hover: none) and (pointer: coarse) {
	.tilt-shine {
		display: none;
	}
}