/* Scroll Scene: Spinning Object (CUSTOM-TEMPLATE.md D9). Branding owns the palette, type and corners.
   Static by default (no JS, Motion off, reduced motion): the object beside the steps as a normal numbered list.
   js/cc-scenes.js adds .is-js and writes --p (0 → 1) on scroll; only then the stage pins, the object turns, grows and
   slides from side to side, and each step fades and rises in turn on the opposite side. Only transform and opacity move.
   Restyle per theme from css/screen.css by changing the --cc-scene-spin-* variables. */
.cc-scene-spin {
	--cc-scene-spin-gap: clamp(24px, 4vw, 64px);
	--cc-scene-spin-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-scene-spin-muted: color-mix(in srgb, currentColor 76%, transparent);
	--cc-scene-spin-accent: var(--color-main);
	--cc-scene-spin-size: clamp(200px, 32vw, 480px);
	--cc-scene-spin-shift: min(24vw, 300px);
	--cc-scene-spin-word-font: var(--font-titles);
	--cc-scene-spin-word-opacity: .08;
	--cc-scene-spin-k: 1;
	min-width: 0;
}
.bg-main .cc-scene-spin, .bg-black .cc-scene-spin, .bg-image .cc-scene-spin, .bg-video .cc-scene-spin { --cc-scene-spin-accent: currentColor; }
.cc-scene-spin .cc-scene-spin__track { margin-top: var(--cc-scene-spin-gap); min-width: 0; }
.cc-scene-spin .cc-scene-spin__track:first-child { margin-top: 0; }
.cc-scene-spin .cc-scene-spin__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-scene-spin-gap); align-items: center; }
.cc-scene-spin .cc-scene-spin__word { display: none; }
.cc-scene-spin .cc-scene-spin__object { justify-self: center; width: min(100%, var(--cc-scene-spin-size)); }
.cc-scene-spin .cc-scene-spin__img { display: block; width: 100%; height: auto; border-radius: 0; }
.cc-scene-spin .cc-scene-spin__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; min-width: 0; }
.cc-scene-spin .cc-scene-spin__step { margin: 0; padding: 20px 0 0; border-top: 1px solid var(--cc-scene-spin-line); min-width: 0; }
.cc-scene-spin .cc-scene-spin__num { margin: 0 0 8px; color: var(--cc-scene-spin-accent); }
.cc-scene-spin .cc-scene-spin__title { margin: 0 0 8px; overflow-wrap: anywhere; }
.cc-scene-spin .cc-scene-spin__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--cc-scene-spin-muted); }
.cc-scene-spin .cc-scene__note { margin: 0; padding: 12px 16px; border: 1px dashed currentColor; font-size: 15px; }
.cc-scene-spin .ct2-buttons { margin-top: var(--cc-scene-spin-gap); }
@media (min-width: 800px) {
	.cc-scene-spin .cc-scene-spin__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.cc-scene-spin--no-object .cc-scene-spin__stage, .cc-scene-spin--no-steps .cc-scene-spin__stage { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pinned scene (script running) ─────────────────────────────── */
.cc-scene-spin.is-js { overflow-x: clip; }
.cc-scene-spin.is-js .cc-scene-spin__track { position: relative; height: calc(100svh + var(--cc-scene-n, 3) * 80svh); }
.cc-scene-spin.is-js .cc-scene-spin__stage {
	position: sticky;
	top: var(--ct-header-h, 0px);
	display: block;
	height: calc(100svh - var(--ct-header-h, 0px));
	overflow: clip;
}
.cc-scene-spin.is-js .cc-scene-spin__word {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	font: 800 clamp(96px, 24vw, 380px) / 1 var(--cc-scene-spin-word-font);
	letter-spacing: -.04em;
	white-space: nowrap;
	color: currentColor;
	opacity: var(--cc-scene-spin-word-opacity);
	pointer-events: none;
	user-select: none;
	translate: calc(-50% + (.5 - var(--p, 0)) * 40%) -50%;
}
.cc-scene-spin.is-js .cc-scene-spin__object {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: var(--cc-scene-spin-size);
	/* Slides to the side opposite the step in view: cos() is ±1 at the middle of each step, 0 at the start. */
	translate: calc(-50% + var(--cc-scene-spin-shift) * cos(min(var(--p, 0) * var(--cc-scene-n, 3), var(--cc-scene-n, 3) - .5) * 180deg - 90deg)) -50%;
	scale: calc(var(--cc-scene-spin-from, .6) + (var(--cc-scene-spin-to, 1.1) - var(--cc-scene-spin-from, .6)) * var(--p, 0));
}
.cc-scene-spin.is-js .cc-scene-spin__turn { will-change: transform; }
.cc-scene-spin--axis-z.is-js .cc-scene-spin__turn { rotate: calc(var(--cc-scene-spin-turn, 360deg) * var(--p, 0) * var(--cc-scene-spin-k)); }
.cc-scene-spin--axis-y.is-js .cc-scene-spin__turn { transform: perspective(1200px) rotateY(calc(var(--cc-scene-spin-turn, 360deg) * var(--p, 0) * var(--cc-scene-spin-k))); }
.cc-scene-spin.is-js .cc-scene-spin__steps { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.cc-scene-spin.is-js .cc-scene-spin__step {
	/* t: 0 → 1 across this step's share of the scroll. In: fades and rises in; out: fades and lifts out. */
	--t: calc(var(--p, 0) * var(--cc-scene-n, 3) - var(--cc-scene-i, 0));
	--in: clamp(0, (var(--t) - .08) * 5, 1);
	--out: clamp(0, (.95 - var(--t)) * 5, 1);
	position: absolute;
	top: 50%;
	width: min(38%, 440px);
	padding: 0;
	border: 0;
	opacity: min(var(--in), var(--out));
	translate: 0 calc(-50% + (1 - var(--in)) * 48px - (1 - var(--out)) * 24px);
}
.cc-scene-spin.is-js .cc-scene-spin__step--left { left: 0; }
.cc-scene-spin.is-js .cc-scene-spin__step--right { right: 0; }
.cc-scene-spin.is-js .cc-scene-spin__step--last { --out: 1; }

@media (max-width: 799px) {
	/* Phones: object centered in the upper part, the step in view below it; half the turn, a shorter pin. */
	.cc-scene-spin.is-js { --cc-scene-spin-shift: 0px; --cc-scene-spin-size: min(60vw, 300px); --cc-scene-spin-k: .5; }
	.cc-scene-spin.is-js .cc-scene-spin__track { height: calc(100svh + var(--cc-scene-n, 3) * 55svh); }
	.cc-scene-spin.is-js .cc-scene-spin__object { top: 36%; }
	.cc-scene-spin.is-js .cc-scene-spin__step,
	.cc-scene-spin.is-js .cc-scene-spin__step--right {
		top: auto;
		bottom: clamp(24px, 6svh, 64px);
		left: 0;
		right: 0;
		width: auto;
		text-align: center;
		translate: 0 calc((1 - var(--in)) * 32px - (1 - var(--out)) * 16px);
	}
}