/* Baba Ganoush v3 – effects layer. Everything here is decorative and degrades to nothing. */

/* blur-up: the 16px placeholder paints behind the image and is blurred until the real file lands */
.js img[data-lqip] { background: var(--lqip) center / cover no-repeat; }
.js img[data-lqip]:not(.is-loaded) { filter: blur(14px); transform: scale(1.03); }
.js img[data-lqip].is-loaded { filter: none; transform: none; transition: filter 350ms var(--ease), transform 350ms var(--ease); }

/* lime fill on primary CTAs: a layer scales in from the cursor entry side */
.fx-fill { position: relative; overflow: hidden; isolation: isolate; }
.fx-fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lime); transform: scaleX(0); transform-origin: var(--fx-origin, left); transition: transform 280ms var(--ease); }
.fx-fill:hover::before, .fx-fill:focus-visible::before { transform: scaleX(1); }
.fx-fill:hover, .fx-fill:focus-visible { color: var(--ink); background: var(--ink); }

/* magnetic pills + card tilt: transforms set by v3-fx.js. will-change only while hovering – a permanent
   promotion on every tile/card/pill costs a compositor layer each and hurts scrolling on weak GPUs. */
.fx-magnet { transition: transform 180ms var(--ease); }
.fx-tilt { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 220ms var(--ease); }
.fx-magnet:hover, .fx-tilt:hover { will-change: transform; }
.fx-tilt.is-tilting { transition: transform 60ms linear; }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	.fx-fill::before { display: none; }
	/* the ::before is gone, so the ink-on-ink hover colour from the base rule would be invisible: restore a readable pair */
	.fx-fill:hover, .fx-fill:focus-visible { color: #fff; background: var(--charcoal); }
	.fx-magnet, .fx-tilt { transform: none !important; transition: none; will-change: auto; }
	.js img[data-lqip]:not(.is-loaded) { filter: none; transform: none; }
}