/*
 * CILI: the site's motion, shared by the first page and the artists' page (the owner's requests of 2026-10-14 and
 * 2026-10-15, Apple-style: each part comes in as it is scrolled to; ADR-0023's notes of those days; WEB-650, WEB-682,
 * WEB-684, WEB-685). assets/js/motion.js runs it; this sheet hides nothing until that script has said so
 * (`html.lcr-motion`), so a page without the script, or with `prefers-reduced-motion`, shows every part at once.
 *
 * - The reveal: a part armed below the fold (`.lcr-reveal.is-armed`) waits, lowered and faded, and comes in once
 *   scrolled to (`.is-in`), after the parts that came in with it, in reading order (`--lcr-reveal-delay`).
 * - The stage, artworks in the site's shapes along a drawn line (templates/showcase/stage.php): the artists' page's
 *   hero and, since 2026-10-15, the first page's, in place of its row of circles and tilted squares. Up to five
 *   artworks, in turn a circle, a capsule, an arch, a tilted rounded square and a small circle (the first page's circle
 *   and tilted square, the reference's capsule and arch), over a thin line that draws itself with two small outlined
 *   circles on it, as Zajno's landing page the owner showed; a phone shows the first three. Each shape rises in when
 *   the page opens (CSS alone) and drifts up at its own depth as the stage scrolls away (`--lcr-stage-p`, 0 to 1).
 *   The page sets the stage's grays through three custom properties, the line, the dots' edge and the empty frame's
 *   fill: the defaults are the white page's, the artists' page sets the black page's (layout-promote.css).
 *
 * Every value is a token or a calc() of tokens; `html body` first, as the site's other sheets.
 */

@keyframes lcr-rise {
	from {
		opacity: 0;
		transform: translateY(var(--lcr-space-24));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lcr-draw {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* The stage: as wide as the widest row; the line and the drift never widen the page (overflow-x: clip, the y-axis left
   free so the shapes may drift over what is above them). */
html body .lcr-stage {
	--lcr-stage-line: var(--lcr-color-outline);
	--lcr-stage-dot: var(--lcr-color-dashed-outline);
	--lcr-stage-fill: var(--lcr-color-panel);
	position: relative;
	width: 100%;
	max-width: var(--lcr-web-container-wide);
	aspect-ratio: 1.15;
	margin: 0 auto;
	overflow-x: clip;
}

html body .lcr-stage-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .lcr-stage-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

html body .lcr-stage-line path {
	fill: none;
	stroke: var(--lcr-stage-line);
	stroke-width: calc(1.5 * var(--lcr-size-hairline));
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
	animation: lcr-draw calc(5 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) both;
	animation-delay: var(--lcr-motion-duration-medium);
}

/* Two small outlined circles on the line, as the reference's. */
html body .lcr-stage-dot {
	position: absolute;
	width: var(--lcr-space-14);
	height: var(--lcr-space-14);
	border-radius: var(--lcr-radius-pill);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-stage-dot);
	transform: translate(-50%, -50%);
	animation: lcr-rise calc(2 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) both;
	animation-delay: calc(4 * var(--lcr-motion-duration-medium));
	pointer-events: none;
}

html body .lcr-stage-dot--one {
	top: 32.7%;
	left: 32.6%;
}

html body .lcr-stage-dot--two {
	top: 63.5%;
	left: 68%;
}

html body .lcr-shape {
	position: absolute;
	margin: 0;
	transform: translateY(calc(var(--lcr-stage-p, 0) * var(--lcr-stage-depth, 0) * var(--lcr-space-96)));
	will-change: transform;
}

/* Each frame is its artwork's /p/ link; its ring for the keyboard stands outside the clipped picture. */
html body .lcr-shape-frame {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--lcr-stage-fill);
	animation: lcr-rise calc(2.4 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) both;
}

html body .lcr-shape .lcr-stage-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform calc(2 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard);
}

html body .lcr-shape-frame:hover .lcr-stage-image {
	transform: scale(1.04);
}

/* The cards' watermark, when the site has one, as on the cards. */
html body .lcr-shape .ulz-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

/* A phone shows three: the circle, the capsule and the arch; the tilted square and the small circle join from the tablet. */
html body .lcr-shape--1 {
	--lcr-stage-depth: -0.6;
	top: 38%;
	left: 2%;
	width: 44%;
	aspect-ratio: 1;
}

html body .lcr-shape--1 .lcr-shape-frame {
	border-radius: var(--lcr-radius-pill);
	animation-delay: calc(2 * var(--lcr-motion-duration-medium));
}

html body .lcr-shape--2 {
	--lcr-stage-depth: -1.4;
	top: 4%;
	left: 37%;
	width: 28%;
	aspect-ratio: 0.58;
}

html body .lcr-shape--2 .lcr-shape-frame {
	border-radius: var(--lcr-radius-pill);
	animation-delay: calc(3 * var(--lcr-motion-duration-medium));
}

html body .lcr-shape--3 {
	--lcr-stage-depth: -0.9;
	top: 34%;
	left: 60%;
	width: 38%;
	aspect-ratio: 0.8;
}

html body .lcr-shape--3 .lcr-shape-frame {
	border-radius: var(--lcr-radius-pill) var(--lcr-radius-pill) var(--lcr-radius-tile) var(--lcr-radius-tile);
	animation-delay: calc(4 * var(--lcr-motion-duration-medium));
}

html body .lcr-shape--4,
html body .lcr-shape--5 {
	display: none;
}

html body .lcr-shape--4 .lcr-shape-frame {
	border-radius: var(--lcr-radius-hero);
	animation-delay: calc(5 * var(--lcr-motion-duration-medium));
}

html body .lcr-shape--5 .lcr-shape-frame {
	border-radius: var(--lcr-radius-pill);
	animation-delay: calc(6 * var(--lcr-motion-duration-medium));
}

/* ------------------------------------------------------------------------------------------- the reveal */

/* Only lowered, never scaled, so a part keeps its own left and right edges while it waits (WEB-640 measures them). */
html.lcr-motion body .lcr-reveal.is-armed {
	opacity: 0;
	transform: translateY(var(--lcr-space-40));
	transition:
		opacity calc(2 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) var(--lcr-reveal-delay, 0s),
		transform calc(2 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) var(--lcr-reveal-delay, 0s);
}

html.lcr-motion body .lcr-reveal.is-armed.is-in {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------------------------------- tablet and up */

@media (min-width: 768px) {

	html body .lcr-stage {
		aspect-ratio: 2.4;
	}

	html body .lcr-shape--1 {
		top: 34%;
		left: 4%;
		width: 21%;
	}

	html body .lcr-shape--2 {
		top: 6%;
		left: 26%;
		width: 14%;
	}

	html body .lcr-shape--3 {
		top: 28%;
		left: 42.5%;
		width: 18%;
	}

	html body .lcr-shape--4 {
		--lcr-stage-depth: -1.6;
		display: block;
		top: 8%;
		left: 62%;
		width: 17%;
		aspect-ratio: 1;
		rotate: 10deg;
	}

	html body .lcr-shape--5 {
		--lcr-stage-depth: -0.7;
		display: block;
		top: 40%;
		left: 81%;
		width: 15%;
		aspect-ratio: 1;
	}

	html body .lcr-stage-dot--one {
		top: 32.7%;
		left: 22%;
	}

	html body .lcr-stage-dot--two {
		top: 63.5%;
		left: 79%;
	}
}

/* ------------------------------------------------------------------------------------------- still */

/* Asked for no motion: the shapes and the line are there from the start, and nothing drifts. */
@media (prefers-reduced-motion: reduce) {

	html body .lcr-stage *,
	html body .lcr-stage-line path {
		animation: none !important; /* the rise and the drawn line, whatever rule set them */
		transition: none !important; /* the same */
	}

	html body .lcr-shape {
		transform: none !important; /* the drift, set from the scroll */
	}
}