/**
 * Motion — the effects every JetStream site gets (ISS-0059).
 *
 * Loaded on the front end only, and only while Settings → Jetstream → « Animations »
 * is on (inc/motion.php). Every duration, easing, distance and shadow is a semantic
 * token (settings.custom.semantic.motion / .elevation) so a Studio export can
 * override them like any other decision: `elevation.hover: none` gives a flat site.
 *
 * Effects are hover / scroll polish only — content is never hidden waiting for
 * JavaScript, and everything stops under prefers-reduced-motion.
 */

:root {
	--js-motion-quick: var(--wp--custom--semantic--motion--duration--quick, 300ms);
	--js-motion-base: var(--wp--custom--semantic--motion--duration--base, 500ms);
	--js-motion-reveal: var(--wp--custom--semantic--motion--duration--reveal, 1000ms);
	--js-motion-slow: var(--wp--custom--semantic--motion--duration--slow, 1500ms);
	--js-ease-out: var(--wp--custom--semantic--motion--easing--out, cubic-bezier(0.22, 1, 0.36, 1));
	--js-ease-spring: var(--wp--custom--semantic--motion--easing--spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	--js-elevation-hover: var(--wp--custom--semantic--elevation--hover, none);
	--js-elevation-media: var(--wp--custom--semantic--elevation--media, none);
}

/* ------------------------------------------------------------------
   Buttons — spring on hover, press on click.
   ------------------------------------------------------------------ */

:where(.wp-block-button__link, .wp-element-button) {
	transition:
		transform var(--js-motion-base) var(--js-ease-spring),
		background-color var(--js-motion-quick) ease,
		box-shadow var(--js-motion-quick) ease;
}

:where(.wp-block-button__link, .wp-element-button):hover {
	transform: scale(var(--wp--custom--semantic--motion--grow--scale, 1.05));
}

:where(.wp-block-button__link, .wp-element-button):active {
	transform: scale(var(--wp--custom--semantic--motion--press--scale, 0.96));
}

/* ------------------------------------------------------------------
   Cards — lift with a soft shadow. A card is a boxed post of a query
   loop (a group with a background or a border).
   ------------------------------------------------------------------ */

:where(.wp-block-post-template > .wp-block-post > .wp-block-group:is(.has-background, .has-border-color)) {
	transition:
		transform var(--js-motion-base) var(--js-ease-out),
		box-shadow var(--js-motion-base) var(--js-ease-out);
}

:where(.wp-block-post-template > .wp-block-post > .wp-block-group:is(.has-background, .has-border-color)):hover {
	transform: translateY(var(--wp--custom--semantic--motion--lift--distance, -5px)) scale(var(--wp--custom--semantic--motion--lift--scale, 1.012));
	box-shadow: var(--js-elevation-hover);
}

/* ------------------------------------------------------------------
   Images — slow zoom inside their frame.
   ------------------------------------------------------------------ */

:where(.wp-block-post-featured-image) {
	overflow: hidden;
}

:where(.wp-block-post-featured-image) img {
	transition: transform var(--js-motion-slow) var(--js-ease-out);
}

:where(.wp-block-post-featured-image):hover img {
	transform: scale(var(--wp--custom--semantic--motion--zoom--scale, 1.045));
}

/* ------------------------------------------------------------------
   Scroll reveal — driven by the scroll position itself (no JavaScript,
   no observer). Browsers without scroll-driven animations show the
   content as is. The range ends when the element has fully entered:
   whatever is visible at load, or at the very bottom of a short page,
   is never left half transparent.
   ------------------------------------------------------------------ */

@supports (animation-timeline: view()) {

	:where(main, .wp-block-post-content) > :where(.wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-media-text, .wp-block-query, .wp-block-gallery) {
		animation: js-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 100%;
	}
}

@keyframes js-reveal {

	from {
		opacity: 0;
		transform: translateY(var(--wp--custom--semantic--motion--reveal--distance, 32px)) scale(var(--wp--custom--semantic--motion--reveal--scale, 0.97));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Reduced motion — no movement at all.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	:where(main, .wp-block-post-content) > * {
		animation: none !important;
	}

	:where(.wp-block-button__link, .wp-element-button, .wp-block-post-featured-image img, .wp-block-post > .wp-block-group) {
		transition: none !important;
		transform: none !important;
	}
}