/* Scroll Scene: Image Sequence (CUSTOM-TEMPLATE.md D9). Branding owns the palette, type and corners.
   Static by default (no JS, Motion off, reduced motion): the photos as a gallery grid with their captions and numbers.
   js/cc-scenes.js adds .is-js and writes --p (0 → 1) on scroll; only then the stage pins and scrolling crossfades
   through the photos in one frame (each settles from a slight zoom), the caption swaps and a thin bar fills.
   Only scale and opacity move. Restyle per theme from css/screen.css by changing the --cc-scene-seq-* variables. */
.cc-scene-seq {
	--cc-scene-seq-gap: clamp(24px, 4vw, 56px);
	--cc-scene-seq-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-scene-seq-muted: color-mix(in srgb, currentColor 76%, transparent);
	--cc-scene-seq-accent: var(--color-main);
	--cc-scene-seq-radius: var(--img-radius, 0px);
	--cc-scene-seq-ratio: 16 / 9;
	--cc-scene-seq-num-font: var(--font-titles);
	--cc-scene-seq-text-h: 120px;
	min-width: 0;
}
.cc-scene-seq--tall { --cc-scene-seq-ratio: 4 / 5; }
.bg-main .cc-scene-seq, .bg-black .cc-scene-seq, .bg-image .cc-scene-seq, .bg-video .cc-scene-seq { --cc-scene-seq-accent: currentColor; }
.cc-scene-seq .cc-scene-seq__track { margin-top: var(--cc-scene-seq-gap); min-width: 0; }
.cc-scene-seq .cc-scene-seq__track:first-child { margin-top: 0; }
.cc-scene-seq .cc-scene-seq__frames {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--cc-scene-seq-gap) clamp(16px, 2vw, 32px);
}
.cc-scene-seq--tall .cc-scene-seq__frames { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cc-scene-seq--full .cc-scene-seq__frames { grid-template-columns: minmax(0, 1fr); }
.cc-scene-seq .cc-scene-seq__frame { margin: 0; min-width: 0; }
.cc-scene-seq .cc-scene-seq__figure { margin: 0; }
.cc-scene-seq .cc-scene-seq__media {
	aspect-ratio: var(--cc-scene-seq-ratio);
	overflow: hidden;
	border-radius: var(--cc-scene-seq-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.cc-scene-seq .cc-scene-seq__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cc-scene-seq .cc-scene-seq__text { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; min-width: 0; }
.cc-scene-seq .cc-scene-seq__number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cc-scene-seq .cc-scene-seq__value { font-family: var(--cc-scene-seq-num-font); font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--cc-scene-seq-accent); font-variant-numeric: tabular-nums; }
.cc-scene-seq .cc-scene-seq__label { font-size: 16px; line-height: 1.3; color: var(--cc-scene-seq-muted); }
.cc-scene-seq .cc-scene-seq__caption { font-size: 16px; line-height: 1.45; color: var(--cc-scene-seq-muted); overflow-wrap: anywhere; }
.cc-scene-seq .cc-scene-seq__bar { display: none; }
.cc-scene-seq .cc-scene__note { margin: 24px 0 0; padding: 12px 16px; border: 1px dashed currentColor; font-size: 15px; }
.cc-scene-seq .ct2-buttons { margin-top: var(--cc-scene-seq-gap); }

/* ── Pinned scene (script running) ─────────────────────────────── */
.cc-scene-seq.is-js {
	/* fw: the frame's width, as large as fits the screen height with room for the caption and the bar. */
	--cc-scene-seq-fw: min(100%, calc((100svh - var(--ct-header-h, 0px) - var(--cc-scene-seq-text-h) - 120px) * var(--cc-scene-seq-ratio)));
}
.cc-scene-seq.is-js .cc-scene-seq__track { position: relative; height: calc(100svh + var(--cc-scene-n, 3) * 60svh); }
.cc-scene-seq.is-js .cc-scene-seq__stage {
	position: sticky;
	top: var(--ct-header-h, 0px);
	box-sizing: border-box;
	height: calc(100svh - var(--ct-header-h, 0px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 0;
}
.cc-scene-seq.is-js .cc-scene-seq__frames {
	display: block;
	position: relative;
	width: var(--cc-scene-seq-fw);
	aspect-ratio: var(--cc-scene-seq-ratio);
	margin: 0 auto var(--cc-scene-seq-text-h);
}
.cc-scene-seq.is-js .cc-scene-seq__frame {
	/* t: 0 at this photo's turn. The photo fades in around t = 0 (the first is always in); the text shows only for its turn. */
	--t: calc(var(--p, 0) * var(--cc-scene-n, 3) - var(--cc-scene-i, 0));
	--in: clamp(0, (var(--t) + .2) * 2.5, 1);
	--cin: clamp(0, (var(--t) + .05) * 10, 1);
	--cout: clamp(0, (.95 - var(--t)) * 10, 1);
	position: absolute;
	inset: 0;
}
.cc-scene-seq.is-js .cc-scene-seq__frame:first-child { --in: 1; --cin: 1; }
.cc-scene-seq.is-js .cc-scene-seq__frame:last-child { --cout: 1; }
.cc-scene-seq.is-js .cc-scene-seq__figure { position: relative; height: 100%; }
.cc-scene-seq.is-js .cc-scene-seq__media { position: absolute; inset: 0; aspect-ratio: auto; opacity: var(--in); }
.cc-scene-seq.is-js .cc-scene-seq__img { scale: calc(1.08 - .08 * var(--in)); will-change: transform; }
.cc-scene-seq.is-js .cc-scene-seq__text {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 18px;
	opacity: min(var(--cin), var(--cout));
	translate: 0 calc((1 - var(--cin)) * 12px);
}
.cc-scene-seq.is-js .cc-scene-seq__bar {
	display: block;
	width: var(--cc-scene-seq-fw);
	height: 2px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 2px;
	background: var(--cc-scene-seq-line);
}
.cc-scene-seq.is-js .cc-scene-seq__fill { display: block; height: 100%; background: var(--cc-scene-seq-accent); transform-origin: 0 50%; scale: var(--p, 0) 1; }

/* Tall: on wide screens the text sits beside the photo, both centered as a pair. */
@media (min-width: 900px) {
	.cc-scene-seq--tall.is-js {
		--cc-scene-seq-fw: min(calc(100% - 396px), calc((100svh - var(--ct-header-h, 0px) - 120px) * 4 / 5));
		--cc-scene-seq-left: calc(50% - (var(--cc-scene-seq-fw) + 396px) / 2); /* photo + 56px gap + 340px text */
	}
	.cc-scene-seq--tall.is-js .cc-scene-seq__frames { margin: 0 0 32px var(--cc-scene-seq-left); }
	.cc-scene-seq--tall.is-js .cc-scene-seq__text { top: 50%; left: calc(100% + 56px); right: auto; width: 340px; margin: 0; translate: 0 calc(-50% + (1 - var(--cin)) * 12px); }
	.cc-scene-seq--tall.is-js .cc-scene-seq__bar { margin: 0 0 0 var(--cc-scene-seq-left); }
}

/* Full screen: the stage runs edge to edge under the header; caption, number and bar sit over the photo. */
.cc-scene-seq--full.is-js .cc-scene-seq__track { width: var(--cc-scene-vw, 100vw); margin-inline: calc(50% - var(--cc-scene-vw, 100vw) / 2); }
.cc-scene-seq--full.is-js .cc-scene-seq__stage { top: 0; height: 100svh; padding: 0; color: #fff; }
.cc-scene-seq--full.is-js .cc-scene-seq__frames { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; }
.cc-scene-seq--full.is-js .cc-scene-seq__media { border-radius: 0; }
.cc-scene-seq--full.is-js .cc-scene-seq__figure::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); opacity: var(--in); pointer-events: none; }
.cc-scene-seq--full.is-js .cc-scene-seq__text {
	top: auto;
	bottom: 72px;
	left: max(20px, (100% - var(--section-width, 1240px)) / 2);
	right: max(20px, (100% - var(--section-width, 1240px)) / 2);
	z-index: 1;
	max-width: 640px;
	margin: 0;
}
.cc-scene-seq--full.is-js :is(.cc-scene-seq__value, .cc-scene-seq__label, .cc-scene-seq__caption) { color: inherit; }
.cc-scene-seq--full.is-js .cc-scene-seq__bar {
	position: absolute;
	bottom: 40px;
	left: max(20px, (100% - var(--section-width, 1240px)) / 2);
	right: max(20px, (100% - var(--section-width, 1240px)) / 2);
	width: auto;
	margin: 0;
	background: rgba(255, 255, 255, .3);
}
.cc-scene-seq--full.is-js .cc-scene-seq__fill { background: #fff; }

@media (max-width: 699px) {
	.cc-scene-seq { --cc-scene-seq-text-h: 136px; }
	.cc-scene-seq.is-js .cc-scene-seq__track { height: calc(100svh + var(--cc-scene-n, 3) * 45svh); }
	.cc-scene-seq--full.is-js .cc-scene-seq__track { height: calc(100svh + var(--cc-scene-n, 3) * 45svh); }
}