/* Motion system styles. See assets/js/motion.js for the contract. */
:root {
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 160ms;
	--dur: 320ms;
	--dur-slow: 700ms;
}

[id] {
	scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Reveal: the hidden start state exists only with classes "motion" and "js", and is removed again once the animation is done. */
	html.motion.js [data-reveal]:not(.is-done) {
		opacity: 0;
		translate: 0 24px;
		transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), translate var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), scale var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
	}

	html.motion.js [data-reveal="fade"]:not(.is-done) {
		translate: none;
	}

	html.motion.js [data-reveal="scale"]:not(.is-done) {
		translate: none;
		scale: 0.96;
	}

	html.motion.js [data-reveal="left"]:not(.is-done) {
		translate: -24px 0;
	}

	html.motion.js [data-reveal="right"]:not(.is-done) {
		translate: 24px 0;
	}

	html.motion.js [data-reveal].is-in:not(.is-done) {
		opacity: 1;
		translate: none;
		scale: none;
	}

	/* Failsafe: if motion.js never starts (blocked, error), everything appears after 3s. */
	html.motion.js:not(.motion-ready) [data-reveal] {
		animation: v2-reveal-failsafe 0.3s ease 3s forwards;
	}

	/* Magnetic: offsets arrive as custom properties from JS and use the separate "translate" property,
	   so they compose with the hover lift and press (transform) instead of fighting them. */
	html.motion.js [data-magnetic] {
		translate: var(--mx, 0px) var(--my, 0px);
	}

	html.motion.js [data-magnetic] .is-magnetic-inner {
		translate: var(--lx, 0px) var(--ly, 0px);
	}
}

@keyframes v2-reveal-failsafe {
	to {
		opacity: 1;
		translate: none;
		scale: none;
	}
}