/**
 * Hub band transition — home ↔ cluster console pages.
 *
 * The console is the instrument and stays put across the hop; the video band
 * behind it closes to a hairline on exit and re-opens on arrival. Same
 * letterbox vocabulary as the full home load (home-alt.css), shortened, and
 * CSS-only so cluster pages do not have to ship GSAP.
 *
 * Staged pre-paint by the head script in hub-band.php:
 *   html.hub-band--enter  → arriving, band starts closed
 *   html.hub-band--exit   → leaving, band closes
 *
 * Never applied when a deep scroll handoff is pending — the console keeps its
 * viewport depth there and the band is off screen anyway.
 *
 * @see docs/HOME_ALT_GSAP_PLAN.md
 */

@media (prefers-reduced-motion: no-preference) {
	/* Four plain percentages both ends — matches the GSAP letterbox on home. */
	@keyframes studio-hub-band-open {
		from {
			-webkit-clip-path: inset(50% 0% 50% 0%);
			clip-path: inset(50% 0% 50% 0%);
		}

		to {
			-webkit-clip-path: inset(0% 0% 0% 0%);
			clip-path: inset(0% 0% 0% 0%);
		}
	}

	@keyframes studio-hub-band-close {
		from {
			-webkit-clip-path: inset(0% 0% 0% 0%);
			clip-path: inset(0% 0% 0% 0%);
		}

		to {
			-webkit-clip-path: inset(50% 0% 50% 0%);
			clip-path: inset(50% 0% 50% 0%);
		}
	}

	@keyframes studio-hub-claim-rise {
		from {
			opacity: 0;
			transform: translateY(16px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes studio-hub-claim-lift {
		from {
			opacity: 1;
			transform: none;
		}

		to {
			opacity: 0;
			transform: translateY(-10px);
		}
	}

	html.hub-band--enter .cluster-hero__backdrop {
		animation: studio-hub-band-open 0.66s cubic-bezier(0.83, 0, 0.17, 1) both;
		will-change: clip-path;
	}

	html.hub-band--enter .cluster-hero__content {
		animation: studio-hub-claim-rise 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
	}

	html.hub-band--exit .cluster-hero__backdrop {
		animation: studio-hub-band-close 0.26s cubic-bezier(0.83, 0, 0.17, 1) both;
	}

	html.hub-band--exit .cluster-hero__content {
		animation: studio-hub-claim-lift 0.22s cubic-bezier(0.4, 0, 1, 1) both;
	}

	/*
	 * The active door is server-rendered, so on arrival it paints as a solid
	 * light card one frame after the hop — the brightest thing on screen while
	 * the band behind it is still closed to a hairline. That reads as a flash,
	 * not as a transition.
	 *
	 * Hold every door idle for the length of the hop instead. hub-band.js drops
	 * the enter class once the band has opened, and the door's own 0.25s
	 * transition lights the current domain up from there — the console reads as
	 * updating to where you are. Only idle values are repeated here; the active
	 * state stays defined once, in hero-interactive.css.
	 */
	html.hub-band--enter .hero-interactive__door.is-active,
	html.hub-band--enter .hero-interactive__door[aria-checked='true'],
	html.hub-band--exit .hero-interactive__door.is-active,
	html.hub-band--exit .hero-interactive__door[aria-checked='true'] {
		background: rgba(250, 249, 247, 0.04);
		color: var(--wp--preset--color--base);
		border-color: rgba(250, 249, 247, 0.12);
		box-shadow: none;
		transform: none;
	}

	html.hub-band--enter .hero-interactive__door.is-active .hero-interactive__door-index,
	html.hub-band--enter
		.hero-interactive__door[aria-checked='true']
		.hero-interactive__door-index,
	html.hub-band--exit .hero-interactive__door.is-active .hero-interactive__door-index,
	html.hub-band--exit
		.hero-interactive__door[aria-checked='true']
		.hero-interactive__door-index {
		color: rgba(250, 249, 247, 0.25);
	}

	html.hub-band--enter .hero-interactive__door.is-active .hero-interactive__door-meta,
	html.hub-band--enter
		.hero-interactive__door[aria-checked='true']
		.hero-interactive__door-meta,
	html.hub-band--exit .hero-interactive__door.is-active .hero-interactive__door-meta,
	html.hub-band--exit
		.hero-interactive__door[aria-checked='true']
		.hero-interactive__door-meta {
		color: rgba(250, 249, 247, 0.45);
	}

	/*
	 * The console is the persistent element. It must never inherit band motion,
	 * and page-transitions-hub.css must not cloak it either.
	 */
	html.hub-band--enter .work-console-float,
	html.hub-band--exit .work-console-float,
	html.hub-band--enter .work-console,
	html.hub-band--exit .work-console {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}