/**
 * Unodevs — Strata sections. Structure only.
 *
 * The three scroll-driven sections: reel, depth, zoomgate.
 * Palette and type belong to whichever style layer is active — these are
 * registered sections and work in any demo, so nothing here hard-codes a
 * colour that is not derived from the theme's own custom properties.
 *
 * Two things this file is responsible for that the script is not:
 *
 *  1. The layout that makes the motion possible at all — the tall wrappers,
 *     the sticky frames, the column padding that stops a sliding column
 *     exposing a gap.
 *
 *  2. The state everything falls back to when the script does not run. Not
 *     "a degraded version": an actual readable section. Under reduced
 *     motion, with JavaScript off, and in print, every one of these is a
 *     plain block of content, which is why none of them is built out of
 *     elements that only make sense once they have been transformed.
 *
 * @package Unodevs
 */


/* ==========================================================================
   2. Reel
   --------------------------------------------------------------------------
   Copy rolling upward through a sticky frame, driven by the page scrollbar.
   ========================================================================== */

.u-reel {
	/* Set inline by PHP from the number of lines: one screen each, plus one
	   so the last line settles before the section lets go. */
	min-height: var(--u-reel-h, 500vh);
	position: relative;
}

.u-reel-pin {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: grid;
	align-content: center;
	overflow: hidden;
}

.u-reel-head {
	margin-bottom: clamp(24px, 5vh, 56px);
}

/*
 * The frame. Fixed height, because the script measures it and spaces the
 * lines by it — a frame that grows with its content would mean the spacing
 * changed depending on which line happened to be longest.
 */
.u-reel-frame {
	position: relative;
	height: clamp(180px, 30vh, 280px);

	/* Lines fade out at the edges rather than being clipped. A hard cut
	   makes the roll look like a scrolling div, which is what it is and
	   exactly what it should not look like. */
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.u-reel-line {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	gap: 10px;
}

.u-reel-line p {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 3rem);
	line-height: 1.15;
	max-width: 22ch;
	font-weight: 500;
}

.u-reel-note {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--u-muted);
}

/* A thin progress rail, so the section says how much of itself is left.
   A sticky section with no indication of length is the single most
   complained-about pattern on the web and it costs four rules to fix. */
.u-reel-rail {
	position: absolute;
	right: clamp(16px, 4vw, 40px);
	top: 22%;
	bottom: 22%;
	width: 2px;
	background: var(--u-border);
	border-radius: 2px;
}

.u-reel-bead {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--u-primary);
	border-radius: inherit;
	transform-origin: top center;
	transform: scaleY(0);
}

@media (max-width: 620px) {
	.u-reel-rail { display: none; }


}


/* ==========================================================================
   5. When the motion is switched off
   --------------------------------------------------------------------------
   Not a fallback, a second design. Everything below is what these four
   sections are for a visitor who has asked for reduced motion, has
   JavaScript off, or is printing — and all three have to be genuinely
   readable, not a broken version of the animated one.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Unpin. A sticky frame with no motion to justify it is a section that
	   refuses to scroll. */
	.u-reel{
		min-height: 0;
	}

	.u-reel-pin{
		position: static;
		height: auto;
		min-height: 0;
		padding-block: clamp(60px, 10vh, 110px);
	}

	/* The reel becomes an ordinary list of statements. */
	.u-reel-frame {
		height: auto;
		display: grid;
		gap: clamp(20px, 4vh, 40px);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.u-reel-line {
		position: static;
		inset: auto;
		opacity: 1 !important;
		transform: none !important;
	}

	.u-reel-line p {
		font-size: clamp(1.2rem, 2.4vw, 1.7rem);
		max-width: 40ch;
	}

	.u-reel-rail { display: none; }

}

@media print {
	.u-reel{ min-height: 0; }

	.u-reel-pin{
		position: static;
		height: auto;
		min-height: 0;
	}

	.u-reel-frame {
		height: auto;
		display: grid;
		gap: 12px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.u-reel-line {
		position: static;
		opacity: 1 !important;
		transform: none !important;
	}
	.u-reel-rail { display: none; }


}