/**
 * Staging — header nav crossfade (N1 + N2).
 * Persistent .site-header capture; body content reveal-over below chrome.
 */

@media (prefers-reduced-motion: no-preference) {
	/* VT overlay + document underlay — never default white during swap */
	html:has(body.studio-nav-vt-pilot) {
		background-color: var(--header-bg, #0a0a0a) !important;
	}

	html:has(body.studio-nav-vt-pilot)::view-transition {
		background-color: var(--header-bg, #0a0a0a);
	}

	body.studio-nav-vt-pilot {
		background-color: var(--studio-paper, var(--wp--preset--color--base, #faf9f7));
	}

	/* N2 — header excluded from root crossfade; instant stable chrome */
	body.studio-nav-vt-pilot .site-header {
		view-transition-name: site-header;
	}

	body.studio-nav-vt-pilot ::view-transition-group(site-header) {
		animation-duration: 0s;
		animation-delay: 0s;
		background-color: var(--header-bg, #0a0a0a);
		z-index: 2;
	}

	body.studio-nav-vt-pilot ::view-transition-old(site-header),
	body.studio-nav-vt-pilot ::view-transition-new(site-header) {
		animation: none !important;
		mix-blend-mode: normal;
		object-fit: none;
	}

	body.studio-nav-vt-pilot ::view-transition-old(site-header) {
		opacity: 1;
		z-index: 1;
	}

	body.studio-nav-vt-pilot ::view-transition-new(site-header) {
		opacity: 1;
		z-index: 2;
	}

	/* N2c — teal accent stripe under header on mesh heroes (/about/, /contact/) */
	body.studio-nav-vt-pilot.studio-page-about .studio-hero.alignfull::before,
	body.studio-nav-vt-pilot.studio-page-contact .studio-hero.alignfull::before {
		view-transition-name: mesh-hero-stripe;
	}

	body.studio-nav-vt-pilot ::view-transition-group(mesh-hero-stripe) {
		animation-duration: 0s;
		animation-delay: 0s;
		z-index: 2;
	}

	body.studio-nav-vt-pilot ::view-transition-old(mesh-hero-stripe),
	body.studio-nav-vt-pilot ::view-transition-new(mesh-hero-stripe) {
		animation: none !important;
		mix-blend-mode: normal;
		object-fit: none;
	}

	body.studio-nav-vt-pilot ::view-transition-old(mesh-hero-stripe) {
		opacity: 1;
		z-index: 1;
	}

	body.studio-nav-vt-pilot ::view-transition-new(mesh-hero-stripe) {
		opacity: 1;
		z-index: 2;
	}

	/* N2b — /about/ ↔ /contact/ photo column stays fixed; images crossfade in place */
	body.studio-nav-vt-pilot.studio-page-about .studio-hero .about-hero-photo,
	body.studio-nav-vt-pilot.studio-page-contact .studio-hero .about-hero-photo {
		view-transition-name: mesh-hero-photo;
	}

	body.studio-nav-vt-pilot ::view-transition-group(mesh-hero-photo) {
		animation-duration: 0s;
		animation-delay: 0s;
		z-index: 1;
	}

	body.studio-nav-vt-pilot ::view-transition-old(mesh-hero-photo),
	body.studio-nav-vt-pilot ::view-transition-new(mesh-hero-photo) {
		mix-blend-mode: normal;
		object-fit: cover;
		height: 100%;
		width: 100%;
	}

	body.studio-nav-vt-pilot ::view-transition-old(mesh-hero-photo) {
		animation-duration: 0.2s !important;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
		animation-name: studio-vt-mesh-photo-out !important;
	}

	body.studio-nav-vt-pilot ::view-transition-new(mesh-hero-photo) {
		animation-duration: 0.2s !important;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
		animation-name: studio-vt-mesh-photo-in !important;
	}

	@keyframes studio-vt-mesh-photo-out {
		to {
			opacity: 0;
		}
	}

	@keyframes studio-vt-mesh-photo-in {
		from {
			opacity: 0;
		}
	}

	/* Body content (root minus header) — reveal-over on cream */
	body.studio-nav-vt-pilot ::view-transition-group(root) {
		background-color: var(--studio-paper, var(--wp--preset--color--base, #faf9f7));
		z-index: 1;
	}

	body.studio-nav-vt-pilot ::view-transition-old(root) {
		animation: none !important;
		opacity: 1 !important;
	}

	body.studio-nav-vt-pilot ::view-transition-new(root) {
		animation-duration: 0.2s !important;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
		animation-name: studio-vt-nav-reveal-in !important;
	}

	@keyframes studio-vt-nav-reveal-in {
		from {
			opacity: 0;
		}
	}

	/* N3 — subtle settle on bands below hero after crossfade completes */
	@keyframes studio-nav-vt-reveal-slide {
		from {
			opacity: 0.94;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	html.studio-nav-vt-arrival.studio-nav-vt-reveal body.home .work-hub__toolbar {
		animation: studio-nav-vt-reveal-slide 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both !important;
	}

	html.studio-nav-vt-arrival.studio-nav-vt-reveal body.home .work-hub__grid--engagements {
		animation: studio-nav-vt-reveal-slide 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both !important;
	}

	html.studio-nav-vt-arrival.studio-nav-vt-reveal body.studio-projects-hub-page .projects-hub-wrap {
		animation: studio-nav-vt-reveal-slide 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both !important;
	}
}

/* Suppress competing entrance motion after nav crossfade */
@media (prefers-reduced-motion: no-preference) {
	html.studio-nav-vt-arrival .studio-hero--projects .wp-block-heading,
	html.studio-nav-vt-arrival .studio-hero--projects .studio-hero__sub,
	html.studio-nav-vt-arrival body.home .cluster-hero__content h1,
	html.studio-nav-vt-arrival body.home .cluster-hero__content > p.alignwide,
	html.studio-nav-vt-arrival body.studio-page-about .studio-hero.alignfull::before,
	html.studio-nav-vt-arrival body.studio-page-contact .studio-hero.alignfull::before,
	html.studio-nav-vt-arrival body.studio-page-about .studio-hero .about-hero-photo,
	html.studio-nav-vt-arrival body.studio-page-contact .studio-hero .about-hero-photo,
	html.studio-nav-vt-arrival body.studio-page-about .studio-hero h1,
	html.studio-nav-vt-arrival body.studio-page-contact .studio-hero h1 {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	html.studio-nav-vt-arrival .projects-hub__grid--engagements .work-engagement-card,
	html.studio-nav-vt-arrival body.home .work-engagement-card,
	html.studio-nav-vt-arrival body.home .work-hub__toolbar,
	html.studio-nav-vt-arrival body.studio-projects-hub-page .projects-hub-wrap,
	html.studio-nav-vt-arrival body.studio-projects-hub-page #projects-hub.projects-hub,
	html.studio-nav-vt-arrival body.studio-page-about main > .about-section--full-width,
	html.studio-nav-vt-arrival body.studio-page-about main > *:not(.studio-hero),
	html.studio-nav-vt-arrival body.studio-page-contact main > *:not(.studio-hero) {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	html.studio-nav-vt-arrival body.home .work-console-wrap,
	html.studio-nav-vt-arrival body.home .work-console-float {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	/* Soften hero/paper seam behind console until frosted layer composites */
	html.studio-nav-vt-arrival body.home .work-console-wrap {
		background: linear-gradient(
			180deg,
			rgba(10, 14, 16, 0.18) 0%,
			rgba(10, 14, 16, 0.42) 38%,
			rgba(250, 249, 247, 0.96) 62%,
			rgba(250, 249, 247, 1) 100%
		);
	}

	html.studio-nav-vt-arrival body.home .work-console-float {
		isolation: isolate;
		transform: translateZ(0) !important;
	}

	html.studio-nav-vt-arrival body.home .hero-interactive__console::before,
	html.studio-console-blur-primed body.home .hero-interactive__console::before {
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		will-change: backdrop-filter;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.studio-nav-vt-pilot .site-header,
	body.studio-nav-vt-pilot.studio-page-about .studio-hero.alignfull::before,
	body.studio-nav-vt-pilot.studio-page-contact .studio-hero.alignfull::before,
	body.studio-nav-vt-pilot.studio-page-about .studio-hero .about-hero-photo,
	body.studio-nav-vt-pilot.studio-page-contact .studio-hero .about-hero-photo {
		view-transition-name: none;
	}
}