/*
 * Proposal scrub hero prototype.
 *
 * Extends the duplicated WD home hero: the extra hero height beyond the
 * shared 168svh cloud-transition window is the pinned scroll distance that
 * scrubs the proposal video. All other geometry stays code-owned by
 * wd-hero-system.css.
 */

.bekaa-video-scrub-hero .hero-banner {
	height: var(--bekaa-video-scrub-hero-height, 468svh);
}

@media (max-width: 767px) {
	/* Mobile scrubs a trimmed segment (1s off each end), so the chapter is
	   proportionally shorter. */
	.bekaa-video-scrub-hero .hero-banner {
		height: var(--bekaa-video-scrub-hero-mobile-height, 352svh);
	}

	.bekaa-wd-home.bekaa-video-scrub-hero .hero-banner_video.bekaa-proposal-scrub__video {
		display: block;
	}

	.bekaa-wd-home.bekaa-video-scrub-hero .hero-banner_title-arrive {
		font-size: clamp(2rem, 7vw, 3.25rem);
		line-height: 1.02;
		letter-spacing: 0.008em;
	}
}

.bekaa-video-scrub-hero .bekaa-proposal-scrub__video {
	z-index: 0;
}

/* Entry veil: a white mist plane over the chapter media that the runtime
   fades out as the section scrolls in — the chapter is entered through mist
   and exited through clouds. Defaults to invisible so a failed runtime can
   never leave the hero covered. */
.bekaa-video-scrub-hero .bekaa-proposal-scrub__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

/* Scrub-revealed line. Hidden pre-boot only when the anim runtime is on the
   page; GSAP owns the reveal from there. */
html.bekaa-anim-js .bekaa-video-scrub-hero .bekaa-proposal-scrub__title {
	opacity: 0;
	visibility: hidden;
}

.bekaa-video-scrub-hero .bekaa-proposal-scrub__title {
	font-size: clamp(2.5rem, 5.5vw, 6.5rem);
	line-height: 0.96;
}

.bekaa-video-scrub-hero .bekaa-proposal-scrub__title .hero-banner_title-large {
	display: flex;
	justify-content: center;
	width: 100%;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	.bekaa-video-scrub-hero .hero-banner {
		height: 168svh;
	}

	.bekaa-wd-home.bekaa-video-scrub-hero .hero-banner_video.bekaa-proposal-scrub__video {
		display: none;
	}

	html.bekaa-anim-js .bekaa-video-scrub-hero .bekaa-proposal-scrub__title {
		opacity: 1;
		visibility: visible;
	}
}