/* =========================================================================
 * Content Band 004 — Manifesto, Words Only
 *
 * Content Band 001 without its photos. The rise scene (site.css §3g) with no
 * photo of its own: it rises, its top straight, over the section before it. The
 * statement comes up, slows to a crawl in the middle of the screen while its
 * lines come up from dim to full (pattern.js sets --line-light per line,
 * 0.18 → 1), then leaves with the panel. On a computer pattern.js draws the
 * path; on a touch screen it simply scrolls with the page (below).
 * ========================================================================= */

/* Light by default: the panel's fill is the paper, and the words are ink.
   `content-band-004--dark` leaves the rise scene's deep ink, which the script
   fades in and out; there the statement is drawn in difference (below), so
   its light text comes out dark on paper and light on ink. */
.rise-scene.content-band-004:not(.content-band-004--dark) .rise-scene__panel.rise-scene__panel {
	--rise-fill: var(--color-background);
}

/* The colour the panel fades to at its end (pattern.js): the next section's,
   so the two meet without an edge. */
.content-band-004 {
	--content-band-004-exit: var(--color-background);
}

/* A straight top: the panel rises with no curve. site.js still draws the
   circle on the panel's top fill layer (and sets --rise-clip), so it is
   undone here; the other rise scenes keep theirs. */
.rise-scene.content-band-004.is-curving .rise-scene__panel::before {
	clip-path: none;
}

/* The panel's length with the statement held (a touch screen): its own
   screen, then three quarters of a screen of hold. With the slow crawl
   (pattern.js) the script sets the length from where the statement ends. The lines light up from the moment the statement starts coming in
   to the end of that stretch (pattern.js), so the last is full as it picks
   up speed and leaves. Composition geometry. */
.content-band-004 .content-band-004__inner {
	position: relative;
	/* Its own block: the statement's lift (a negative top margin, pattern.js,
	   on a touch screen) then moves the statement, not the whole panel. */
	display: flow-root;
	/* No block gap above it: with the pool ceiling its canvas is the panel's
	   first child, so the inner is "second" and core's gap (0,1,0) would give
	   it a top margin, which collapses through the panel and moves the whole
	   section down, leaving a strip of paper under the section before. */
	margin-block-start: 0;
	min-height: 175svh;
}

/* The pool ceiling (`is-pool-ceiling` on the panel, site.css §3h): the light
   a pool throws on a ceiling, behind the words. On the panel, not the
   section, so it rises with it. Its canvas is the panel's first child; it
   sits above the panel's fill (its two layers at -1, site.css §3g), under
   the words. The shader paints the plaster itself, opaque, so the panel's
   own colour changes (the fade to the next section's colour, the dark
   variant) do not show under it. */
.content-band-004 .content-band-004__panel > .pool-ceiling__canvas.pool-ceiling__canvas {
	z-index: 0;
}

.content-band-004 .content-band-004__statement {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding-block: var(--space-xl);
	text-align: center;
	color: var(--color-text);
}

/* The dark variant: drawn in difference, so the light text comes out dark
   on the paper and light on the ink as the panel fades between them. On the
   box, a layer of its own. */
.content-band-004.content-band-004--dark .content-band-004__statement {
	color: var(--color-on-dark);
	mix-blend-mode: difference;
}

/* With pattern.js (not on a touch screen) the statement is not pinned: it
   sits at the top of the panel and the script draws its path (slows near the
   middle, crawls up, leaves with the panel). */
.content-band-004.is-drifting .content-band-004__statement {
	position: absolute;
	inset-inline: 0;
	top: 0;
	will-change: transform;
}

.content-band-004__statement > * {
	margin-block: 0;
}

.content-band-004__label {
	margin-bottom: var(--space-md) !important;
	color: var(--color-muted);
}

.content-band-004.content-band-004--dark .content-band-004__label {
	color: color-mix(in srgb, var(--color-on-dark) 60%, transparent);
}

.content-band-004__text {
	/* The measure in em, so a larger size keeps the same lines (about
	   40rem at a laptop's 3rem): the statement grows as a whole, never
	   into a wider, flatter block. */
	max-width: 13.5em;
	font-family: var(--font-display);
	/* The statement's size: the third heading step on a phone and a tablet,
	   then from the screen's width — about 3rem on a 1440–1470 laptop and
	   5rem on a 2560 screen, where a fixed 3rem left a small blob in the
	   middle. Bespoke: one display statement per page. */
	font-size: clamp(var(--heading-3), 0.3rem + 2.94vw, 5rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.content-band-004__text .line {
	opacity: var(--line-light, 1);
	transition: opacity 0.2s linear;
}

/* A touch screen (no drift script there: a path set from the scroll is drawn
   a frame late under a swipe, and jumps): the statement is not held at all.
   It scrolls with the page, as tall as its words (not a screen), and the
   panel is as long as they are. Any screen taller than it is wide (portrait)
   gets the same, mouse or not, whatever its width: the site's line between
   desktop and tablet. There the hero is a short band, so the panel is on
   screen when the page opens (pattern.js says more; the two conditions
   match). */
@media (hover: none) and (pointer: coarse), (orientation: portrait) {
	.content-band-004 .content-band-004__inner.content-band-004__inner,
	.rise-scene.content-band-004 .rise-scene__panel.content-band-004__panel {
		min-height: 0;
	}

	.content-band-004 .content-band-004__statement.content-band-004__statement {
		position: relative;
		min-height: 0;
	}
}

/* The editor: the panel needs no length there. */
.editor-styles-wrapper .content-band-004 .content-band-004__inner {
	min-height: 0;
}

.editor-styles-wrapper .content-band-004 .content-band-004__statement {
	position: relative;
	min-height: 0;
}