/*
 * Motion layer (CLAUDE.md §5) — scroll reveals.
 *
 * Elements settle in (rise + fade) as they scroll into view. Driven by
 * assets/js/reveal.js via IntersectionObserver, so it runs identically in
 * Chrome, Firefox and Safari (rather than Chromium-only scroll-driven CSS).
 *
 * Progressive enhancement: reveal.js only adds .doryo-reveal to elements that
 * start BELOW the fold, and only when the visitor allows motion. So above-the-
 * fold content is never hidden (no flash), and no-JS / reduced-motion visitors
 * always see everything. Animates transform + opacity only (CWV-safe).
 *
 * The transition lives on .is-revealed, so hiding is instant (no initial
 * fade-out of below-fold blocks) and only the reveal is animated.
 */

.doryo-reveal {
	opacity: 0;
	transform: translateY( 1.75rem );
	will-change: opacity, transform;
}

.doryo-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--wp--custom--motion--ease),
		transform 700ms var(--wp--custom--motion--ease);
}

@media (prefers-reduced-motion: reduce) {
	.doryo-reveal {
		opacity: 1;
		transform: none;
	}
}

/*
 * Page transitions (§5) — native cross-document View Transitions. CSS-only, no
 * SPA and no link interception: real navigations stay intact (SEO / GEO /
 * screen readers untouched). A subtle cross-fade with a slight lift on the
 * incoming page. Unsupported browsers simply navigate normally; reduced motion
 * removes the animation (instant swap).
 */
@view-transition {
	navigation: auto;
}

@keyframes doryo-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes doryo-vt-in {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}
}

::view-transition-old(root) {
	animation: doryo-vt-out 320ms var(--wp--custom--motion--ease) both;
}

::view-transition-new(root) {
	animation: doryo-vt-in 520ms var(--wp--custom--motion--ease) both;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}