/**
 * Homepage motion.
 *
 * Premium, restrained scroll and hover motion for the front page only. Enqueued
 * solely on the homepage (see inc/enqueue.php), so nothing here can reach another
 * page, and every hidden state is gated behind `body.js` so a visitor without
 * JavaScript sees the finished page rather than a blank one.
 *
 * All motion is transform/opacity — compositor-friendly, no layout thrash — and
 * is fully neutralised under prefers-reduced-motion. It layers on top of the
 * theme's global `.js [data-reveal]` fade-up without changing it elsewhere.
 *
 * Hooks (set in homepage.php + assets/js/home-animations.js):
 *   [data-anim-stagger]        container whose direct children cascade in
 *   [data-anim-image]          media box whose image/video does a gentle zoom-reveal
 *   .hero__media.has-parallax  hero art that drifts slower than the scroll
 *
 * @package Burger_Boi
 * @since   1.0.0
 */

:root {
	/* A calm, expensive-feeling ease-out used across the homepage motion. */
	--home-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* 1. Staggered grid reveal                                                    */
/* -------------------------------------------------------------------------- */

/*
 * Direct children fade up in sequence once their grid scrolls into view.
 * home-animations.js sets --anim-i on each child and adds .is-in to the grid.
 */
.home.js [data-anim-stagger] > * {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 640ms var(--home-ease),
		transform 640ms var(--home-ease);
	transition-delay: calc(var(--anim-i, 0) * 70ms);
}

.home.js [data-anim-stagger].is-in > * {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------- */
/* 2. Image zoom-reveal                                                        */
/* -------------------------------------------------------------------------- */

/*
 * The artwork starts a touch oversized and transparent, then settles to rest —
 * a soft "photo develops in" rather than a hard cut. The wrapper already clips
 * its media in the base styles; this only guarantees it.
 */
.home.js [data-anim-image] {
	overflow: hidden;
}

.home.js [data-anim-image] img,
.home.js [data-anim-image] video {
	opacity: 0;
	transform: scale(1.1);
	filter: blur(12px);
	transition:
		opacity 900ms var(--home-ease),
		transform 1200ms var(--home-ease),
		filter 900ms var(--home-ease);
	will-change: transform, filter;
}

.home.js [data-anim-image].is-in img,
.home.js [data-anim-image].is-in video {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Release the compositor hint once the reveal has run. */
.home.js [data-anim-image].is-in img,
.home.js [data-anim-image].is-in video {
	will-change: auto;
}

/* -------------------------------------------------------------------------- */
/* 3. Hero — slow Ken Burns on the art, drift parallax on the frame            */
/* -------------------------------------------------------------------------- */

/*
 * Two independent transforms that never fight: the scale lives on the image,
 * the parallax translate on its wrapper. The wrapper only gains overscan +
 * will-change once JS marks it .has-parallax (desktop only), so mobile keeps a
 * plain, static hero.
 */
.home .hero__media img {
	animation: home-kenburns 26s var(--home-ease) both;
}

@keyframes home-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}

.home .hero {
	/* Clip the parallax overscan so a drifting edge is never exposed. */
	overflow: hidden;
}

/*
 * The drift only ever translates *down* (0 → MAX px in home-animations.js), so
 * the frame needs headroom at the top and nothing extra at the base. Sizing the
 * overscan in px — just past that cap — instead of a percentage of the hero
 * keeps the frame close to the hero's own aspect ratio, so `object-fit: cover`
 * crops far less of the art than a 16% taller box did.
 */
.home .hero__media.has-parallax {
	top: -64px; /* > the 56px translate cap, so the top edge never shows. */
	height: calc(100% + 64px);
	will-change: transform;
}

/* -------------------------------------------------------------------------- */
/* 4. Hover micro-interactions                                                 */
/* -------------------------------------------------------------------------- */

/* Cards lift a touch; the image zoom-on-hover already lives in the section CSS. */
.home .menu-cats__item,
.home .bento__cell,
.home .loc-card,
.home .news-card--row {
	transition:
		transform 300ms var(--home-ease),
		box-shadow 300ms var(--home-ease);
}

.home .menu-cats__item:hover,
.home .bento__cell:hover {
	transform: translateY(-6px);
}

.home .loc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgb(0 0 0 / 8%);
}

/* Primary actions rise slightly on hover — a small, tactile cue. */
.home .hero__actions .btn,
.home .order-strip .btn,
.home .story .btn,
.home .signature__buy .btn,
.home .newsletter__submit {
	transition:
		transform 220ms var(--home-ease),
		box-shadow 220ms var(--home-ease),
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease);
}

.home .hero__actions .btn:hover,
.home .order-strip .btn:hover,
.home .story .btn:hover,
.home .signature__buy .btn:hover,
.home .newsletter__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
}

/* Scroll cue nudges down on hover. */
.home .hero__scroll {
	transition: transform 240ms var(--home-ease), opacity var(--duration) var(--ease);
}

.home .hero__scroll:hover {
	transform: translateY(4px);
}

/* -------------------------------------------------------------------------- */
/* 5. Advanced — hero-title wipe, 3D tilt, magnetic CTAs, button sheen         */
/* -------------------------------------------------------------------------- */

/*
 * Hero headline is uncovered by a rising mask on load — a one-shot clip wipe
 * that always ends fully revealed (animation-fill-mode: both), so it can never
 * leave the title clipped even if something delays the global fade-up. It runs
 * on the clip-path axis only, so the theme's opacity/transform fade-up is
 * untouched and the two simply layer.
 */
.home.js .hero__title {
	animation: home-title-wipe 1000ms var(--home-ease) 120ms both;
}

@keyframes home-title-wipe {
	from { clip-path: inset(0 -6% 108% -6%); }
	to   { clip-path: inset(0 -6% -8% -6%); }
}

/*
 * 3D tilt on the interactive cards. JS adds `.home-tilt` (desktop + fine pointer,
 * motion allowed only) and writes the rotation inline; here the cards get a
 * smooth return, and while tilt is active the plain hover-lift on their
 * containers steps aside so the two effects never stack.
 */
.home.home-tilt .cat-card,
.home.home-tilt .fav-card {
	transition: transform 200ms var(--home-ease);
	transform-style: preserve-3d;
	will-change: transform;
}

.home.home-tilt .menu-cats__item:hover,
.home.home-tilt .bento__cell:hover {
	transform: none;
}

/* Magnetic CTAs — JS nudges them toward the cursor; keep the hint contained. */
.home .is-magnetic {
	will-change: transform;
}

/*
 * A soft gleam wipes across the filled primary actions on hover. The sweep is a
 * clipped ::after so it never escapes the button, and it is decorative only
 * (pointer-events: none), so it never interferes with the click.
 */
.home .hero__actions .btn--primary,
.home .order-strip .btn--purple,
.home .signature__buy .btn--primary,
.home .newsletter__submit {
	position: relative;
	overflow: hidden;
}

.home .hero__actions .btn--primary::after,
.home .order-strip .btn--purple::after,
.home .signature__buy .btn--primary::after,
.home .newsletter__submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 28%) 50%, transparent 100%);
	transform: skewX(-18deg);
	transition: left 650ms var(--home-ease);
	pointer-events: none;
}

.home .hero__actions .btn--primary:hover::after,
.home .order-strip .btn--purple:hover::after,
.home .signature__buy .btn--primary:hover::after,
.home .newsletter__submit:hover::after {
	left: 135%;
}

/* -------------------------------------------------------------------------- */
/* 6. Reduced motion — show everything, animate nothing                        */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.home.js [data-anim-stagger] > *,
	.home.js [data-anim-image] img,
	.home.js [data-anim-image] video {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.home.js .hero__title {
		animation: none !important;
		clip-path: none !important;
	}

	.home .hero__media img {
		animation: none !important;
	}

	.home .hero__media.has-parallax {
		top: 0;
		height: 100%;
		transform: none !important;
	}

	/* No gleam sweep, no tilt/magnetic (those are never initialised in JS). */
	.home .hero__actions .btn--primary::after,
	.home .order-strip .btn--purple::after,
	.home .signature__buy .btn--primary::after,
	.home .newsletter__submit::after {
		display: none !important;
	}
}