/* The live story (#93, step by step since #134). Applies only when story.js has marked <html>
   story-live (JavaScript on, WebGL available) and the reader hasn't asked for reduced motion;
   otherwise the page is the still stack in the inline CSS.

   The hero and the five steps are each one screen tall, and each stops the scroll, so one gesture
   (wheel, trackpad, swipe, Page Down, Space, an arrow key) moves exactly one step: CSS scroll
   snapping, with story.js taking the wheel one gesture per step (wheel-gesture.js). Everything after the story is one snap area taller than the
   screen, so it scrolls freely. story.js marks the step in view (data-step, data-screen on <html>,
   .is-active on the step) and phone3d.js draws the 3D phone over the still one in .slot. */

@media (prefers-reduced-motion: no-preference) {
	.story-live {
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
	}
	.story-live .hero,
	.story-live .story .chapter {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.story-live .after {
		scroll-snap-align: start;
	}
	.story-live footer {
		scroll-snap-align: end;
	}

	.story-live .story {
		padding: 0;
		border: 0;
	}
	/* The title stays for screen readers; on screen each step says its own line. */
	.story-live .story h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.story-live .story .story-body {
		display: grid;
	}

	/* The stage: pinned for the whole story, under the steps' words. */
	.story-live .story .stage {
		display: block;
		grid-area: 1 / 1;
		position: sticky;
		top: 0;
		height: 100svh;
		pointer-events: none;
	}
	.story-live .story .stage .slot {
		position: absolute;
		left: 50%;
		top: 50%;
		height: min(72svh, 640px);
		translate: -50% -50%;
	}
	.story-live .story .flat {
		position: relative;
	}
	.story-live .story .layer {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.story-live .story .layer img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.story-live .story .scan {
		display: grid;
		place-items: center;
		padding: 18%;
		/* The app's scanning screen: ink, like every screen in the phone. */
		background: var(--ink);
	}
	.story-live[data-screen="1"] .story .s1,
	.story-live[data-screen="2"] .story .s2,
	.story-live[data-screen="3"] .story .s3,
	.story-live[data-screen="4"] .story .s4,
	.story-live[data-screen="5"] .story .s5 {
		opacity: 1;
	}
	/* Once the 3D phone is drawn, the still phones under it step aside. phone3d.js draws it on one
	   transparent canvas over the page that never takes a click. */
	.story-live.phone3d .slot .flat {
		visibility: hidden;
	}
	.story-live .phone3d-canvas {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 3;
		pointer-events: none;
	}

	/* A step: one screen, its words beside the phone, faded in while it's the one in view. */
	.story-live .story ol {
		grid-area: 1 / 1;
		gap: 0;
	}
	.story-live .story .chapter {
		display: flex;
		align-items: center;
		height: 100svh;
	}
	.story-live .story .chapter .still {
		display: none;
	}
	.story-live .story .chapter .copy {
		max-width: 340px;
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 400ms ease,
			transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.story-live .story .chapter.is-active .copy {
		opacity: 1;
		transform: none;
	}
	/* The roll's gaps fill one by one when its step arrives. */
	.story-live .story .chapter .gaps span {
		background: var(--slate);
		transition: background-color 0s;
	}
	.story-live .story .chapter.is-active .gaps span {
		background: var(--butter);
		transition-delay: calc(300ms + var(--i) * 40ms);
	}

	/* The progress mark: five dots, the current step a butter slit. Each dot links to its step. */
	.story-live .story .dots {
		position: absolute;
		right: 0;
		top: 50%;
		translate: 0 -50%;
		display: grid;
		pointer-events: auto;
	}
	.story-live .story .dots a {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
	}
	.story-live .story .dots a::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 3px;
		/* Slate on the deep ground was 1.5:1; muted at 55% is 3.3:1, a mark you can find. */
		background: color-mix(in srgb, var(--muted) 55%, transparent);
		transition:
			height 300ms cubic-bezier(0.23, 1, 0.32, 1),
			background-color 200ms ease;
	}
	.story-live .story .dots a[aria-current="step"]::before {
		height: 28px;
		background: var(--butter);
	}

	/* Narrower than the phone and the words side by side: the phone pinned near the top, the words
	   under it, centred. svh, not dvh, so the address bar sliding away doesn't move anything. The
	   phone gives up height on a short screen so the longest step's words (about 280 px) still fit. */
	@media (max-width: 1179px) {
		.story-live .story {
			--phone: min(54svh, 600px, calc(100svh - 360px));
		}
		.story-live .story .stage .slot {
			top: 24px;
			height: var(--phone);
			translate: -50% 0;
		}
		.story-live .story .dots {
			top: calc(24px + var(--phone) / 2);
		}
		.story-live .story .chapter {
			align-items: flex-start;
			justify-content: center;
			padding-top: calc(48px + var(--phone));
		}
		.story-live .story .chapter .copy {
			max-width: 34em;
			text-align: center;
		}
		.story-live .story .chapter .copy p {
			margin-inline: auto;
		}
		.story-live .story .chapter .readout {
			justify-content: center;
		}
		.story-live .story .chapter .gaps {
			margin-inline: auto;
		}
	}
	@media (max-width: 600px) {
		.story-live .story .chapter .line {
			font-size: 26px;
		}
		.story-live .story .chapter .copy p {
			font-size: 15px;
			margin-bottom: 8px;
		}
		.story-live .story .chapter .readout,
		.story-live .story .chapter .gaps {
			margin-top: 12px;
		}
	}
}