/* ==========================================================================
   Homepage motion + 3D (paired with assets/js/ce-motion.js).
   Hidden states apply only under html.ce-motion (set by JS), so content is
   always visible without JS. Everything is off for prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Scroll reveals ------------------------------------------------------ */
	.ce-motion .ce-reveal {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
		transition:
			opacity 480ms var(--ce-ease) var(--ce-delay, 0ms),
			transform 480ms var(--ce-ease) var(--ce-delay, 0ms);
	}

	.ce-motion .ce-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Hero entrance ------------------------------------------------------ */
	/* LCP-safe: the H1 and hero tiles never start invisible; only position animates. */
	.ce-motion .ce-hero__copy > * {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
		transition: opacity 520ms var(--ce-ease), transform 520ms var(--ce-ease);
	}

	.ce-motion .ce-hero__copy > .ce-hero__title {
		opacity: 1;
	}

	.ce-motion .ce-hero.is-ready .ce-hero__copy > * { opacity: 1; transform: none; }
	.ce-motion .ce-hero.is-ready .ce-hero__copy > :nth-child(2) { transition-delay: 80ms; }
	.ce-motion .ce-hero.is-ready .ce-hero__copy > :nth-child(3) { transition-delay: 160ms; }
	.ce-motion .ce-hero.is-ready .ce-hero__copy > :nth-child(4) { transition-delay: 240ms; }

	/* 3D stage for the collage */
	.ce-hero__collage {
		--ce-rx: 0deg;
		--ce-ry: 0deg;
		perspective: 1200px;
		transform-style: preserve-3d;
	}

	.ce-hero__collage > .ce-hero__tile {
		transform:
			rotateX(var(--ce-rx)) rotateY(var(--ce-ry))
			translateZ(var(--ce-z, 0px));
		transform-style: preserve-3d;
		transition: transform 600ms var(--ce-ease), box-shadow 600ms var(--ce-ease), opacity 700ms var(--ce-ease);
	}

	.ce-hero__collage.is-tilting > .ce-hero__tile {
		transition: transform 120ms linear, box-shadow 300ms var(--ce-ease);
	}

	/* Depth layers: tiles sit at different distances from the viewer */
	.ce-hero__tile--1 { --ce-z: 40px; }
	.ce-hero__tile--2 { --ce-z: 10px; }
	.ce-hero__tile--3 { --ce-z: 70px; }

	.ce-hero__collage.is-tilting > .ce-hero__tile {
		box-shadow:
			calc(var(--ce-ry) * -1.4) calc(var(--ce-rx) * 1.4 + 18px) 42px rgba(41, 39, 34, .14);
	}

	/* Collage entrance: tiles settle in from a 3D tilt */
	.ce-motion .ce-hero__collage > .ce-hero__tile {
		transform: rotateX(18deg) rotateY(-14deg) translate3d(0, 28px, -60px);
	}

	.ce-motion .ce-hero.is-ready .ce-hero__collage > .ce-hero__tile {
		transform:
			rotateX(var(--ce-rx)) rotateY(var(--ce-ry))
			translateZ(var(--ce-z, 0px));
	}

	.ce-motion .ce-hero.is-ready .ce-hero__tile--1 { transition-delay: 150ms; }
	.ce-motion .ce-hero.is-ready .ce-hero__tile--2 { transition-delay: 260ms; }
	.ce-motion .ce-hero.is-ready .ce-hero__tile--3 { transition-delay: 370ms; }

	/* Gentle idle float on the product images (not the tiles, so tilt stays crisp) */
	.ce-hero__tile img {
		animation: ce-float 7s var(--ce-ease) infinite alternate;
	}

	.ce-hero__tile--2 img { animation-delay: -2.3s; }
	.ce-hero__tile--3 img { animation-delay: -4.6s; }

	@keyframes ce-float {
		from { transform: translate3d(0, -4px, 0) rotate(-.6deg); }
		to   { transform: translate3d(0, 5px, 0) rotate(.6deg); }
	}

	/* 3D hover cards (category tiles, product images) ---------------- */
	.ce-tilt {
		--ce-rx: 0deg;
		--ce-ry: 0deg;
		--ce-mx: 50%;
		--ce-my: 50%;
		position: relative;
		transform: perspective(900px) rotateX(var(--ce-rx)) rotateY(var(--ce-ry));
		transition: transform 500ms var(--ce-ease), box-shadow 500ms var(--ce-ease);
	}

	.ce-tilt.is-tilting {
		box-shadow: var(--ce-shadow);
		transition: transform 120ms linear, box-shadow 300ms var(--ce-ease);
	}

	/* Light sheen following the pointer */
	.ce-tilt::after {
		background: radial-gradient(circle at var(--ce-mx) var(--ce-my), rgba(255, 255, 255, .55), transparent 55%);
		border-radius: inherit;
		content: "";
		inset: 0;
		mix-blend-mode: soft-light;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		transition: opacity 300ms var(--ce-ease);
		z-index: 2;
	}

	.ce-tilt.is-tilting::after { opacity: 1; }

	/* Keep image zoom subtle (spec: ≤1.04) inside tilting cards */
	.ce-tilt.is-tilting img { transform: scale(1.03); }

	/* Story band: brass rule draws in */
	.ce-motion .ce-story::before {
		transform: translateX(-50%) scaleX(0);
		transition: transform 700ms var(--ce-ease) 200ms;
	}

	.ce-motion .ce-story.is-drawn::before {
		transform: translateX(-50%) scaleX(1);
	}

	/* Section-head link arrow nudge */
	.ce-section-head__link span[aria-hidden] {
		display: inline-block;
		transition: transform var(--ce-dur-fast) var(--ce-ease);
	}

	.ce-section-head__link:hover span[aria-hidden] { transform: translateX(4px); }
}