/**
 * Stand-up Polska — heading reveal animations
 */

/* --------------------------------------------------------------------- *
 * Anti-FOUC
 *
 * The pending class is added to <html> by an inline snippet in wp_head and
 * removed once the splits are built (or by a safety timeout). It is only ever
 * added when JS runs, so headings stay visible if JS fails or is disabled.
 * --------------------------------------------------------------------- */
html.sh-anim-pending .brxe-heading {
	visibility: hidden;
}

/* --------------------------------------------------------------------- *
 * Descender rescue
 *
 * mask:"lines" wraps each line in an overflow:clip box sized to the line box.
 * The headings run at line-height:100%, so Polish descenders (ą ę) and the
 * tail of Ł were being cut off — measured 21px of clipped glyph at 88px type.
 *
 * Padding on the line grows the mask; the negative margin on the mask pulls
 * the following line back up, so total heading height is unchanged (verified:
 * 175/350/210/88px identical before and after).
 *
 * Scoped to `.shline-mask > .shline` so the unmasked "fade" preset, which has
 * no mask wrapper, never picks up the extra padding.
 * --------------------------------------------------------------------- */
:root {
	--sh-descender: 0.28em;
}

.shline-mask > .shline {
	padding-bottom: var(--sh-descender);
}

.shline-mask {
	margin-bottom: calc(var(--sh-descender) * -1);
}

/* --------------------------------------------------------------------- *
 * Word swap roller
 *
 * A vertical roller that cycles between .word-1 and .word-2 inside a heading.
 * Built by JS; these rules only style what it creates.
 *
 * display:block makes the roller take the full line, so the two words never
 * jostle each other despite being different lengths, and following text
 * ("ŻARTY.") drops to its own row.
 *
 * The height carries the same descender allowance as the line masks — without
 * it, overflow:hidden slices the tails of "Najostrzejsze" / "Najłagodniejsze".
 * The negative margin cancels that extra height again, so adding the roller
 * leaves the heading's total height unchanged (measured 302px before and after).
 * --------------------------------------------------------------------- */
/* Height and, on very narrow screens, font-size are set inline by sizeRoller()
   in heading-anim.js, which measures the words so nothing is ever clipped. The
   values here are only a sane pre-measurement fallback. */
.ws {
	display: block;
	position: relative;
	overflow: hidden;
	height: calc(1em + var(--sh-descender));
	margin-bottom: calc(var(--sh-descender) * -1);
}

.ws__track {
	display: block;
}

.ws__item {
	display: block;
	white-space: nowrap;
}

/* --------------------------------------------------------------------- *
 * Reduced motion — never hide anything, never animate.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.sh-anim-pending .brxe-heading {
		visibility: visible;
	}

	/* No split runs, so the roller is never built and both words would sit
	   side by side. Show only the first. */
	.word-2 {
		display: none;
	}
}