/**
 * Blue Frame Films: hero.css
 *
 * Purpose:  Homepage hero (#home): headline, calls to action, call/text line, showreel poster.
 * Used by:  template-parts/home/hero.php.
 * To edit:  Hero glow is the radial-gradient on .hero. Showreel: .hero-reel / .showreel .reel (see hero.php).
 */

/* ==========================================================================
   Hero text
   ========================================================================== */
.hero {
	border-top: 0;
	padding: 72px 0 88px;
	background: radial-gradient(800px 420px at 50% 0%,rgba(30,123,255,.28),transparent 70%),var(--bg);
}

.hero-text {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 44px;
}

.hero h1 {
	font-size: clamp(2.4rem,6vw,4.6rem);
	font-weight: 900;
	margin: .9rem 0 1.1rem;
}

.hero h1 em {
	font-style: normal;
	white-space: nowrap;
	color: var(--elec2);
	text-shadow: 0 0 30px rgba(0,194,255,.45);
}

.hero .lead {
	margin: 0 auto 1.8rem;
	font-size: 1.12rem;
}

.cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.hero-call {
	margin-top: 18px;
	font-size: .92rem;
	color: var(--muted);
}

.hero-call a {
	color: var(--elec2);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Showreel v3 (since 2.5.0): muted loop over the poster. The video (Media Library
   bf-showreel-hero.webm/.mp4) sits on top of the poster image; poster only on phones
   (< 768px) and with reduced motion (the inline script in hero.php also drops the sources).
   ========================================================================== */
.hero-reel {
	max-width: 1000px;
	margin: 0 auto;
}

.showreel.has-poster .poster,
.showreel .reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showreel .poster {
	z-index: 0;
}

.showreel .reel {
	z-index: 1;
	background: transparent;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.showreel .reel {
		display: none;
	}
}

.reel-sound {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 10px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--elec2);
	text-decoration: none;
}

.reel-sound:hover,
.reel-sound:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:760px) {
	.hero {
		padding: 48px 0 60px;
	}

	.cta .btn {
		flex: 1 1 100%;
	}

}