/* CTA Band 009 — exploding photo stack.
 *
 * Copied from Asteri; restyled to this site's tokens (--heading-2 for the
 * title, --color-muted for the lead, the site's eyebrow).
 *
 * A full-screen stage, pinned while the page scrolls (pattern.js). Eight
 * photographs sit absolutely in it; the text sits in the middle.
 *
 *   final    the CSS default: each photo in its own place around the text, at
 *            its own size. What you see without JavaScript or with reduced
 *            motion, and in the editor.
 *   stacked  where pattern.js starts: every photo in the middle at one shared
 *            size, the first on top, the text hidden. The scroll carries them
 *            from there to the final places and fades the text in.
 *
 * Each photo's final place is three numbers set below per position: --x and
 * --y, its centre's offset from the stage's centre in vw and vh, and --s, its
 * width in vw. Composition geometry, not spacing — they place eight photos
 * around a centred block of text and are read by pattern.js too.
 */

.cta-band-009 {
	/* The stacked size, as a share of the screen's width — the one photo seen
	   before the stack opens. pattern.js reads it. */
	--cta-band-009-stack: 18;
	overflow: hidden;
	color: var(--color-text);
}

/* The text is centred by the stage's grid, not by a transform: pattern.js
   scales it in, and a transform here would be overwritten. */
.cta-band-009__stage {
	position: relative;
	display: grid;
	place-items: center;
	block-size: 100vh;
	block-size: 100svh;
	min-block-size: 36rem;
}

/* ---- The photographs ----------------------------------------------------- */

/* The gallery fills the stage; the photos inside it are placed from its middle. */
/* Above the text, so the flying photos pass over it as it is uncovered; in
   their final places they leave it clear, and they never take a click. */
.cta-band-009 .cta-band-009__gallery {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	pointer-events: none;
}

/* Two classes for `position: absolute`: every block in the editor canvas is
   `position: relative` at one class. The final place is the default. */
.cta-band-009__gallery > .cta-band-009__photo.cta-band-009__photo {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: clamp(5rem, calc(var(--s) * 1vw), 18rem);
	margin: 0;
	transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh));
}

.cta-band-009__photo img {
	display: block;
	inline-size: 100%;
	/* This site's photo frame (Asteri's are square). */
	border-radius: var(--radius);
}

/* The first photo is the top of the stack, the last the bottom. */
.cta-band-009__photo:nth-child(1) { --x: -19.5; --y: -32.5; --s: 10.5; z-index: 8; }
.cta-band-009__photo:nth-child(2) { --x: -29.5; --y: -23;   --s: 8;    z-index: 7; }
.cta-band-009__photo:nth-child(3) { --x: 12.5;  --y: -32.5; --s: 9.25; z-index: 6; }
.cta-band-009__photo:nth-child(4) { --x: 26.25; --y: -23.25; --s: 10.5; z-index: 5; }
.cta-band-009__photo:nth-child(5) { --x: -27.5; --y: 15.75; --s: 12.75; z-index: 4; }
.cta-band-009__photo:nth-child(6) { --x: -15.25; --y: 31;   --s: 8;    z-index: 3; }
.cta-band-009__photo:nth-child(7) { --x: 20.75; --y: 14;    --s: 10.5; z-index: 2; }
.cta-band-009__photo:nth-child(8) { --x: 23.75; --y: 29.75; --s: 8;    z-index: 1; }

/* A phone: a tall screen, so the photos gather above and below the text
   rather than beside it, each a larger share of the narrow width. They sit
   well clear of the text — far enough that some run off the screen's edges,
   which is fine here — because the text block is tall on a narrow screen and
   a short browser window (Safari with its toolbars) brings it close. */
@media (max-width: 48rem) {
	.cta-band-009 { --cta-band-009-stack: 56; }

	.cta-band-009__photo:nth-child(1) { --x: -20; --y: -36; --s: 28; }
	.cta-band-009__photo:nth-child(2) { --x: -40; --y: -45; --s: 22; }
	.cta-band-009__photo:nth-child(3) { --x: 14;  --y: -43; --s: 24; }
	.cta-band-009__photo:nth-child(4) { --x: 36;  --y: -35; --s: 26; }
	.cta-band-009__photo:nth-child(5) { --x: -32; --y: 36;  --s: 28; }
	.cta-band-009__photo:nth-child(6) { --x: -10; --y: 45;  --s: 22; }
	.cta-band-009__photo:nth-child(7) { --x: 26;  --y: 35;  --s: 26; }
	.cta-band-009__photo:nth-child(8) { --x: 40;  --y: 45;  --s: 20; }
}

/* ---- The middle ---------------------------------------------------------- */

.cta-band-009 .cta-band-009__content {
	position: relative;
	z-index: 0;
	margin: 0;
	max-inline-size: min(44rem, calc(100% - 2 * var(--gutter, 1.25rem)));
	text-align: center;
}

.cta-band-009__content > * {
	margin-block: 0;
}

.cta-band-009 .cta-band-009__title {
	font-size: var(--heading-2);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.cta-band-009__lead {
	max-inline-size: 36rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--color-muted);
}

/* TWO classes on the top margin: the content's flex layout zeroes child
   margins at (0,1,1). */
.cta-band-009__content > .cta-band-009__actions {
	margin-block-start: var(--space-sm);
}

/* ---- First paint (pattern.js takes over) --------------------------------- */

/* When the effect will run, the photos start stacked and the text hidden from
   the first paint, so nothing shows in its final place and then jumps back.
   Until pattern.js arms the section (`is-stack-armed`), a failsafe lets
   everything go to its final place after 3s in case the script never comes. */
@media (prefers-reduced-motion: no-preference) {
	html.js .cta-band-009:not(.is-stack-armed) .cta-band-009__photo.cta-band-009__photo {
		transform: translate(-50%, -50%) scale(calc(var(--cta-band-009-stack) / var(--s)));
		animation: cta-band-009-photo-failsafe 0s 3s forwards;
	}

	html.js .cta-band-009:not(.is-stack-armed) .cta-band-009__content {
		opacity: 0;
		animation: cta-band-009-content-failsafe 0s 3s forwards;
	}
}

@keyframes cta-band-009-photo-failsafe {
	to { transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh)); }
}

@keyframes cta-band-009-content-failsafe {
	to { opacity: 1; }
}