/* ============================================================
   Prime Liquidation — 3D effects layer
   Loaded AFTER theme.css so these rules extend/override it.
   Every animated rule here is neutralized site-wide by the
   prefers-reduced-motion kill-switch already in theme.css
   ( *{ animation-duration:0.01ms !important; ... } ).
   ============================================================ */

/* ---------- Hero shopping cart: floats, casts a pulsing
   drop-shadow, and (via JS) tilts toward the cursor. The price
   chip rides along since it's nested inside the same wrapper. ---------- */
.cart-hero-wrap {
	animation: pl-float 4.5s ease-in-out infinite;
	transform-style: preserve-3d;
	perspective: 900px;
	position: relative;
}
.cart-hero-wrap::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -14px;
	height: 22px;
	background: radial-gradient(ellipse at center, rgba(28, 28, 28, 0.4), transparent 72%);
	filter: blur(6px);
	z-index: -1;
	animation: pl-shadow-pulse 4.5s ease-in-out infinite;
}
.cart-hero-img {
	transition: transform 0.12s ease-out;
	will-change: transform;
	filter: drop-shadow(0 18px 22px rgba(28, 28, 28, 0.35));
}
.price-chip {
	transition: transform 0.15s ease-out;
	will-change: transform;
}
@keyframes pl-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@keyframes pl-shadow-pulse {
	0%, 100% { transform: scaleX(1);    opacity: 0.4; }
	50%      { transform: scaleX(0.82); opacity: 0.22; }

}

/* ---------- Cards: tilt-ready, lift on hover/focus even
   without JS (touch + keyboard fallback) ---------- */
.shop-card, .other-card {
	transform-style: preserve-3d;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, opacity 0.4s ease;
	will-change: transform;
}
.shop-card:hover, .shop-card:focus-within,
.other-card:hover, .other-card:focus-within {
	transform: translateY(-6px) translateZ(0);
	box-shadow: 8px 12px 0 var(--ink);
}

/* ---------- Buttons: press-down depth + gloss sweep ---------- */
.btn {
	position: relative;
	overflow: hidden;
	transform: translateZ(0);
}
.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn:active {
	transform: translateY(2px) scale(0.98);
	box-shadow: 1px 1px 0 var(--ink) !important;
}

/* ---------- Ticker: subtle conveyor-belt perspective +
   edge fade, since this is a warehouse after all ---------- */
.ticker-bar {
	perspective: 340px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
	transform: rotateX(7deg);
	transform-origin: center top;
}

/* ---------- Pricing tags: 3D flip-in reveal on scroll.
   Class added by JS only — if JS doesn't run, tags stay
   fully visible (no flash-of-invisible-content). ---------- */
.reveal-3d {
	opacity: 0;
	transform: perspective(700px) rotateX(65deg);
	transform-origin: bottom;
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-3d.in-view {
	opacity: 1;
	transform: perspective(700px) rotateX(0deg);
}

/* ---------- Cards + merch chips: 3D swing-in reveal on scroll.
   This is mobile's main "3D" moment — tilt-on-hover doesn't exist
   on touch at all, so without this, scrolling looks completely
   static on phones. No transition set here deliberately: it reuses
   .shop-card/.other-card's own transition (which already includes
   opacity) so hover behavior afterward stays exactly as before. ---------- */
.reveal-3d-card {
	opacity: 0;
	transform: perspective(800px) rotateY(28deg) translateX(24px);
}
.reveal-3d-card.in-view {
	opacity: 1;
	transform: none;
}
.chip.reveal-3d {
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tag.today {
	animation: pl-today-pulse 2.4s ease-in-out infinite;
}
@keyframes pl-today-pulse {
	0%, 100% { transform: scale(1.06) translateZ(0); }
	50%      { transform: scale(1.1) translateZ(6px); }
}

/* ---------- Map: mounted-sign panel with bevel + bolts ---------- */
.loc-primary iframe {
	box-shadow:
		inset 0 0 0 2px var(--ink),
		6px 6px 0 var(--tag-yellow),
		0 14px 26px -12px rgba(0, 0, 0, 0.45);
	position: relative;
}
.loc-primary { position: relative; }
.loc-primary::before,
.loc-primary::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #8a8a8a, #2a2a2a 70%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	top: 10px;
	z-index: 2;
}
.loc-primary::before { left: 10px; }
.loc-primary::after  { right: 10px; }

/* ---------- Section transitions: layered "shelf edge" ---------- */
#pricing, #merch, #about {
	position: relative;
}
#pricing::before, #merch::before, #about::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
	box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.5);
}

.hero { position: relative; overflow: visible; }