/*
 * Motion layer — Savory Spoonfuls
 * ------------------------------------------------------------------
 * Every transition/reveal on the site lives here. It is enqueued by
 * functions.php (savory_spoonfuls_motion_assets) together with
 * js/motion.js, and can be switched off without touching block code:
 *
 *   add_filter( 'savory_spoonfuls_motion', '__return_false' );
 *
 * Or delete this file + js/motion.js and the enqueue function.
 * Blocks never depend on anything defined here.
 *
 * Tuning: change the tokens below. Everything else derives from them.
 * Only `opacity` and `transform`/`translate`/`scale` are animated, so
 * nothing here triggers layout.
 * ------------------------------------------------------------------ */

:root {
	--ss-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint: fast start, soft landing */
	--ss-dur: 0.25s;         /* hover / state changes */
	--ss-dur-reveal: 0.6s;   /* scroll-in reveal */
	--ss-reveal-y: 14px;     /* how far revealed elements rise */
	--ss-stagger: 70ms;      /* delay between siblings in a grid */
	--ss-lift: -3px;         /* card hover lift */
}

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

	/* ── Interactive states ─────────────────────────────────────────── */

	.main-navigation a,
	.faq-question,
	.soup-search-page,
	.soup-search-arrow,
	.slideshow-arrow,
	.soup-search-card-title span {
		transition: color var(--ss-dur) var(--ss-ease),
		            background-color var(--ss-dur) var(--ss-ease),
		            transform var(--ss-dur) var(--ss-ease);
	}

	.ss-btn,
	.entry-content .ss-btn {
		transition: background-color var(--ss-dur) var(--ss-ease),
		            color var(--ss-dur) var(--ss-ease),
		            transform var(--ss-dur) var(--ss-ease),
		            box-shadow var(--ss-dur) var(--ss-ease);
	}

	.ss-btn:hover,
	.ss-btn:focus-visible {
		transform: translateY(-1px);
		box-shadow: 0 6px 16px -8px rgba(38, 34, 92, 0.45);
	}

	.ss-btn:active {
		transform: translateY(0);
		transition-duration: 0.08s;
	}

	.soup-search-arrow:hover,
	.slideshow-arrow:hover {
		transform: scale(1.12);
	}

	/* Soup cards: whole card lifts, image eases up slightly. The scale is
	   put on the media wrapper, not the <img>, so it stacks cleanly with
	   the existing `.is-zoom img` transform. */
	.soup-search-card,
	.featured-soups-card {
		transition: transform var(--ss-dur) var(--ss-ease);
	}

	.soup-search-card-media,
	.featured-soups-card-media {
		transition: box-shadow var(--ss-dur) var(--ss-ease),
		            scale var(--ss-dur) var(--ss-ease);
	}

	.soup-search-card:hover,
	.featured-soups-card:hover {
		transform: translateY(var(--ss-lift));
	}

	.soup-search-card:hover .soup-search-card-media,
	.featured-soups-card:hover .featured-soups-card-media {
		box-shadow: 0 14px 28px -16px rgba(38, 34, 92, 0.35);
		scale: 1.015;
	}

	/* ── Pop-ins for things JS shows (display:none → shown) ───────────
	   @starting-style animates the *entry* of newly displayed elements
	   (FAQ answers, soup cards after a filter/page change). Exit still
	   snaps, which reads as natural. Browsers without @starting-style
	   simply show the element instantly. */

	.faq-answer,
	.soup-search-empty {
		transition: opacity var(--ss-dur) var(--ss-ease),
		            translate var(--ss-dur) var(--ss-ease);
	}

	.soup-search-card {
		transition: opacity var(--ss-dur) var(--ss-ease),
		            translate var(--ss-dur) var(--ss-ease),
		            transform var(--ss-dur) var(--ss-ease);
	}

	@starting-style {
		.faq-answer:not([hidden]) {
			opacity: 0;
			translate: 0 -6px;
		}

		.soup-search-card,
		.soup-search-empty:not([hidden]) {
			opacity: 0;
			translate: 0 8px;
		}
	}

	/* ── Scroll-in reveal ───────────────────────────────────────────────
	   js/motion.js adds `ss-motion` to <html> before first paint, marks
	   targets with `.ss-reveal`, and flips `.is-in` when they enter the
	   viewport. Without JS nothing is ever hidden. Grid children get
	   `--ss-i` for stagger. */

	html.ss-motion .ss-reveal {
		opacity: 0;
		translate: 0 var(--ss-reveal-y);
		transition: opacity var(--ss-dur-reveal) var(--ss-ease),
		            translate var(--ss-dur-reveal) var(--ss-ease),
		            transform var(--ss-dur) var(--ss-ease);
		transition-delay: calc(var(--ss-i, 0) * var(--ss-stagger)),
		                  calc(var(--ss-i, 0) * var(--ss-stagger)),
		                  0s;
	}

	html.ss-motion .ss-reveal.is-in {
		opacity: 1;
		translate: 0 0;
	}

	/* Once revealed, shorten the transition so later hover effects on the
	   same element are not slowed by the long reveal duration. */
	html.ss-motion .ss-reveal.is-settled {
		transition-delay: 0s;
		transition-duration: var(--ss-dur);
	}
}