/**
 * The Wicked — reel stage (tw-reel-stage).
 *
 * The block of text beside the reel that changes when a cue is picked: eyebrow, title, description,
 * meta line, and a link to the project once a film is on the stage.
 *
 * ── ⛔ WHAT IS NOT A CONTROL, AND WHY ──────────────────────────────────────────────────────────
 * The two things a control MUST own here are the crossfade duration and the vertical shift, because
 * the JS reads them back (`--tw-rs-fade`, `--tw-rs-shift`) and one control has to drive the text
 * fade, the stagger and the height animation together. Everything else — the stack, the gaps, the
 * `will-change` — lives here. §6a: a control that composes a SHAPE compiles at (0,4,0) on every
 * instance and beats every media query in this file, silently.
 *
 * ⚠️ `transition-property` is owned by this file; `transition-duration` comes from the custom
 * property the control writes. Three longhands, separate owners, no shorthand anywhere — the same
 * rule `widget-case-hero-video.css` records, for the same reason.
 */

.tw-rs {
	/* Fallbacks are the real values: the control writes these, but a stage dropped on a page before
	 * anyone touches the Style tab must still animate. */
	--tw-rs-fade: 260ms;
	--tw-rs-shift: 6px;

	display: block;
}

/* ⛔ THE MEASURED BOX. The JS animates this element's height across a swap, so it must be the thing
 * that wraps the changing content and nothing else — no padding of its own, no margin collapsing
 * through it. `overflow: hidden` is what stops a longer description spilling out mid-transition. */
.tw-rs__well {
	overflow: hidden;
	transition-property: height;
	transition-duration: var( --tw-rs-fade );
	transition-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );
}

.tw-rs__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* The two states of a swap. `is-swapping` is on for the first half — the old content leaving — and
 * off for the second, so the same declarations run in both directions. */
.tw-rs__eyebrow,
.tw-rs__title,
.tw-rs__body,
.tw-rs__meta,
.tw-rs__link {
	transition-property: opacity, transform;
	transition-duration: var( --tw-rs-fade );
	transition-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );
	opacity: 1;
	transform: translateY( 0 );
}

.tw-rs.is-swapping .tw-rs__eyebrow,
.tw-rs.is-swapping .tw-rs__title,
.tw-rs.is-swapping .tw-rs__body,
.tw-rs.is-swapping .tw-rs__meta,
.tw-rs.is-swapping .tw-rs__link {
	opacity: 0;
	transform: translateY( calc( var( --tw-rs-shift ) * -1 ) );
}

/* ⚠️ THE STAGGER IS A DELAY, NOT A SECOND ANIMATION. Title and meta lead, the description follows —
 * it reads as one movement rather than five things twitching. Kept small: at ~40ms it is felt and
 * not seen, and anything larger starts to look like a slow page. */
.tw-rs__body {
	transition-delay: 40ms;
}

.tw-rs__link {
	transition-delay: 60ms;
}

.tw-rs__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.tw-rs__title {
	margin: 0;
}

.tw-rs__body,
.tw-rs__meta {
	margin: 0;
	max-width: 46em;
}

/* ⛔ `pre-line` IS WHAT MAKES A TWO-PARAGRAPH DESCRIPTION READ AS TWO PARAGRAPHS. The body is a
 * single `<p>` filled with `textContent`, so there are no child elements to space — the break
 * arrives as `\n\n` from `Cue_Sheet_Widget::to_plain()` and this is the only thing that honours it.
 * ⚠️ `pre-line` and not `pre-wrap`: runs of spaces must still collapse, or a stray double space
 * typed into the WordPress editor becomes visible on the page. */
.tw-rs__body {
	white-space: pre-line;
}

.tw-rs__meta {
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* ⛔ NO `:hover` COLOUR RULE HERE. `link_color` is a control, so it compiles at (0,4,0) and any
 * `:hover` colour in this file would be dead — the same trap `widget-cue-sheet.css` records. If a
 * hover colour is ever wanted it must be a control too, at (0,5,0). */
.tw-rs__link {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.tw-rs__link[hidden],
.tw-rs__body[hidden],
.tw-rs__meta[hidden],
.tw-rs__eyebrow[hidden] {
	/* ⚠️ `hidden` is only `display:none` in the UA sheet, which a `display` rule above would beat.
	 * Stated explicitly so an empty field genuinely leaves the flex layout instead of contributing
	 * a gap — which is what an unstyled `[hidden]` inside a `gap`-spaced column does. */
	display: none;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────────────
 * ⛔ LAST IN THE FILE AND ROOT-PREFIXED, so it wins on order against everything above. The swap
 * still HAPPENS — the row highlights, the words and the film change — it simply arrives instantly.
 * A control that appears to do nothing is worse than one that does it without ceremony. */
@media ( prefers-reduced-motion: reduce ) {
	.tw-rs .tw-rs__well,
	.tw-rs .tw-rs__eyebrow,
	.tw-rs .tw-rs__title,
	.tw-rs .tw-rs__body,
	.tw-rs .tw-rs__meta,
	.tw-rs .tw-rs__link {
		transition: none;
		transition-delay: 0s;
	}

	.tw-rs.is-swapping .tw-rs__eyebrow,
	.tw-rs.is-swapping .tw-rs__title,
	.tw-rs.is-swapping .tw-rs__body,
	.tw-rs.is-swapping .tw-rs__meta,
	.tw-rs.is-swapping .tw-rs__link {
		opacity: 1;
		transform: none;
	}
}