/* Scroll Scene: Zoom to Full Bleed (CUSTOM-TEMPLATE.md D9). Branding owns the palette, type and corners.
   Static by default (no JS, Motion off, reduced motion): the header, then the photo at full content width with the
   overlay line below it. js/cc-scenes.js adds .is-js and writes --p (0 → 1) on scroll; only then the section pins and
   the photo grows from a small rounded frame to the whole screen. Only scale, translate and opacity move.
   Restyle per theme from css/screen.css by changing the --cc-scene-zoom-* variables. */
.cc-scene-zoom {
	--cc-scene-zoom-radius: var(--img-radius, 0px);
	--cc-scene-zoom-ratio: 16 / 9;
	--cc-scene-zoom-gap: clamp(24px, 4vw, 56px);
	--cc-scene-zoom-height: 220svh;
	--cc-scene-zoom-ink: #fff;
	--cc-scene-zoom-muted: color-mix(in srgb, currentColor 78%, transparent);
	min-width: 0;
}
.cc-scene-zoom :is(a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cc-scene-zoom .cc-scene-zoom__media { margin: var(--cc-scene-zoom-gap) 0 0; min-width: 0; }
.cc-scene-zoom .cc-scene-zoom__frame {
	position: relative;
	aspect-ratio: var(--cc-scene-zoom-ratio);
	overflow: hidden;
	border-radius: var(--cc-scene-zoom-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.cc-scene-zoom .cc-scene-zoom__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cc-scene-zoom .cc-scene-zoom__shade { display: none; }
.cc-scene-zoom .cc-scene-zoom__overlay { margin-top: 20px; max-width: 46ch; }
.cc-scene-zoom .cc-scene-zoom__overlay-title { margin: 0; color: inherit; }
.cc-scene-zoom .cc-scene-zoom__overlay-text { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--cc-scene-zoom-muted); }
.cc-scene-zoom .cc-scene__note { margin: 24px 0 0; padding: 12px 16px; border: 1px dashed currentColor; font-size: 15px; }

/* ── Pinned scene (script running) ─────────────────────────────── */
.cc-scene-zoom.is-js {
	/* z: zoom progress (done at 70% of the scroll), e: eased. sx/sy: frame size as a share of the stage. */
	--z: clamp(0, var(--p, 0) / .7, 1);
	--e: calc(var(--z) * var(--z) * (3 - 2 * var(--z)));
	--sx0: var(--cc-scene-zoom-start, .42);
	--sy0: min(.6, var(--sx0) * var(--cc-scene-ar, 1.6) * .6667);
	--sx: calc(var(--sx0) + (1 - var(--sx0)) * var(--e));
	--sy: calc(var(--sy0) + (1 - var(--sy0)) * var(--e));
	--k: max(var(--sx), var(--sy));
	--cc-scene-zoom-drop: max(0px, calc((1 - var(--sy0)) * 50svh - 6svh));
	position: relative;
	height: var(--cc-scene-zoom-height);
	width: var(--cc-scene-vw, 100vw);
	margin-inline: calc(50% - var(--cc-scene-vw, 100vw) / 2);
}
.cc-scene-zoom.is-js .cc-scene-zoom__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cc-scene-zoom.is-js .cc-scene-zoom__head {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--section-width, 1240px) + 40px);
	padding: calc(var(--ct-header-h, 0px) + clamp(28px, 6svh, 72px)) 20px 0;
	opacity: clamp(0, 1 - var(--p, 0) * 3.2, 1);
	translate: 0 calc(var(--p, 0) * -120px);
}
.cc-scene-zoom.is-js.is-far .cc-scene-zoom__head { pointer-events: none; }
.cc-scene-zoom.is-js .cc-scene-zoom__media { position: absolute; inset: 0; z-index: 1; margin: 0; }
.cc-scene-zoom.is-js .cc-scene-zoom__frame {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: none;
	/* The frame scales non-uniformly; the radius is divided back so the corners look round at every size. */
	border-radius: calc(var(--cc-scene-zoom-radius) * (1 - var(--e)) / var(--sx)) / calc(var(--cc-scene-zoom-radius) * (1 - var(--e)) / var(--sy));
	scale: var(--sx) var(--sy);
	translate: 0 calc((1 - var(--e)) * var(--cc-scene-zoom-drop));
	will-change: transform;
}
/* The photo counter-scales so it is never stretched: its visible scale is k on both axes, always covering the frame. */
.cc-scene-zoom.is-js .cc-scene-zoom__img { scale: calc(var(--k) / var(--sx)) calc(var(--k) / var(--sy)); }
.cc-scene-zoom.is-js .cc-scene-zoom__shade {
	display: block;
	position: absolute;
	inset: 0;
	background: #000;
	opacity: calc(var(--cc-scene-zoom-shade, .45) * clamp(0, (var(--p, 0) - .6) * 3, 1));
}
.cc-scene-zoom.is-js .cc-scene-zoom__overlay {
	--o: clamp(0, (var(--p, 0) - .72) * 4, 1);
	position: absolute;
	inset: auto 0 0;
	z-index: 3;
	box-sizing: border-box;
	max-width: none;
	margin: 0 auto;
	padding: 0 20px clamp(48px, 12svh, 140px);
	width: min(100%, calc(var(--section-width, 1240px) + 40px));
	color: var(--cc-scene-zoom-ink);
	opacity: var(--o);
	translate: 0 calc((1 - var(--o)) * 32px);
}
.cc-scene-zoom.is-js .cc-scene-zoom__overlay-title { max-width: 18ch; }
.cc-scene-zoom.is-js .cc-scene-zoom__overlay-text { max-width: 46ch; color: inherit; }
/* A centered header (Text Align = Center) centers the overlay line too. */
.cc-scene-zoom:has(.ct2-head.ta-center) .cc-scene-zoom__overlay { text-align: center; margin-inline: auto; }
.cc-scene-zoom:has(.ct2-head.ta-center) :is(.cc-scene-zoom__overlay-title, .cc-scene-zoom__overlay-text) { margin-inline: auto; }

@media (max-width: 699px) {
	.cc-scene-zoom { --cc-scene-zoom-height: 160svh; }
	.cc-scene-zoom.is-js { --sx0: max(var(--cc-scene-zoom-start, .42), .84); }
}