/* Back to School Retro Pricing promo hero.
   Rides on .billboard-hero so it inherits the exact default-hero sizing
   (full-bleed width, min-height, margin-top pull-up, padding). That keeps the
   reused hero video rendering at the SAME size as the default hero. Only the
   background darkening and the typographic lockup differ. */

/* solid fallback behind the video while it loads */
.b2s-hero {
	background: #000;
	/* Establish a stacking context (on mobile too, where billboard-hero.css
	   only sets z-index at >=801px) so the VHS overlay stays contained and the
	   pulled-up search bar (z-index:2) paints on top of the hero. */
	position: relative;
	z-index: 1;
}

/* reused hero video/poster sit behind the darkening overlay */
.b2s-hero .billboard-hero__bg,
.b2s-hero .billboard-hero__video {
	z-index: 0;
}

/* heavier darkening than the default hero, with a faint warm center glow */
.b2s-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 38%,
		rgba(26, 5, 5, 0.80) 0%,
		rgba(0, 0, 0, 0.90) 55%,
		rgba(0, 0, 0, 0.95) 100%);
}

/* the lockup wrapper mirrors .billboard-hero__content so vertical position and
   header clearance match the default hero exactly (see @media below) */
/* VHS / scanline overlay, scoped to the hero and layered above the type */
.b2s-hero__vhs {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
	background-size: 100% 3px, 6px 100%;
}

.b2s-hero .banner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	padding: 60px 20px 20px;
}

.b2s-hero .line-1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: clamp(3.5rem, 11vw, 6.8rem);
	color: #fff;
	letter-spacing: -3px;
	line-height: .85;
	text-transform: uppercase;
	transform: scaleX(1.05);
	animation: switch-on .5s ease .1s both;
}

.b2s-hero .line-2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: clamp(3.5rem, 11vw, 6.8rem);
	color: #000;
	filter:
		drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
		drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
		drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff)
		drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff);
	text-transform: uppercase;
	letter-spacing: -1px;
	line-height: .85;
	transform: scaleX(1.05);
	position: relative;
	z-index: 1;
	animation: switch-on .5s ease .25s both;
}

@supports (paint-order: stroke fill) {
	.b2s-hero .line-2 {
		color: #000;
		-webkit-text-stroke: 5px #fff;
		paint-order: stroke fill;
		filter: none;
	}
}

.b2s-hero .perspective-container {
	perspective: 600px;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: -.55em;
	position: relative;
	z-index: 2;
}

.b2s-hero .line-3 {
	font-family: 'Permanent Marker', cursive;
	font-size: clamp(2.8rem, 9.5vw, 5.8rem);
	color: #e52b2e;
	line-height: .85;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotateX(18deg) rotateY(-5deg) skewX(-6deg) scaleX(1.05);
	transform-style: preserve-3d;
	text-shadow: 0 0 4px rgba(229, 43, 46, .9), 0 0 12px rgba(229, 43, 46, .4);
	animation: neon 5s linear .9s infinite;
}

.b2s-hero .mobile-break {
	display: inline;
}

/* Subhead line under the lockup: white Montserrat 900 with an amber price accent. */
.b2s-hero__subhead {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: clamp(0.8rem, 3.2vw, 1.05rem);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	margin-top: 25px;
	white-space: nowrap;
	animation: switch-on .5s ease 1.1s both;
}

.b2s-hero__highlight {
	color: #ffb703;
}

@keyframes switch-on {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes neon {
	0% { opacity: .25; }
	3% { opacity: 1; }
	5% { opacity: .55; }
	8% { opacity: 1; }
	12% { opacity: .8; }
	15%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.b2s-hero .line-1,
	.b2s-hero .line-2,
	.b2s-hero .line-3 {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* Desktop: match the default hero's content clearance so the section (and the
   video) is the same height, and the lockup clears the overlapping header. */
@media (min-width: 801px) {
	.b2s-hero .banner {
		padding-top: 220px;
	}
}

@media (max-width: 600px) {
	.b2s-hero .perspective-container {
		margin-top: -.35em;
	}

	.b2s-hero .line-3 {
		white-space: normal;
		font-size: clamp(2.8rem, 11vw, 4.2rem);
		transform: rotateX(12deg) rotateY(-3deg) skewX(-4deg);
	}

	.b2s-hero .mobile-break {
		display: block;
	}

	.b2s-hero__subhead {
		white-space: normal;
		font-size: clamp(0.78rem, 3.5vw, 0.92rem);
		line-height: 1.3;
	}
}