/**
 * Refinery Scroll Hero — supplementary styles.
 * Enqueued only on page 410 (see refinery-scroll-hero.php). Scoped entirely
 * under .refinery-scroll-hero so nothing outside the hero is affected.
 *
 * --- Architecture (this revision): MASK -> TRACK -> ROWS ---
 *
 * refinery-scroll-hero.js now wraps each dynamic zone's five existing
 * Elementor-editable state elements in one ".hero-reveal-track" element and
 * animates ONLY that track's own `y` transform — never the five rows
 * individually. The mask (.hero-word-window etc.) clips to exactly one row's
 * height; moving the track by whole multiples of that row height is what
 * scrolls one state out and the next one in.
 *
 * This means the five rows themselves must sit in plain, static, stacked
 * document flow (no position:absolute, no per-row transform, no per-row
 * opacity toggling) — the OPPOSITE of the Elementor global classes'
 * own authored behavior for `.hero-reveal-anchor` / `.hero-reveal-slot`
 * (`position:absolute`, `opacity:0`/`1`, `transform:translateY(110%)`),
 * which still exists for good reason: if JavaScript never runs, no track is
 * ever built, the five elements stay exactly where Elementor put them, and
 * that original CSS-only behavior is precisely the "WEBSITES visible, rest
 * hidden, no motion" static fallback this hero must always have.
 *
 * So the override below is intentionally scoped to apply ONLY once a row is
 * actually inside a track (`.hero-reveal-track .hero-reveal-anchor` /
 * `.hero-reveal-track .hero-reveal-slot`) — a plain structural selector, not
 * a runtime flag. Before the script runs, no element is inside a track, so
 * this rule simply doesn't match anything and the original fallback stands
 * untouched. After the script wraps the five rows, this rule takes over for
 * exactly those elements.
 *
 * Specificity note: these rows never receive an inline transform/opacity
 * from GSAP in this architecture (only the track element does), so there is
 * no risk of a CSS rule fighting a GSAP-written inline style the way the
 * previous per-element revision did. Even so, this still beats Elementor's
 * own `.elementor .hero-reveal-slot` rule (2 class selectors) purely via
 * specificity (4 class selectors here) — no `!important` anywhere in this
 * file.
 */

.elementor .refinery-scroll-hero .hero-reveal-track .hero-reveal-anchor,
.elementor .refinery-scroll-hero .hero-reveal-track .hero-reveal-slot {
	position: static;
	opacity: 1;
	transform: none;
	display: block;
	white-space: nowrap;
	/* The callout's own Elementor styling carries a -0.75rem top margin
	   (originally meant to tuck the handwritten line closer to the headline
	   above the whole zone). Left in place, that negative margin collapses
	   through the track (a plain div, no block-formatting context of its
	   own) and pulls each row visibly above the mask's own clip boundary —
	   confirmed by direct measurement on the live page. Rows are sized and
	   vertically positioned entirely by sizeZone()'s explicit row height
	   now, so no row needs its own top/bottom margin once it's inside a
	   track. Only the vertical margin is zeroed here — a row's horizontal
	   margin (e.g. the small left gap the word states use to sit apart from
	   the fixed "WE BUILD") is left untouched; it doesn't collapse and isn't
	   part of this bug. */
	margin-top: 0;
	margin-bottom: 0;
}

.refinery-scroll-hero .hero-reveal-track {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* This revision's metadata/callout zones animate each row's own opacity +
   transform (see wireSoftZone() in refinery-scroll-hero.js), independent of
   the track's own transform — hinting both here avoids a jank/paint-skip on
   the first row-level tween in zones where only the track was hinted before. */
.refinery-scroll-hero .hero-reveal-track > * {
	will-change: transform, opacity;
}

.refinery-scroll-hero .hero-word-window,
.refinery-scroll-hero .hero-meta-index-window,
.refinery-scroll-hero .hero-meta-category-window,
.refinery-scroll-hero .hero-callout-window {
	position: relative;
	overflow: hidden;
}

/* Applied to <body> only while the hero is actively pinned (see onToggle in
   refinery-scroll-hero.js), to guard against a transient horizontal
   scrollbar some browsers introduce for the duration of a pinned section. */
body.refinery-hero-pinned {
	overflow-x: hidden;
}