/**
 * Novera motion — page transitions and scroll reveals.
 * Content stays visible by default. Motion is additive, never a prerequisite for reading.
 */

:root {
	--novera-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--novera-motion-out: cubic-bezier(0.4, 0, 1, 1);
	--novera-reveal-y: 16px;
	--novera-reveal-duration: 0.7s;
}

@media (max-width: 807px) {
	:root {
		--novera-reveal-y: 8px;
		--novera-reveal-duration: 0.55s;
	}
}

/* -------------------------------------------------------------------------
   Cross-document page transitions (Chrome, Edge, Safari 18.2+)
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	#masthead nav.navbar {
		view-transition-name: novera-nav;
	}

	#wpadminbar {
		view-transition-name: novera-adminbar;
	}
}

::view-transition-old(root) {
	animation: 280ms var(--novera-motion-out) both novera-page-out;
}

::view-transition-new(root) {
	animation: 480ms var(--novera-motion-ease) both novera-page-in;
}

::view-transition-old(novera-nav),
::view-transition-new(novera-nav),
::view-transition-old(novera-adminbar),
::view-transition-new(novera-adminbar) {
	animation: none;
	mix-blend-mode: normal;
}

@keyframes novera-page-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes novera-page-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

html.novera-leaving #page > *:not(#masthead) {
	opacity: 0.4;
	transform: translateY(6px);
	transition: opacity 160ms var(--novera-motion-out), transform 160ms var(--novera-motion-out);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Scroll reveals — JS adds .novera-reveal only after it knows the block
   is below the fold. Headings are never pre-hidden.
   ------------------------------------------------------------------------- */

html.novera-motion .novera-reveal {
	opacity: 0;
	transform: translateY(var(--novera-reveal-y));
	transition:
		opacity var(--novera-reveal-duration) var(--novera-motion-ease),
		transform var(--novera-reveal-duration) var(--novera-motion-ease);
	transition-delay: var(--novera-delay, 0ms);
}

html.novera-motion .novera-reveal.is-visible {
	opacity: 1;
	transform: none;
}

html.novera-motion .novera-reveal--media {
	opacity: 1;
	transform: none;
}

html.novera-motion .novera-reveal--media img {
	transform: scale(1.035) translateY(4px);
	transition: transform 1.05s var(--novera-motion-ease);
	transition-delay: var(--novera-delay, 0ms);
}

html.novera-motion .novera-reveal--media.is-visible img {
	transform: none;
}

@media (max-width: 807px) {
	html.novera-motion .novera-reveal--media img {
		transform: scale(1.02) translateY(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	html.novera-leaving #page > *:not(#masthead),
	html.novera-motion .novera-reveal,
	html.novera-motion .novera-reveal--media img {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}