/*
 * Lapisoft Job Story. Everything is scoped to .ls-story.
 *
 * The HTML is the final ordered picture. That is all visitors see without
 * JavaScript, with reduced motion, or if the script fails.
 *
 * States of .ls-story:
 *   (none)     the still picture.
 *   waiting    script enabled, not started yet: content hidden, space kept
 *              (see "Waiting for the script"); the still comes back after 3 s
 *              if the script never takes over.
 *   .is-armed  job-story.js measured the layout and plays the animation.
 *   .is-still  job-story.js decided not to animate.
 *
 * Layouts by the width of .ls-story: mobile < 667px <= tablet < 1100px <= desktop.
 * Mobile is the approved 375px design, desktop the approved 1440px design.
 * Tablet uses mobile text sizes in the desktop arrangement; its cards grow
 * to fill the width.
 */

/* ==== Colors and base =================================================== */

.ls-story {
	/* Site tokens (tokens.css) with the design values as fallbacks. */
	--ls-story-navy: var(--ls-color-navy, #0e3c6e);
	--ls-story-blue: var(--ls-color-primary-strong, #0366d0);
	--ls-story-gold: var(--ls-color-accent, #f7b500);
	--ls-story-ink: var(--ls-color-heading, #1e2428);
	--ls-story-body: var(--ls-color-body, #4a5560);
	--ls-story-white: #fff;
	--ls-story-on-navy: var(--ls-color-on-navy-muted, #c3d3e6);
	--ls-story-btn-hover: var(--ls-color-primary-tint, #e8f1fd);
	--ls-story-font: var(--ls-font-body, "Rubik", system-ui, sans-serif);
	--ls-story-font-display: var(--ls-font-heading, "Poppins", system-ui, sans-serif);
	/* Design colors without a site token. */
	--ls-story-stage: #f2f6fb;
	--ls-story-box: #e4ecf6;
	--ls-story-border: #e1e8f0;
	--ls-story-red: #e0483c;
	--ls-story-red-tint: #fdedeb;
	--ls-story-red-deep: #c2352a;
	--ls-story-veil: rgb(242 246 251 / 0.72);
	/* On the navy panel: idle number, tracks and the Replay outline. */
	--ls-story-num-idle: rgb(255 255 255 / 0.18);
	--ls-story-on-navy-line: rgb(255 255 255 / 0.22);
	--ls-story-on-navy-ring: rgb(255 255 255 / 0.7);
	/* Easing from the design. */
	--ls-story-eo: cubic-bezier(0.2, 0.8, 0.3, 1);
	--ls-story-io: cubic-bezier(0.45, 0, 0.2, 1);
	--ls-story-jt: cubic-bezier(0.3, 0.7, 0.2, 1);

	container: ls-story / inline-size;
	color: var(--ls-story-ink);
	font-family: var(--ls-story-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.ls-story,
.ls-story *,
.ls-story ::before,
.ls-story ::after {
	box-sizing: border-box;
}

/* Theme list and paragraph styles do not apply inside. */
.ls-story .ls-story__steps,
.ls-story .ls-story__step,
.ls-story .ls-story__cards,
.ls-story .ls-story__slot,
.ls-story .ls-story__card-text {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-story .ls-story__svg {
	display: block;
	flex: none;
	width: var(--ls-story-svg, 16px);
	height: var(--ls-story-svg, 16px);
}

/* ==== Layout sizes ======================================================= */

/* Mobile (the 375px design). */
.ls-story .ls-story__frame {
	--ls-story-layout: mobile;
	--ls-story-frame-w: 343px;
	--ls-story-card-w: calc((min(343px, 100cqw) - 7px) / 2 - 12px);
	--ls-story-cols-a: 1;
	--ls-story-cols-b: 1;
	--ls-story-card-gap-x: 6px;
	--ls-story-card-gap-y: 6px;
	--ls-story-col-gap: 7px;
	--ls-story-row-gap: 6px;
	--ls-story-stage-pad: 0px;
	--ls-story-stage-r: 14px;
	--ls-story-group-pad: 6px;
	--ls-story-group-r: 14px;
	--ls-story-head-h: 20px;
	--ls-story-head-gap: 6px;
	--ls-story-head-mb: 4px;
	--ls-story-head-icon-r: 5px;
	--ls-story-head-fs: 13px;
	--ls-story-head-svg: 12px;
	--ls-story-card-pad: 6px 8px 7px;
	--ls-story-card-r: 10px;
	--ls-story-card-shadow: 0 10px 22px -16px rgb(14 60 110 / 0.45), 0 1px 4px rgb(14 60 110 / 0.08);
	--ls-story-ch-h: 20px;
	--ls-story-ch-gap: 6px;
	--ls-story-ci: 20px;
	--ls-story-ci-svg: 12px;
	--ls-story-cl-fs: 10px;
	--ls-story-cl-ls: 0.04em;
	--ls-story-cl-ws: nowrap;
	--ls-story-ct-mt: 3px;
	--ls-story-ct-fs: 13px;
	--ls-story-ct-lh: 16.25px;
	--ls-story-st-pt: 5px;
	--ls-story-calm-s: 1.25;
	--ls-story-in-s: 1.32;
	--ls-story-logo-w: 260px;
	--ls-story-logo-h: 84px;
	--ls-story-logo-r: 18px;
	--ls-story-logo-img: 200px;
	/* The plate ends as wide as the cards above it: one card on mobile, two
	 * cards and the gap on tablet and desktop. tan(atan2()) turns the ratio
	 * of two lengths into a number. */
	--ls-story-plate-w: var(--ls-story-card-w);
	--ls-story-logo-s: tan(atan2(var(--ls-story-plate-w), var(--ls-story-logo-w)));
	--ls-story-logo-shadow: 0 24px 48px -20px rgb(14 60 110 / 0.6), 0 2px 8px rgb(14 60 110 / 0.15);
	/* Calm-row lines: vertical, grow downward, break shorter. */
	--ls-story-line-s0x: 1;
	--ls-story-line-s0y: 0;
	--ls-story-line-s1x: 1;
	--ls-story-line-s1y: 0.6;

	max-width: var(--ls-story-frame-w);
	margin-inline: auto;
}

/* Tablet: mobile sizes, two cards per row, desktop arrangement. Four cards,
 * two card gaps, four group paddings and the column gap fill the width
 * (156px cards at 667px). */
@container ls-story (min-width: 667px) {
	.ls-story .ls-story__frame {
		--ls-story-layout: tablet;
		--ls-story-frame-w: none;
		--ls-story-card-w: calc((100cqw - 43px) / 4);
		--ls-story-cols-a: 2;
		--ls-story-cols-b: 2;
		--ls-story-plate-w: calc(2 * var(--ls-story-card-w) + var(--ls-story-card-gap-x));
	}
}

/* Desktop (the 1440px design). Cards narrow a little below 1206px. */
@container ls-story (min-width: 1100px) {
	.ls-story .ls-story__frame {
		--ls-story-layout: desktop;
		--ls-story-frame-w: 1280px;
		--ls-story-card-w: clamp(200px, (100cqw - 102px) / 5, 222px);
		--ls-story-cols-a: 3;
		--ls-story-cols-b: 2;
		--ls-story-card-gap-x: 12px;
		--ls-story-card-gap-y: 12px;
		--ls-story-col-gap: 10px;
		--ls-story-row-gap: 10px;
		--ls-story-stage-pad: 20px;
		--ls-story-stage-r: 22px;
		--ls-story-group-pad: 10px;
		--ls-story-group-r: 18px;
		--ls-story-head-h: 28px;
		--ls-story-head-gap: 10px;
		--ls-story-head-mb: 8px;
		--ls-story-head-icon-r: 7px;
		--ls-story-head-fs: 17px;
		--ls-story-head-svg: 16px;
		--ls-story-card-pad: 12px 14px 14px;
		--ls-story-card-r: 14px;
		--ls-story-card-shadow: 0 18px 36px -20px rgb(14 60 110 / 0.45), 0 2px 6px rgb(14 60 110 / 0.08);
		--ls-story-ch-h: auto;
		--ls-story-ch-gap: 10px;
		--ls-story-ci: 30px;
		--ls-story-ci-svg: 16px;
		--ls-story-cl-fs: 11px;
		--ls-story-cl-ls: 0.12em;
		--ls-story-cl-ws: normal;
		--ls-story-ct-mt: 8px;
		--ls-story-ct-fs: 15px;
		--ls-story-ct-lh: 19.5px;
		--ls-story-st-pt: 10px;
		--ls-story-calm-s: 1.15;
		--ls-story-in-s: 1.22;
		--ls-story-logo-w: 340px;
		--ls-story-logo-h: 108px;
		--ls-story-logo-r: 22px;
		--ls-story-logo-img: 262px;
		--ls-story-logo-shadow: 0 30px 60px -24px rgb(14 60 110 / 0.6), 0 2px 8px rgb(14 60 110 / 0.15);
		/* Calm-row lines: horizontal, grow to the right, break shorter. */
		--ls-story-line-s0x: 0;
		--ls-story-line-s0y: 1;
		--ls-story-line-s1x: 0.6;
		--ls-story-line-s1y: 1;
	}
}

/* ==== Stage and groups (the final ordered picture) ====================== */

.ls-story .ls-story__stage {
	position: relative;
	isolation: isolate;
	padding: var(--ls-story-stage-pad) 0;
	border-radius: var(--ls-story-stage-r);
	background: var(--ls-story-stage);
}

/* Two columns. Mobile: Job and the logo | Schedule, Materials, Fabrication.
 * Tablet and desktop: Job and Schedule | Materials, Fabrication and the logo.
 * The 1fr row lets the shorter column end where its last box ends. */
.ls-story .ls-story__groups {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto 1fr;
	justify-content: center;
	column-gap: var(--ls-story-col-gap);
	row-gap: var(--ls-story-row-gap);
}

.ls-story .ls-story__group--1 { grid-area: 1 / 1 / 3 / 2; }
.ls-story .ls-story__group--2 { grid-area: 1 / 2 / 2 / 3; }
.ls-story .ls-story__pair { grid-area: 2 / 2 / 4 / 3; }

.ls-story .ls-story__logo-slot {
	grid-area: 3 / 1 / 4 / 2;
	justify-self: center;
	margin-top: 0.375px; /* as in the design */
}

@container ls-story (min-width: 667px) {
	.ls-story .ls-story__group--2 { grid-area: 3 / 1 / 4 / 2; }
	.ls-story .ls-story__pair { grid-area: 1 / 2 / 2 / 3; }

	/* Centered between Fabrication and the bottom of the left column,
	 * with at least one gap above and below. */
	.ls-story .ls-story__logo-slot {
		grid-area: 2 / 2 / 4 / 3;
		justify-self: stretch;
		display: grid;
		place-items: center;
		min-height: calc(var(--ls-story-logo-h) * var(--ls-story-logo-s) + 2 * var(--ls-story-row-gap));
		margin-top: calc(-1 * var(--ls-story-row-gap));
	}
}

.ls-story .ls-story__group,
.ls-story .ls-story__pair {
	align-self: start;
}

.ls-story .ls-story__pair {
	display: flex;
	flex-direction: column;
	gap: var(--ls-story-row-gap);
}

.ls-story .ls-story__group {
	--ls-story-cols: var(--ls-story-cols-a);
	padding: var(--ls-story-group-pad);
	border-radius: var(--ls-story-group-r);
	background-color: var(--ls-story-box);
}

.ls-story .ls-story__pair .ls-story__group {
	--ls-story-cols: var(--ls-story-cols-b);
}

.ls-story .ls-story__group-head {
	display: flex;
	align-items: center;
	gap: var(--ls-story-head-gap);
	height: var(--ls-story-head-h);
	margin: 0 0 var(--ls-story-head-mb) 2px;
}

.ls-story .ls-story__group-icon {
	--ls-story-svg: var(--ls-story-head-svg);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ls-story-head-h);
	height: var(--ls-story-head-h);
	border-radius: var(--ls-story-head-icon-r);
	background: var(--ls-story-white);
	color: var(--ls-story-navy);
}

.ls-story .ls-story__group-name {
	font-family: var(--ls-story-font-display);
	font-size: var(--ls-story-head-fs);
	font-weight: 600;
	color: var(--ls-story-navy);
	white-space: nowrap;
}

.ls-story .ls-story__cards {
	display: grid;
	grid-template-columns: repeat(var(--ls-story-cols), var(--ls-story-card-w));
	gap: var(--ls-story-card-gap-y) var(--ls-story-card-gap-x);
	align-items: start;
}

/* ==== Card ================================================================ */

.ls-story .ls-story__card {
	position: relative;
	width: var(--ls-story-card-w);
	padding: var(--ls-story-card-pad);
	border: 1px solid var(--ls-story-border);
	border-radius: var(--ls-story-card-r);
	background: var(--ls-story-white);
	box-shadow: var(--ls-story-card-shadow);
	--ls-story-ci-bg: var(--ls-story-navy);
	--ls-story-ci-color: var(--ls-story-white);
	--ls-story-label: var(--ls-story-body);
}

.ls-story .ls-story__card--change {
	border-top: 3px solid var(--ls-story-blue);
	--ls-story-ci-bg: var(--ls-story-blue);
	--ls-story-label: var(--ls-story-blue);
}

.ls-story .ls-story__card--problem {
	border-top: 3px solid var(--ls-story-red);
	--ls-story-ci-bg: var(--ls-story-red-tint);
	--ls-story-ci-color: var(--ls-story-red-deep);
	--ls-story-label: var(--ls-story-red-deep);
}

.ls-story .ls-story__card-head {
	display: flex;
	align-items: center;
	gap: var(--ls-story-ch-gap);
	height: var(--ls-story-ch-h);
}

.ls-story .ls-story__card-icon {
	--ls-story-svg: var(--ls-story-ci-svg);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ls-story-ci);
	height: var(--ls-story-ci);
	border-radius: 50%;
	background: var(--ls-story-ci-bg);
	color: var(--ls-story-ci-color);
}

.ls-story .ls-story__card-label {
	font-size: var(--ls-story-cl-fs);
	font-weight: 600;
	letter-spacing: var(--ls-story-cl-ls);
	text-transform: uppercase;
	white-space: var(--ls-story-cl-ws);
	color: var(--ls-story-label);
}

.ls-story .ls-story__card-text {
	margin-top: var(--ls-story-ct-mt);
	font-family: var(--ls-story-font-display);
	font-size: var(--ls-story-ct-fs);
	font-weight: 600;
	line-height: var(--ls-story-ct-lh);
	color: var(--ls-story-ink);
	text-wrap: pretty;
}

/* Status tag: a rounded box that may wrap (mobile, tablet), a one-line pill (desktop). */
.ls-story .ls-story__status {
	max-height: 40px;
	overflow: hidden;
}

.ls-story .ls-story__status-inner {
	padding-top: var(--ls-story-st-pt);
}

.ls-story .ls-story__tag {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	padding: 2px 7px;
	border-radius: 7px;
	background: var(--ls-story-navy);
	color: var(--ls-story-white);
	font-size: 10px;
	font-weight: 500;
	line-height: 12px;
}

.ls-story .ls-story__tag-dot {
	flex: none;
	width: 5px;
	height: 5px;
	margin-top: 3.5px;
	border-radius: 50%;
	background: var(--ls-story-gold);
}

@container ls-story (min-width: 1100px) {
	.ls-story .ls-story__tag {
		align-items: center;
		gap: 6px;
		height: 24px;
		padding: 0 10px 0 8px;
		border-radius: 999px;
		font-size: 12px;
		line-height: inherit;
		white-space: nowrap;
	}

	.ls-story .ls-story__tag-dot {
		width: 7px;
		height: 7px;
		margin-top: 0;
	}
}

/* Calm-row line to the previous card (cards 2-4). Only in the animation. */
.ls-story .ls-story__line {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 4px;
	height: 17.6px;
	margin-left: -2px;
	border-radius: 4px;
	background: var(--ls-story-gold);
	transform-origin: center top;
}

@container ls-story (min-width: 1100px) {
	.ls-story .ls-story__line {
		top: 50%;
		right: 100%;
		bottom: auto;
		left: auto;
		width: var(--ls-story-line-len, 49px);
		height: 4px;
		margin: -2px 0 0;
		transform-origin: left center;
	}
}

/* ==== Logo ================================================================ */

.ls-story .ls-story__logo-box {
	width: calc(var(--ls-story-logo-w) * var(--ls-story-logo-s));
	height: calc(var(--ls-story-logo-h) * var(--ls-story-logo-s));
}

.ls-story .ls-story__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ls-story-logo-w);
	height: var(--ls-story-logo-h);
	border-radius: var(--ls-story-logo-r);
	background: var(--ls-story-navy);
	box-shadow: var(--ls-story-logo-shadow);
	transform: scale(var(--ls-story-logo-s));
	transform-origin: 0 0;
}

.ls-story .ls-story__logo-img {
	display: block;
	width: var(--ls-story-logo-img);
	max-width: none;
	height: auto;
}

.ls-story .ls-story__veil {
	display: none;
}

/* ==== Panel ================================================================ */

/* The navy panel around the strip and the stage (Claude Design "Lapisoft
 * Home v6"). It wraps .ls-story, so its padding sits outside the size
 * container and the stage keeps its width. Padding and radius grow with the
 * width of the column: 6px and 20px up to 700px (so a 768px screen keeps the
 * tablet layout), 20px and 32px at 1280px. */
.ls-story-panel {
	--ls-story-panel-navy: var(--ls-color-navy, #0e3c6e);
	--ls-story-panel-deep: var(--ls-color-navy-deep, #15375c);
	--ls-story-panel-blue: var(--ls-color-primary-strong, #0366d0);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(6px, 6px + (100% - 700px) * 0.0241, 20px);
	border: 1px solid rgb(131 191 255 / 0.28);
	border-radius: clamp(20px, 20px + (100% - 700px) * 0.0207, 32px);
	background:
		radial-gradient(circle 210px at calc(100% - 50px) -10px, var(--ls-story-panel-deep) 209px, transparent 210px),
		radial-gradient(circle 190px at -10px calc(100% + 30px), var(--ls-story-panel-blue) 189px, transparent 190px),
		var(--ls-story-panel-navy);
	box-shadow: 0 18px 48px rgb(14 60 110 / 0.22);
}

/* Phones: the panel reaches into the page gutter, up to 8px from the screen edge. */
@media (max-width: 666px) {
	.ls-story-panel {
		margin-inline: min(0px, max(-12px, (100% + 16px - 100vw) / 2));
	}
}

@media (min-width: 922px) {
	.ls-story-panel {
		background:
			radial-gradient(circle 380px at calc(100% - 160px) -40px, var(--ls-story-panel-deep) 379px, transparent 380px),
			radial-gradient(circle 310px at 10px calc(100% + 30px), var(--ls-story-panel-blue) 309px, transparent 310px),
			var(--ls-story-panel-navy);
		box-shadow: 0 24px 64px rgb(14 60 110 / 0.22);
	}
}

/* ==== Controls ============================================================ */

/* The step strip shows the finished story (step 3 active, all tracks full)
 * unless the animation runs: then each step starts idle and lights up with
 * its act (0 s, 9.6 s, 19.5 s). Steps are indicators, not buttons.
 * Mobile and tablet: numbers 1-2-3 joined by short tracks, round icon
 * buttons, and the "N · title" of the current step below. */
.ls-story .ls-story__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 12px;
	margin: 0 0 8px;
	padding: 8px 10px 4px;
}

.ls-story .ls-story__steps {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
	min-height: 44px;
	padding-bottom: 34px;
}

.ls-story .ls-story__step {
	display: flex;
	align-items: center;
}

.ls-story .ls-story__step-num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ls-story-white);
	color: var(--ls-story-navy);
	font-family: var(--ls-story-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.ls-story .ls-story__step-track {
	display: block;
	width: 22px;
	height: 4px;
	overflow: hidden;
	background: var(--ls-story-on-navy-line);
}

/* No track after the last number (kept at zero width, so its fill animation
 * still marks the end of the story). */
.ls-story .ls-story__step:last-child .ls-story__step-track {
	width: 0;
}

/* One title at a time, under the numbers. */
.ls-story .ls-story__step-name {
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: var(--ls-story-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ls-story-white);
	white-space: nowrap;
	opacity: 0;
}

.ls-story .ls-story__step:last-child .ls-story__step-name {
	opacity: 1;
}

.ls-story .ls-story__step-name::before {
	content: attr(data-n) "\00a0·\00a0";
}

.ls-story .ls-story__step-fill {
	display: block;
	height: 100%;
	background: var(--ls-story-gold);
	transform-origin: left center;
}

.ls-story .ls-story__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Buttons: white Play, white outline Replay. Astra styles every <button>; this resets all of it. */
.ls-story .ls-story__btn {
	--ls-story-svg: 18px;
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--ls-story-white);
	border-radius: 999px;
	background: var(--ls-story-white);
	box-shadow: none;
	color: var(--ls-story-navy);
	font-family: var(--ls-story-font-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms var(--ls-story-eo), border-color 120ms var(--ls-story-eo), color 120ms var(--ls-story-eo), transform 120ms var(--ls-story-eo);
}

.ls-story .ls-story__btn:hover {
	border-color: var(--ls-story-white);
	background: var(--ls-story-btn-hover);
	color: var(--ls-story-navy);
}

.ls-story .ls-story__btn--replay {
	border-color: var(--ls-story-on-navy-ring);
	background: transparent;
	color: var(--ls-story-white);
}

.ls-story .ls-story__btn--replay:hover {
	border-color: var(--ls-story-white);
	background: rgb(255 255 255 / 0.12);
	color: var(--ls-story-white);
}

.ls-story .ls-story__btn:active {
	transform: scale(0.985);
}

.ls-story .ls-story__btn:focus {
	outline: none;
}

.ls-story .ls-story__btn:focus-visible {
	outline: 3px solid var(--ls-story-gold);
	outline-offset: 2px;
}

.ls-story .ls-story__svg--pause,
.ls-story.is-playing .ls-story__svg--play {
	display: none;
}

.ls-story.is-playing .ls-story__svg--pause {
	display: block;
}

/* Both toggle labels share one grid cell, so the button keeps the width of
 * the wider one and the step strip beside it never moves. */
.ls-story .ls-story__btn-text--toggle {
	display: grid;
}

.ls-story .ls-story__btn-text--toggle > span {
	grid-area: 1 / 1;
}

.ls-story .ls-story__btn-pause,
.ls-story.is-playing .ls-story__btn-play {
	visibility: hidden;
}

.ls-story.is-playing .ls-story__btn-pause {
	visibility: visible;
}

/* Icon-only buttons keep their text for screen readers. */
.ls-story .ls-story__btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Play and Replay only while the animation can play: no JavaScript, reduced
 * motion or a failed script show the finished strip without them. */
.ls-story:not(.is-armed) .ls-story__controls {
	visibility: hidden;
}

.ls-story.is-still .ls-story__controls {
	display: none;
}

@media (scripting: none) {
	.ls-story .ls-story__controls {
		display: none;
	}
}

/* Desktop: three steps side by side, each with its own track, and text buttons. */
@container ls-story (min-width: 1100px) {
	.ls-story .ls-story__bar {
		align-items: center;
		column-gap: 32px;
		margin-bottom: 14px;
		padding: 10px 12px 14px;
	}

	.ls-story .ls-story__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 28px;
		min-height: 0;
		padding-bottom: 0;
	}

	.ls-story .ls-story__step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 12px;
		row-gap: 12px;
	}

	.ls-story .ls-story__step-name {
		position: static;
		font-size: 17px;
		line-height: 1.3;
		white-space: normal;
		opacity: 1;
	}

	.ls-story .ls-story__step-name::before {
		content: none;
	}

	.ls-story .ls-story__step-track,
	.ls-story .ls-story__step:last-child .ls-story__step-track {
		display: block;
		grid-column: 1 / -1;
		width: auto;
		border-radius: 4px;
	}

	.ls-story .ls-story__controls {
		gap: 10px;
	}

	.ls-story .ls-story__btn {
		--ls-story-svg: 16px;
		width: auto;
		min-width: 0;
		height: 48px;
		padding: 0 26px;
	}

	.ls-story .ls-story__btn--replay {
		padding: 0 24px;
	}

	.ls-story .ls-story__btn-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* ==== Waiting for the script ============================================== */

/* With JavaScript on and motion allowed, the stage starts empty (as the
 * animation does at 0 s) and the controls keep their space, so the switch to
 * the animation is invisible. If the script never takes over, the still
 * comes back after 3 s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.ls-story:not(.is-armed, .is-still) .ls-story__bar {
		visibility: hidden;
		animation: ls-story-failsafe-bar 0s 3s forwards;
	}

	.ls-story:not(.is-armed, .is-still) .ls-story__groups {
		opacity: 0;
		animation: ls-story-failsafe 0s 3s forwards;
	}
}

@keyframes ls-story-failsafe {
	to { opacity: 1; }
}

@keyframes ls-story-failsafe-bar {
	to { visibility: visible; }
}

/* ==== Animation ============================================================ */

/* Cards leave their slots (which keep their size) and move over the stage.
 * The script sets the positions: --p0x..--p3y (calm row), --ax/--ay (last
 * calm place), --bx/--by/--br (pile), --cx/--cy (final place), --dock, --z. */
.ls-story.is-armed .ls-story__card {
	position: absolute;
	top: 0;
	left: calc(var(--ls-story-card-w) / -2);
	z-index: var(--z, 10);
	transform: translate(var(--cx), var(--cy));
	transform-origin: 50% 0;
}

.ls-story.is-armed .ls-story__line {
	display: block;
	opacity: 0;
}

.ls-story.is-armed .ls-story__logo {
	position: absolute;
	top: calc(var(--ls-story-logo-h) / -2);
	left: calc(var(--ls-story-logo-w) / -2);
	z-index: 40;
	transform: translate(var(--lgx), var(--lgy)) scale(var(--ls-story-logo-s));
	transform-origin: 50% 50%;
	animation: ls-story-logo-in 0.9s var(--ls-story-eo) 19.5s both, ls-story-logo-move 1.1s var(--ls-story-io) 24s forwards;
}

.ls-story.is-armed .ls-story__veil {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 30;
	border-radius: inherit;
	background: var(--ls-story-veil);
	opacity: 0;
	animation: ls-story-show 0.7s ease 19.4s both, ls-story-gone 0.6s ease 20.9s forwards;
}

.ls-story.is-armed .ls-story__group {
	animation: ls-story-box 0.6s ease 20.5s both;
}

.ls-story.is-armed .ls-story__group-head {
	animation: ls-story-show 0.6s ease 20.5s both;
}

.ls-story.is-armed .ls-story__status {
	animation: ls-story-status 0.45s var(--ls-story-eo) var(--tag-at, 25.1s) both;
}

/* Step 1, "It starts simple": cards 1-4 rise in one by one; the row slides
 * to stay centered and gold lines join the cards. Step 2, "Then it slips"
 * (9.6 s): cards 5-13 drop in, faster and faster; the lines snap and the calm
 * cards fall into the pile. Step 3, "Lapisoft puts it in order" (19.5 s):
 * veil and logo, group boxes (20.5 s), cards dock from 20.9 s, the logo
 * moves to its place (24 s), status tags open (25.1 s). End: 27.1 s. */
.ls-story.is-armed .ls-story__card[data-card="1"] {
	animation: ls-story-in-a 1s var(--ls-story-eo) 0.6s both, ls-story-shift1 1s var(--ls-story-io) 2.8s forwards, ls-story-shift2 1s var(--ls-story-io) 5s forwards, ls-story-shift3 1s var(--ls-story-io) 7.2s forwards, ls-story-jolt 0.9s var(--ls-story-jt) 14.7s forwards, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards;
}

.ls-story.is-armed .ls-story__card[data-card="2"] {
	animation: ls-story-in-a 1s var(--ls-story-eo) 2.8s both, ls-story-shift1 1s var(--ls-story-io) 5s forwards, ls-story-shift2 1s var(--ls-story-io) 7.2s forwards, ls-story-jolt 0.8s var(--ls-story-jt) 15.6s forwards, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards;
}

.ls-story.is-armed .ls-story__card[data-card="3"] {
	animation: ls-story-in-a 1s var(--ls-story-eo) 5s both, ls-story-shift1 1s var(--ls-story-io) 7.2s forwards, ls-story-jolt 0.95s var(--ls-story-jt) 13.4s forwards, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards;
}

.ls-story.is-armed .ls-story__card[data-card="4"] {
	animation: ls-story-in-a 1s var(--ls-story-eo) 7.2s both, ls-story-jolt 1s var(--ls-story-jt) 11.8s forwards, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards;
}

.ls-story.is-armed .ls-story__card[data-card="2"] .ls-story__line {
	animation: ls-story-line 0.6s var(--ls-story-eo) 3.6s both, ls-story-break 0.7s var(--ls-story-jt) 14.55s forwards;
}

.ls-story.is-armed .ls-story__card[data-card="3"] .ls-story__line {
	animation: ls-story-line 0.6s var(--ls-story-eo) 5.8s both, ls-story-break 0.7s var(--ls-story-jt) 13.25s forwards;
}

.ls-story.is-armed .ls-story__card[data-card="4"] .ls-story__line {
	animation: ls-story-line 0.6s var(--ls-story-eo) 8s both, ls-story-break 0.7s var(--ls-story-jt) 11.65s forwards;
}

.ls-story.is-armed .ls-story__card[data-card="5"] { animation: ls-story-in-b 1s var(--ls-story-eo) 9.6s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="6"] { animation: ls-story-in-b 1s var(--ls-story-eo) 11.6s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="7"] { animation: ls-story-in-b 0.9s var(--ls-story-eo) 13.2s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="8"] { animation: ls-story-in-b 0.85s var(--ls-story-eo) 14.5s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="9"] { animation: ls-story-in-b 0.75s var(--ls-story-eo) 15.5s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="10"] { animation: ls-story-in-b 0.65s var(--ls-story-eo) 16.3s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="11"] { animation: ls-story-in-b 0.6s var(--ls-story-eo) 16.95s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="12"] { animation: ls-story-in-b 0.55s var(--ls-story-eo) 17.5s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }
.ls-story.is-armed .ls-story__card[data-card="13"] { animation: ls-story-in-b 0.5s var(--ls-story-eo) 18s both, ls-story-dock 1.2s var(--ls-story-eo) var(--dock) forwards; }

/* Step strip: each step lights up with its act (0 s, 9.6 s, 19.5 s). */
.ls-story.is-armed .ls-story__step[data-step="1"] .ls-story__step-num { animation: ls-story-num 0.3s ease 0s both; }
.ls-story.is-armed .ls-story__step[data-step="2"] .ls-story__step-num { animation: ls-story-num 0.3s ease 9.6s both; }
.ls-story.is-armed .ls-story__step[data-step="3"] .ls-story__step-num { animation: ls-story-num 0.3s ease 19.5s both; }
.ls-story.is-armed .ls-story__step[data-step="1"] .ls-story__step-fill { animation: ls-story-fill 9.6s linear 0s both; }
.ls-story.is-armed .ls-story__step[data-step="2"] .ls-story__step-fill { animation: ls-story-fill 9.9s linear 9.6s both; }
.ls-story.is-armed .ls-story__step[data-step="3"] .ls-story__step-fill { animation: ls-story-fill 7.6s linear 19.5s both; }

/* Mobile and tablet: the title of the current step. */
.ls-story.is-armed .ls-story__step[data-step="1"] .ls-story__step-name { animation: ls-story-show 0s 0s both, ls-story-gone 0.3s ease 9.6s forwards; }
.ls-story.is-armed .ls-story__step[data-step="2"] .ls-story__step-name { animation: ls-story-show 0.3s ease 9.6s both, ls-story-gone 0.3s ease 19.5s forwards; }
.ls-story.is-armed .ls-story__step[data-step="3"] .ls-story__step-name { animation: ls-story-show 0.3s ease 19.5s both; }

/* Desktop: all three titles, idle until their act. */
@container ls-story (min-width: 1100px) {
	.ls-story.is-armed .ls-story__step[data-step="1"] .ls-story__step-name { animation: ls-story-ink 0.3s ease 0s both; }
	.ls-story.is-armed .ls-story__step[data-step="2"] .ls-story__step-name { animation: ls-story-ink 0.3s ease 9.6s both; }
	.ls-story.is-armed .ls-story__step[data-step="3"] .ls-story__step-name { animation: ls-story-ink 0.3s ease 19.5s both; }
}

/* Reduced motion (also switched on during playback) and print: the final picture. */
@media (prefers-reduced-motion: reduce), print {
	.ls-story.is-armed .ls-story__controls {
		display: none;
	}

	.ls-story.is-armed *,
	.ls-story.is-armed *::before,
	.ls-story.is-armed *::after {
		animation: none !important;
	}
}

/* ==== Keyframes (one set for all layouts; positions come from variables) == */

@keyframes ls-story-in-a {
	from { opacity: 0; transform: translate(var(--p0x), calc(var(--p0y) + 20px)) rotate(0deg) scale(var(--ls-story-calm-s)); }
	to { opacity: 1; transform: translate(var(--p0x), var(--p0y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-shift1 {
	from { transform: translate(var(--p0x), var(--p0y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
	to { transform: translate(var(--p1x), var(--p1y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-shift2 {
	from { transform: translate(var(--p1x), var(--p1y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
	to { transform: translate(var(--p2x), var(--p2y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-shift3 {
	from { transform: translate(var(--p2x), var(--p2y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
	to { transform: translate(var(--p3x), var(--p3y)) rotate(0deg) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-jolt {
	from { transform: translate(var(--ax), var(--ay)) rotate(0deg) scale(var(--ls-story-calm-s)); }
	to { transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-in-b {
	from { opacity: 0; transform: translate(var(--bx), calc(var(--by) - 40px)) rotate(var(--br)) scale(var(--ls-story-in-s)); }
	to { opacity: 1; transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(var(--ls-story-calm-s)); }
}

@keyframes ls-story-dock {
	from { transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(var(--ls-story-calm-s)); }
	to { transform: translate(var(--cx), var(--cy)) rotate(0deg) scale(1); }
}

@keyframes ls-story-line {
	from { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(var(--ls-story-line-s0x), var(--ls-story-line-s0y)); }
	to { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1, 1); }
}

@keyframes ls-story-break {
	from { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1, 1); }
	to { opacity: 0; transform: translate(var(--lx), var(--ly)) rotate(var(--lr)) scale(var(--ls-story-line-s1x), var(--ls-story-line-s1y)); }
}

@keyframes ls-story-logo-in {
	from { opacity: 0; transform: translate(var(--lg0x), var(--lg0y)) scale(0.9); }
	to { opacity: 1; transform: translate(var(--lg0x), var(--lg0y)) scale(1); }
}

@keyframes ls-story-logo-move {
	from { transform: translate(var(--lg0x), var(--lg0y)) scale(1); }
	to { transform: translate(var(--lgx), var(--lgy)) scale(var(--ls-story-logo-s)); }
}

@keyframes ls-story-show {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ls-story-gone {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* The group box fades in without fading the cards inside it. */
@keyframes ls-story-box {
	from { background-color: transparent; }
}

@keyframes ls-story-status {
	from { max-height: 0; opacity: 0; }
	to { max-height: 40px; opacity: 1; }
}

@keyframes ls-story-num {
	from { background-color: var(--ls-story-num-idle); color: var(--ls-story-white); }
	to { background-color: var(--ls-story-white); color: var(--ls-story-navy); }
}

@keyframes ls-story-ink {
	from { color: var(--ls-story-on-navy); }
	to { color: var(--ls-story-white); }
}

@keyframes ls-story-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}