/* =============================================================================
   motion.css: the page morph, entrances and hover (components 19 and 20)
   -----------------------------------------------------------------------------
   The scroll score itself (scrub, pan, pin, count, reveal, the 14 px flow
   entrance) comes from the scroll-craft engine (scrollcraft.css / .js), driven by
   data-sc-* attributes. This file adds the site's own motion on top:
     19 page-to-page morph   assets/js/morph.js
     20 motion vocabulary    assets/js/motion.js adds .fp-pic / .fp-rise and .is-on
   Rules: transform, opacity and clip-path only; entrances fire once; with
   prefers-reduced-motion everything is simply there (the rules below are inside
   a no-preference query, except the View Transition opt-out).
   ============================================================================= */

/* ---- 19 Page-to-page morph: cross-document View Transitions ----------------- */
/* The clicked picture grows into its place on the next page; the page fades out, the new one
   fades in with a 14 px rise; the header and the year line hold still. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: fp-header; }
.descent { view-transition-name: fp-descent; }
::view-transition-group(fp-picture) { animation-duration: var(--dur-wipe); animation-timing-function: var(--ease-inout); }
::view-transition-old(fp-picture),
::view-transition-new(fp-picture) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation-duration: var(--dur-wipe);
	animation-timing-function: var(--ease-inout);
}
::view-transition-old(root) { animation: fp-page-out 320ms var(--ease-out) both; }
::view-transition-new(root) { animation: fp-page-in var(--dur-in) var(--ease-out) 120ms both; }
@keyframes fp-page-out { to { opacity: 0; } }
@keyframes fp-page-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

@media (prefers-reduced-motion: no-preference) {

	/* ---- 20 Entrances ---------------------------------------------------------- */

	/* Headings rise out of a mask as their block arrives (the engine adds .sc-in).
	   The negative insets keep italic overhang and descenders visible once in. */
	[data-sc-in] :is(.title, .display, .band-name),
	[data-sc-stagger] > :is(.title, .display) {
		clip-path: inset(-20% -6% -25% -6%);
		transition: clip-path 900ms var(--ease-inout), transform 900ms var(--ease-inout);
	}
	[data-sc-in]:not(.sc-in) :is(.title, .display, .band-name),
	[data-sc-stagger] > :is(.title, .display):not(.sc-in) {
		clip-path: inset(-20% -6% 100% -6%);
		transform: translate3d(0, .35em, 0);
	}

	/* Lists slide in from the right, one after another */
	[data-sc-stagger] > li:not(.sc-in),
	.press-rows[data-sc-stagger] > li:not(.sc-in),
	.chapters[data-sc-stagger] > li:not(.sc-in) { transform: translate3d(28px, 0, 0); }

	/* Pictures settle in: a cover in the ground colour slides away upwards while the photograph
	   eases from 1.08 to 1. The picture itself is never clipped: a clipped picture counts as
	   unseen, so it would never be revealed or lazy-loaded. */
	.fp-pic { position: relative; overflow: hidden; }
	.fp-pic::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var(--fp-ground, var(--paper));
		transform-origin: top;
		transition: transform var(--dur-wipe) var(--ease-inout);
		pointer-events: none;
	}
	.band .fp-pic::after { --fp-ground: var(--seamless); }
	.fp-pic img { transform: scale(1.08); transition: transform 1400ms var(--ease-out); }
	.fp-pic.is-on::after { transform: scaleY(0); }
	.fp-pic.is-on img { transform: none; }

	/* Long-read text appears paragraph by paragraph; rows and chapters slide in */
	.fp-rise { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-in) var(--ease-out), transform var(--dur-in) var(--ease-out); }
	.press-rows > li.fp-rise, .chapters > li.fp-rise { transform: translate3d(28px, 0, 0); }
	.fp-rise.is-on, .press-rows > li.fp-rise.is-on, .chapters > li.fp-rise.is-on { opacity: 1; transform: none; }

	/* Footer: his name's two words rise out of their masks, the second a beat later */
	.band-name[data-sc-in] { opacity: 1; transform: none; }   /* the masks do the work, not the engine's fade */
	.band-name .bn-w > span { transform: translateY(105%); transition: transform 1100ms var(--ease-inout); }
	.band-name .bn-w + .bn-w > span { transition-delay: 140ms; }
	.band-name.sc-in .bn-w > span { transform: none; }

	/* ---- 20 Hover ----------------------------------------------------------------- */

	/* Underlines are a 2 px bar under the text (not a gradient), so they can move */
	.link, .nav a, .band-col a, .site-footer a { position: relative; text-decoration: none !important; }
	.link::after, .nav a::after, .band-col a::after, .site-footer a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 8px;
		left: 0;
		height: 2px;
		background: currentColor;
	}
	/* Links: the underline runs out to the right and back in from the left */
	.link::after { bottom: 6px; transform-origin: right; transition: transform 360ms var(--ease-inout); }
	.link:hover::after { animation: fp-underline 720ms var(--ease-inout); }
	@keyframes fp-underline {
		0% { transform: scaleX(1); transform-origin: right; }
		45% { transform: scaleX(0); transform-origin: right; }
		55% { transform: scaleX(0); transform-origin: left; }
		100% { transform: scaleX(1); transform-origin: left; }
	}
	/* Nav and footer links: the underline grows from the left; the current page keeps it */
	.nav a::after, .band-col a::after, .site-footer a::after { transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out); }
	.nav a:hover::after, .nav a[aria-current]::after,
	.band-col a:hover::after, .site-footer a:hover::after { transform: scaleX(1); }

	/* The red button fills with the pressed red from the left */
	.btn { position: relative; isolation: isolate; overflow: hidden; }
	.btn::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--red-press);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 420ms var(--ease-out);
	}
	.btn:hover { background: var(--red); }
	.btn:hover::before { transform: scaleX(1); }

	/* Pictures in links zoom gently inside their frames */
	.thumb, .archive-cover, .members .mat, .unit .frame-img { overflow: hidden; }
	.thumb img, .archive-cover img, .members .mat img { transition: transform 700ms var(--ease-out); }
	.thumb:hover img, .press-rows li:hover .thumb img, .archive-cover:hover img, .members .unit:hover .mat img { transform: scale(1.05); }

	/* List titles and footer links nudge right under the pointer */
	.row-title, .chapters a, .read-next a { display: inline-block; transition: transform 360ms var(--ease-out); }
	.band-col a { transition: transform 360ms var(--ease-out); }
	.press-rows li:hover .row-title, .chapters a:hover, .read-next a:hover, .band-col a:hover { transform: translateX(8px); }
}