/* =========================================================
   NMW redesign — desktop intro scroll sequence (three.js).
   Pinned stage inside a tall track; scroll drives the panels.
   ========================================================= */

.rds-intro { --rds-orange: #F97827; }

/* Tall scroll track: 4 panels worth of scroll (each ~100vh). */
.rds-intro__track { height: 400vh; position: relative; }

/* The stage is pinned for the whole track. */
.rds-intro__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background: #000;
}

/* Top orange half — changing headline. */
.rds-intro__top {
	position: absolute;
	inset: 0 0 50% 0;
	background: var(--rds-orange);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rds-intro__headline {
	position: absolute;
	margin: 0;
	color: #000;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(48px, 7vw, 120px);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: center;
	line-height: 0.95;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
	padding: 0 4vw;
}
.rds-intro__headline.is-active { opacity: 1; transform: none; }

/* Bottom black half — WebGL letters. */
.rds-intro__bottom {
	position: absolute;
	inset: 50% 0 0 0;
	background: #000;
}
.rds-intro__gl { position: absolute; inset: 0; }
.rds-intro__gl canvas { display: block; width: 100% !important; height: 100% !important; }
.rds-intro__sronly {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Plansza 4 — full-page emblem, revealed at the end of the track. */
.rds-intro__emblem {
	position: absolute;
	inset: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}
.rds-intro__emblem.is-on { opacity: 1; visibility: visible; }
.rds-intro__emblem img {
	width: min(46vw, 620px);
	height: auto;
	filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(2600%) hue-rotate(347deg) brightness(101%) contrast(97%);
	/* tint the black loop logo to brand orange */
}

@media (max-width: 1024px) { .rds-intro { display: none; } }