/* 1838 — Motion & Interaction system (approved; ported from the HTML preview).
   Colour carries interaction; a short settle carries arrival. Nothing loops,
   nothing moves on hover. Content is hidden only under html.motion (see inc/head.php). */

:root {
	--m-hover: 160ms;
	--m-state: 240ms;
	--m-reveal: 700ms;
	--m-image: 900ms;
	--m-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--m-dist: 12px;
	--m-stagger: 80ms;
}
@media (max-width: 1024px) { :root { --m-dist: 8px; } }
@media (max-width: 767px)  { :root { --m-reveal: 600ms; --m-stagger: 0ms; } }

/* Reveal — content groups ------------------------------------------------ */
html.motion [data-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--m-dist), 0);
	transition: opacity var(--m-reveal) var(--m-ease), transform var(--m-reveal) var(--m-ease);
	transition-delay: calc(var(--m-i, 0) * var(--m-stagger));
}
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Reveal — images inside a static plate. The clip only opens to zero, so crops are untouched. */
html.motion [data-reveal-image] {
	opacity: 0;
	clip-path: inset(4% 0 0 0);
	transition: opacity var(--m-image) var(--m-ease) 160ms, clip-path var(--m-image) var(--m-ease) 160ms;
}
html.motion [data-reveal-image].is-in { opacity: 1; clip-path: inset(0 0 0 0); }
@media (max-width: 767px) {
	html.motion [data-reveal-image] { clip-path: none; transition: opacity var(--m-image) var(--m-ease); }
}

/* Interaction — colour, background, border only (160 ms) ----------------- */
.c-link, .c-link-quiet, .c-link-inline, .c-btn, .c-chip, .c-card, .c-row,
.c-nav a, .c-footer a, .c-marker a {
	transition: color var(--m-hover) ease, background-color var(--m-hover) ease, border-color var(--m-hover) ease;
}

/* Focus — instant, never animated */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Forms — underline settles to ink on focus; messages fade in, no shake */
.c-field__input { transition: border-color var(--m-state) ease; }
.c-field__error:not(:empty) { animation: m-fade var(--m-state) ease both; }
@keyframes m-fade { from { opacity: 0; } }

/* Touch — larger hit area for small mono links, layout unchanged */
@media (pointer: coarse) {
	.c-nav a, .c-footer a { position: relative; }
	.c-nav a::after, .c-footer a::after { content: ""; position: absolute; inset: -8px -6px; }
}

/* Reduced motion and print — content in place ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.motion [data-reveal], html.motion [data-reveal-image] {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
	.c-field__error:not(:empty) { animation: none; }
}
@media print {
	html.motion [data-reveal], html.motion [data-reveal-image] {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
}