/* Motion and touch feedback, site-wide. Calm by design: one reveal per section as it
   scrolls in (assets/js/motion.js adds the classes), a copper rule that draws under its
   heading, photo zoom on hover for pointer devices and a press on touch. Only opacity
   and the individual translate/scale properties move; everything is off under reduced
   motion. Tokens: settings.custom.motion in theme.json. */

:root {
	--nlc-ease-out: var(--wp--custom--motion--ease-out);
	--nlc-ui: var(--wp--custom--motion--ui);
	--nlc-reveal: var(--wp--custom--motion--reveal);
	--nlc-rise: var(--wp--custom--motion--rise);
}
@media (max-width: 781px) {
	:root { --nlc-rise: 12px; --nlc-reveal: 500ms; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------- Reveal */

/* :root lifts these above single-class component rules, whatever the load order. The
   hidden state applies instantly; only the way in is animated. */
@media (prefers-reduced-motion: no-preference) {
	:root .nlc-reveal.is-in {
		transition:
			opacity var(--nlc-reveal) var(--nlc-ease-out) var(--nlc-delay, 0ms),
			translate var(--nlc-reveal) var(--nlc-ease-out) var(--nlc-delay, 0ms);
	}
	:root .nlc-reveal:not(.is-in) { opacity: 0; translate: 0 var(--nlc-rise); }
	/* Wide rows fade without rising, so they never seem to slide. */
	:root :is(.nlc-timeline-scroller, .nlc-deals, .nlc-wheel).nlc-reveal:not(.is-in) { translate: none; }

	/* The copper rule draws out from the heading's alignment once the heading lands. */
	.nlc-title > .wp-block-separator.is-style-copper {
		transform-origin: left;
		transition: scale 800ms var(--nlc-ease-out) 150ms;
	}
	.nlc-title:has(> .has-text-align-center) > .wp-block-separator.is-style-copper { transform-origin: center; }
	:root .nlc-reveal:not(.is-in) > .wp-block-separator.is-style-copper { scale: 0 1; }
}
@media print {
	:root .nlc-reveal { opacity: 1 !important; translate: none !important; }
}

/* ---------------------------------------------------------- Hover, press */

/* Photos sit in a clipping frame so they can zoom inside their corners. */
.nlc-person__photo { overflow: hidden; border-radius: var(--wp--custom--radius--portrait) var(--wp--custom--radius--portrait) 0 0; }
:is(.nlc-post-card__image, .nlc-person__photo) img { transition: scale 700ms var(--nlc-ease-out); }
.nlc-read-more::after { display: inline-block; transition: translate var(--nlc-ui) var(--nlc-ease-out); }

@media (hover: hover) and (pointer: fine) {
	.nlc-post-card:hover .nlc-post-card__image img,
	.nlc-person:hover .nlc-person__photo img { scale: 1.03; }
	:is(.nlc-read-more, .nlc-post-card):hover .nlc-read-more::after { translate: 3px 0; }

	/* Boxed news and related cards also lift a little as their shadow deepens (articles.css). */
	:is(.nlc-news, .nlc-related) .nlc-post-card {
		transition: translate var(--nlc-ui) var(--nlc-ease-out), box-shadow var(--nlc-ui) var(--nlc-ease-out), border-color var(--nlc-t);
	}
	:is(.nlc-news, .nlc-related) .nlc-post-card:hover { translate: 0 -2px; }
}

/* Touch: cards give under the finger; the grey tap flash goes where a press style replaces it. */
@media (hover: none) {
	:is(.nlc-post-card, .nlc-person) { transition: scale 120ms var(--nlc-ease-out); }
	:is(.nlc-post-card, .nlc-person):active { scale: .985; }
	.nlc-person:active .nlc-person__panel { background: color-mix(in srgb, var(--nlc-person-panel) 82%, var(--wp--preset--color--copper)); }
	:is(.wp-block-button__link, .nlc-post-card a, .nlc-person a, .nlc-row-nav__button) { -webkit-tap-highlight-color: transparent; }
}