/* ============================================================================
 * V15 ANIMATIONS SHEET (priority 114) — adapted from 21st.dev Magic MCP
 *
 * Sourced from 21st.dev "Digital Serenity" inspiration (word-appear reveal,
 * underline-grow, shimmer sweep) and ported to the WordPress theme as VANILLA
 * CSS. Loaded AFTER v15-reviews-ribbon (113). Never edits a sealed sheet.
 *
 * SAFETY CONTRACT (why these can't break the page):
 *   - Scroll reveals use CSS scroll-driven animations (animation-timeline:
 *     view()), gated behind @supports. Browsers without support (Safari,
 *     Firefox) show the FINAL state — content is NEVER hidden. No JS, no
 *     scroll listener (taste-rule compliant), unlike the IntersectionObserver
 *     reveal that could strand fast-scrolled sections at opacity:0.
 *   - Reveal opacity floor is 0.55, so even a hypothetical stuck frame is
 *     fully readable.
 *   - Everything is wrapped in prefers-reduced-motion: no-preference.
 *   - Hover/ambient effects animate only transform/opacity/filter (GPU).
 *
 * Animation inventory (5 NEW + 2 pre-existing):
 *   1. CTA sheen sweep on hover            (decorative — feedback affordance)
 *   2. CTA hover lift + rose-tinted shadow (feedback — pairs w/ sealed :active)
 *   3. Image Ken Burns zoom on hover       (decorative — depth)
 *   4. Scroll-driven card reveal           (storytelling — content enters in order)
 *   5. Scroll-driven head/eyebrow reveal   (storytelling — section entrance)
 *   [pre-existing] hero blur-up (v15 reviews sheet) + reviews marquee
 * ========================================================================== */

/* Shared keyframes ---------------------------------------------------------- */
@keyframes latoxica-reveal-up {
	from { opacity: .55; transform: translateY(26px); filter: blur(4px); }
	to   { opacity: 1;   transform: translateY(0);    filter: blur(0); }
}
@keyframes latoxica-reveal-soft {
	from { opacity: .6; transform: translateY(14px); }
	to   { opacity: 1;  transform: translateY(0); }
}

/* ── 1. CTA sheen sweep on hover ──────────────────────────────────────────
 * A soft diagonal highlight sweeps across the primary CTA on hover. Adapted
 * from the 21st.dev shimmer. NOT a neon glow (taste-rule safe): a single
 * translucent band, no outer shadow bloom. The ::after is free — the sealed
 * v14 button rule defines no pseudo-element. */
@media (prefers-reduced-motion: no-preference) {
	.latoxica-button--primary,
	.latoxica-button--filled-cream {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.latoxica-button--primary::after,
	.latoxica-button--filled-cream::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%);
		transform: translateX(-130%);
		transition: transform .6s cubic-bezier(.16, 1, .3, 1);
		pointer-events: none;
	}
	/* Cream button has light bg + dark text → a dark sheen reads, white does not. */
	.latoxica-button--filled-cream::after {
		background: linear-gradient(115deg, transparent 35%, rgba(26, 26, 26, 0.10) 50%, transparent 65%);
	}
	.latoxica-button--primary:hover::after,
	.latoxica-button--filled-cream:hover::after {
		transform: translateX(130%);
	}
}

/* ── 2. CTA hover lift + rose-tinted shadow ───────────────────────────────
 * Tactile rise on hover, settling into the sealed v14 :active press. Shadow is
 * tinted to the rose accent (taste rule: no pure-black drop shadow). */
@media (prefers-reduced-motion: no-preference) {
	.latoxica-button {
		transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease;
	}
	.latoxica-button--primary:hover,
	.latoxica-button--filled-cream:hover,
	.latoxica-button--ghost:hover {
		transform: translateY(-2px);
	}
	.latoxica-button--primary:hover {
		box-shadow: 0 10px 26px -8px rgba(236, 44, 145, 0.45);
	}
}

/* ── 3. Image Ken Burns zoom on hover ─────────────────────────────────────
 * Section/card imagery breathes a slow zoom on hover. Wrapper clips the
 * overflow; the image scales. Image stays fully visible at all times. */
@media (prefers-reduced-motion: no-preference) {
	.latoxica-section-asymmetric__media,
	.latoxica-birria-card__photo,
	.latoxica-birria-storefront-card__photo,
	.latoxica-blog-card__media,
	.latoxica-blog-featured__media,
	.latoxica-method-step__photo,
	.latoxica-apropos-section__media,
	.latoxica-rosa-section__media,
	.latoxica-storefront-signature__media,
	.latoxica-storefront-spotlight__media,
	.latoxica-restos-asymmetric__media,
	.latoxica-trois-adresses__media,
	.latoxica-press-intro__media {
		overflow: hidden;
	}
	.latoxica-section-asymmetric__media img,
	.latoxica-birria-card__photo img,
	.latoxica-birria-storefront-card__photo img,
	.latoxica-blog-card__media img,
	.latoxica-blog-featured__media img,
	.latoxica-method-step__photo img,
	.latoxica-apropos-section__media img,
	.latoxica-rosa-section__media img,
	.latoxica-storefront-signature__media img,
	.latoxica-storefront-spotlight__media img,
	.latoxica-restos-asymmetric__media img,
	.latoxica-trois-adresses__media img,
	.latoxica-press-intro__media img {
		transition: transform .7s cubic-bezier(.16, 1, .3, 1);
		will-change: transform;
	}
	.latoxica-section-asymmetric__media:hover img,
	.latoxica-birria-card__photo:hover img,
	.latoxica-birria-storefront-card__photo:hover img,
	.latoxica-blog-card__media:hover img,
	.latoxica-blog-featured__media:hover img,
	.latoxica-method-step__photo:hover img,
	.latoxica-apropos-section__media:hover img,
	.latoxica-rosa-section__media:hover img,
	.latoxica-storefront-signature__media:hover img,
	.latoxica-storefront-spotlight__media:hover img,
	.latoxica-restos-asymmetric__media:hover img,
	.latoxica-trois-adresses__media:hover img,
	.latoxica-press-intro__media:hover img {
		transform: scale(1.06);
	}
}

/* ── 4. Scroll-driven card reveal ─────────────────────────────────────────
 * Repeated content tiles fade + slide + un-blur as they enter the viewport.
 * Each card is driven by its OWN scroll position → natural stagger, no JS
 * delays. @supports gate means non-supporting browsers show the final state.
 * range ends at cover 38% so anything already on screen at load is fully in. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.latoxica-birria-card,
		.latoxica-birria-storefront-card,
		.latoxica-blog-card,
		.latoxica-cocktail-card,
		.latoxica-method-step,
		.latoxica-trois-adresses__card,
		.latoxica-foodtruck-types__card,
		.latoxica-engagement-grid__item,
		.latoxica-press-card {
			animation: latoxica-reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 38%;
		}
	}
}

/* ── 5. Scroll-driven section-head + eyebrow reveal ───────────────────────
 * Section headers and eyebrows lift in softly as their section arrives. Same
 * scroll-driven safety. Hero is excluded (it owns the blur-up entrance). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.latoxica-section-head:not(.latoxica-hero-a__head),
		.latoxica-eyebrow:not(.latoxica-hero-a__eyebrow) {
			animation: latoxica-reveal-soft linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
	}
}