/*
 * Respira Theme motion layer.
 *
 * A closed vocabulary of four presets, all data, no library:
 *   rm-fade-up | rm-scale-in | rm-stagger | rm-parallax-soft
 * Modifiers: rm-dur-short|base|long, rm-delay-short|base.
 *
 * Baseline is a ~1KB IntersectionObserver toggling .rm-in; scroll-driven
 * animation is a pure-CSS enhancement for parallax. Without JavaScript, or
 * under prefers-reduced-motion: reduce, everything renders its complete
 * still state: the design must read finished without motion, and does.
 */

:root {
	--rm-dur: var(--wp--custom--respira--motion--duration--base, 480ms);
	--rm-delay: 0ms;
	--rm-ease: var(--wp--custom--respira--motion--easing--out, cubic-bezier(0.22, 1, 0.36, 1));
	--rm-dist-sm: var(--wp--custom--respira--motion--distance--sm, 11px);
	--rm-dist-md: var(--wp--custom--respira--motion--distance--md, 29px);
	--rm-step: var(--wp--custom--respira--motion--stagger-step, 180ms);
}

.rm-dur-short {
	--rm-dur: var(--wp--custom--respira--motion--duration--short, 240ms);
}

.rm-dur-base {
	--rm-dur: var(--wp--custom--respira--motion--duration--base, 480ms);
}

.rm-dur-long {
	--rm-dur: var(--wp--custom--respira--motion--duration--long, 720ms);
}

.rm-delay-short {
	--rm-delay: 120ms;
}

.rm-delay-base {
	--rm-delay: 240ms;
}

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

	/* Entrance presets: hidden only once .rm-motion confirms JS + observer. */
	.rm-motion .rm-fade-up,
	.rm-motion .rm-scale-in,
	.rm-motion .rm-stagger > * {
		transition:
			opacity var(--rm-dur) var(--rm-ease) var(--rm-delay),
			transform var(--rm-dur) var(--rm-ease) var(--rm-delay);
		will-change: opacity, transform;
	}

	.rm-motion .rm-fade-up:not(.rm-in) {
		opacity: 0;
		transform: translateY(var(--rm-dist-md));
	}

	.rm-motion .rm-scale-in:not(.rm-in) {
		opacity: 0;
		transform: scale(0.96);
	}

	.rm-motion .rm-stagger:not(.rm-in) > * {
		opacity: 0;
		transform: translateY(var(--rm-dist-md));
	}

	.rm-motion .rm-fade-up.rm-in,
	.rm-motion .rm-scale-in.rm-in {
		opacity: 1;
		transform: none;
	}

	.rm-motion .rm-stagger.rm-in > * {
		opacity: 1;
		transform: none;
	}

	/* Stagger: each direct child one step behind the last, capped at twelve. */
	.rm-motion .rm-stagger > *:nth-child(1) { transition-delay: calc(var(--rm-delay) + 0 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(2) { transition-delay: calc(var(--rm-delay) + 1 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(3) { transition-delay: calc(var(--rm-delay) + 2 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(4) { transition-delay: calc(var(--rm-delay) + 3 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(5) { transition-delay: calc(var(--rm-delay) + 4 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(6) { transition-delay: calc(var(--rm-delay) + 5 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(7) { transition-delay: calc(var(--rm-delay) + 6 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(8) { transition-delay: calc(var(--rm-delay) + 7 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(9) { transition-delay: calc(var(--rm-delay) + 8 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(10) { transition-delay: calc(var(--rm-delay) + 9 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(11) { transition-delay: calc(var(--rm-delay) + 10 * var(--rm-step)); }
	.rm-motion .rm-stagger > *:nth-child(12) { transition-delay: calc(var(--rm-delay) + 11 * var(--rm-step)); }

	/* Parallax-soft: decorative media drifts at most --rm-dist-sm against
	   scroll. Pure CSS scroll-driven animation; browsers without support
	   simply keep the media still. Media only, never text. */
	@supports (animation-timeline: view()) {
		.rm-parallax-soft img,
		.rm-parallax-soft video {
			animation: rm-parallax linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes rm-parallax {
	from {
		transform: translateY(var(--rm-dist-sm));
	}

	to {
		transform: translateY(calc(-1 * var(--rm-dist-sm)));
	}
}

/* Micro-interactions: hover states are pure CSS, everywhere, always. */
@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link {
		transition:
			background-color var(--wp--custom--respira--motion--duration--short, 240ms) var(--rm-ease),
			color var(--wp--custom--respira--motion--duration--short, 240ms) var(--rm-ease),
			transform var(--wp--custom--respira--motion--duration--short, 240ms) var(--rm-ease);
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: translateY(0);
	}

	a {
		transition: color var(--wp--custom--respira--motion--duration--short, 240ms) var(--rm-ease);
	}
}