/*
 * CDF motion kit (ADR-0007). Consumes theme.json tokens only: no literal
 * duration, curve, distance or scale, and no var() fallback.
 *
 * Reveals: add data-motion="fade|rise|rise-lg|slide-start|slide-end|scale"
 * to any block (Advanced → HTML attributes, or in pattern markup). JS adds
 * .is-inview on first intersection. Stagger: data-motion-stagger on a parent
 * delays its [data-motion] children incrementally. Count-up is a separate,
 * attribute-driven API (data-count); see motion.js.
 *
 * Safety: hidden states apply only under html.cdf-motion (set by JS — no-JS
 * users see everything) and only when the user allows motion.
 */

:root {
	/* +1 in LTR, -1 in RTL — multiply any inline-axis offset by this instead
	   of forking on [dir]. */
	--cdf-inline: 1;
}
[dir="rtl"] {
	--cdf-inline: -1;
}

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

	/* --- Scroll reveals ------------------------------------------------ */

	html.cdf-motion [data-motion] {
		opacity: 0;
	}
	html.cdf-motion [data-motion="rise"] {
		transform: translateY(var(--wp--custom--motion--distance));
	}
	html.cdf-motion [data-motion="rise-lg"] {
		transform: translateY(calc(var(--wp--custom--motion--distance) * 3));
	}
	html.cdf-motion [data-motion="slide-start"] {
		transform: translateX(calc(var(--cdf-inline) * -3 * var(--wp--custom--motion--distance)));
	}
	html.cdf-motion [data-motion="slide-end"] {
		transform: translateX(calc(var(--cdf-inline) * 3 * var(--wp--custom--motion--distance)));
	}
	html.cdf-motion [data-motion="scale"] {
		transform: scale(0.96);
	}

	html.cdf-motion [data-motion].is-inview {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-enter),
			transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-enter);
		transition-delay: var(--cdf-delay, 0ms);
	}
	html.cdf-motion [data-motion="rise-lg"].is-inview {
		transition-duration: var(--wp--custom--motion--duration-slow);
	}
	html.cdf-motion [data-motion="scale"].is-inview {
		transition-timing-function: var(--wp--custom--motion--ease-spring);
	}

	/* --- Micro-interactions (pure CSS, no JS involved) ----------------- */

	/* .btn is the theme's own button, .wp-block-button__link the core block.
	   Both, or a reduced-motion user is the only one who sees them behave the
	   same (meeting record, F5). */
	.btn,
	.wp-block-button__link {
		transition:
			transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
			box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
			background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
	}
	.btn:hover,
	.wp-block-button__link:hover {
		transform: translateY(calc(-1 * var(--wp--custom--lift--1)));
	}
	.btn:active,
	.wp-block-button__link:active {
		transform: translateY(0) scale(var(--wp--custom--motion--scale-press));
		box-shadow: none;
	}

	/* Card hover, elevation 0 to 2. Put .cdf-lift on the card wrapper in patterns. */
	.cdf-lift {
		transition:
			transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard),
			box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
	}
	.cdf-lift:hover {
		transform: translateY(calc(-1 * var(--wp--custom--lift--2)));
		box-shadow: var(--wp--custom--shadow--2);
	}
}

/* Underline sweep from the inline-start edge (nav links, "read more").
   Outside the media query: under reduced motion the transition just doesn't
   run and the underline appears instantly — still a usable hover cue. */
.cdf-underline {
	position: relative;
	text-decoration: none;
}
.cdf-underline::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.15em;
	block-size: var(--wp--custom--underline--thick);
	background: currentColor;
	transform: scaleX(0);
	/* 0% origin in LTR, 100% in RTL */
	transform-origin: calc(50% - var(--cdf-inline) * 50%) 50%;
}
@media (prefers-reduced-motion: no-preference) {
	.cdf-underline::after {
		transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
	}
}
.cdf-underline:hover::after,
.cdf-underline:focus-visible::after {
	transform: scaleX(1);
}

/* The focus ring is not here. It belongs to style.css :focus-visible, and it
   must render for a user who asked for no motion
   (docs/meetings/2026-08-14-design-token-review.md, F2 and F3). */