/**
 * Nuwave Mobile Power Banner - front-end styles.
 *
 * .nmpb-banner        = full-bleed SOLID BLACK backdrop (fills around/below with black).
 * .nmpb-banner__inner = THE BANNER: ~200px box constrained to the tab-card width (via .wrap),
 *                       gradient + bg image, clips the machine image at its edges.
 *
 * The machine image is ABSOLUTELY positioned so it never reserves an unused column or
 * squeezes the title. Desktop: image sits right-of-center and ~40% bleeds off the bottom.
 * Mobile: title over button on the left, image full-height on the right (cut off), with padding.
 *
 * The title is NEVER clipped/hidden - it wraps (text-wrap:balance) and, if it cannot fit,
 * simply overflows (it may overlap the image, which sits behind it).
 * Title/button use the editor px size at every breakpoint. Hidden until banner.js reveals it.
 */

.nmpb-banner {
	position: relative;
	display: none;
	width: 100%;
	background: #0a0a0a;
	padding-bottom: 16rem;
	isolation: isolate;
}

/* ------------------------------------------------------------------ */
/* Laser-cleaner slide transition (optional; see banner.js).          */
/*                                                                    */
/* ONE tall beam sweeps the full banner width. --nmpb-beam (0..1) is   */
/* both the beam's position AND the wipe boundary, so the content      */
/* clears exactly as the beam passes:                                  */
/*   Pass 1 (erase):  --nmpb-beam 0 -> 1, wiping content away L->R      */
/*                    (revealing the banner background behind it).      */
/*   [content swapped at the far edge, fully hidden]                   */
/*   Pass 2 (reveal): --nmpb-beam 1 -> 0, bringing the new content      */
/*                    back R->L.                                        */
/* Each content element also carries --nmpb-ox / --nmpb-ew (its left    */
/* offset + width as a fraction of the banner, set by banner.js) so    */
/* its own mask boundary is in the SAME banner coordinate as the beam. */
/* ------------------------------------------------------------------ */
@property --nmpb-beam {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}
/* Per-element (not inherited): left offset + width as a fraction of the banner. Registered
   as numbers so the mask's calc() division is well-typed. */
@property --nmpb-ox {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}
@property --nmpb-ew {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@keyframes nmpb-sweep-fwd  { from { --nmpb-beam: 0; } to { --nmpb-beam: 1; } }
@keyframes nmpb-sweep-back { from { --nmpb-beam: 1; } to { --nmpb-beam: 0; } }

.nmpb-banner .nmpb-banner__inner.is-lasering.nmpb-lz-erase {
	animation: nmpb-sweep-fwd var(--nmpb-scan-ms, 750ms) linear forwards;
}
.nmpb-banner .nmpb-banner__inner.is-lasering.nmpb-lz-reveal {
	animation: nmpb-sweep-back var(--nmpb-scan-ms, 750ms) linear forwards;
}

/* The title-box shrinks to the actual TEXT width (the title <p> itself is a flex item
   and is usually much wider). The mask + beam live inside this box, so the beam only
   scrubs across the text - not the empty width of the container. The <p>'s size is
   unchanged, so layout is unaffected. */
.nmpb-banner .nmpb-banner__title-box {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* The mask is applied to the inner text spans (not the whole title/button), so the
   laser beams can sit as un-masked siblings inside the box/button and stay visible. */
.nmpb-banner .nmpb-banner__title-text {
	display: block;
}
.nmpb-banner .nmpb-banner__btn-text {
	display: inline-block;
}

/* The wipe. While the laser runs (.nmpb-lz-active) the title text, the whole button and
   the image are masked: transparent (cleared -> the banner background shows through) to
   the LEFT of the beam, solid to the RIGHT. The boundary is the beam's banner position
   mapped into each element's own box via --nmpb-ox / --nmpb-ew, so all three clear exactly
   as the single beam passes. The same formula runs both ways: pass 1 (beam 0->1) hides
   everything; pass 2 (beam 1->0) brings the swapped content back. The +6px is a soft edge. */
.nmpb-banner .nmpb-banner__inner.nmpb-lz-active .nmpb-banner__title-text,
.nmpb-banner .nmpb-banner__inner.nmpb-lz-active .nmpb-banner__btn,
.nmpb-banner .nmpb-banner__inner.nmpb-lz-active .nmpb-banner__img {
	-webkit-mask-image: linear-gradient(90deg,
		transparent 0,
		transparent calc((var(--nmpb-beam) - var(--nmpb-ox, 0)) / var(--nmpb-ew, 1) * 100%),
		#000 calc((var(--nmpb-beam) - var(--nmpb-ox, 0)) / var(--nmpb-ew, 1) * 100% + 6px));
	        mask-image: linear-gradient(90deg,
		transparent 0,
		transparent calc((var(--nmpb-beam) - var(--nmpb-ox, 0)) / var(--nmpb-ew, 1) * 100%),
		#000 calc((var(--nmpb-beam) - var(--nmpb-ox, 0)) / var(--nmpb-ew, 1) * 100% + 6px));
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* The single sweeping beam: nearly as tall as the banner, thin, slightly tilted, red.
   It sits in .nmpb-banner__inner, so left: --nmpb-beam * 100% spans the whole banner. */
.nmpb-banner .nmpb-banner__laser-beam {
	position: absolute;
	top: 4%;    /* nearly as tall as the banner */
	bottom: 4%;
	left: calc(var(--nmpb-beam) * 100%);
	width: 3px;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	background: #f00f00; /* matches the .js-callout__dynamic-line "bright-red" */
	box-shadow:
		0 0 6px 2px rgba(240, 15, 0, 0.9),
		0 0 20px 7px rgba(240, 15, 0, 0.5);
	transform: translateX(-50%) rotate(9deg); /* centre on the position + a slight tilt */
	transform-origin: center;
}

/* A soft, ~1px light accent down ONE side of the beam (blended over a couple of px). It
   is a lighter warm tone - only mild contrast with the red - so the beam stays visible
   even while crossing the red button, without looking like a hard white edge. */
.nmpb-banner .nmpb-banner__laser-beam::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -1px; /* one side only */
	width: 1px;
	background: rgba(255, 190, 165, 0.9);
	box-shadow: 0 0 2px 0.5px rgba(255, 205, 185, 0.55);
	filter: blur(0.5px); /* blend across ~2px */
	pointer-events: none;
}

.nmpb-banner .nmpb-banner__inner.nmpb-lz-active .nmpb-banner__laser-beam {
	opacity: 1;
}

/* Sparks thrown off the beam. banner.js drops these at the beam's position with a random
   fly-off vector (set as CSS vars) and lets the transition carry + fade them out. */
.nmpb-banner .nmpb-banner__spark {
	position: absolute;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: #f00f00; /* same bright-red as the beam */
	box-shadow: 0 0 6px 2px rgba(240, 15, 0, 0.85);
	pointer-events: none;
	z-index: 6;
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: transform 0.45s cubic-bezier(0.12, 0.8, 0.3, 1), opacity 0.45s ease-out;
}

.nmpb-banner .nmpb-banner__spark.is-flying {
	transform: translate(var(--nmpb-spark-x, 0), var(--nmpb-spark-y, 0)) scale(0.3);
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nmpb-banner .nmpb-banner__spark {
		display: none;
	}
}

/* Reduced motion: no laser scan (banner.js also swaps instantly instead). */
@media (prefers-reduced-motion: reduce) {
	.nmpb-banner .nmpb-banner__inner.is-lasering {
		animation: none;
	}
	.nmpb-banner .nmpb-banner__laser-beam {
		display: none;
	}
}

.nmpb-banner.nmpb-banner--ready {
	display: block;
}

.nmpb-banner .nmpb-banner__inner {
	position: relative;
	overflow: hidden;
	min-height: 200px;
	background: linear-gradient(90deg, #0e0e0e 0%, #2b2b2b 100%);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 0 32px;
	box-sizing: border-box;
}

.nmpb-banner .nmpb-banner__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.38;
	pointer-events: none;
}

/* Desktop: the text wrapper is transparent - title and button lay out directly in the row. */
.nmpb-banner .nmpb-banner__text {
	display: contents;
}

.nmpb-banner .nmpb-banner__title {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: 'Orbitron', sans-serif;
	font-weight: 500;
	font-size: var(--nmpb-title-size, 40px);
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-wrap: balance;
	transition: opacity 0.4s ease; /* slide cross-fade (see banner.js) */
}

.nmpb-banner .nmpb-banner__actions {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	margin-left: auto; /* desktop: push the button to the far right (past the image) */
	display: flex;
	align-items: center;
}

.nmpb-banner .nmpb-banner__btn {
	position: relative; /* anchor for the laser beam that sits inside it */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 14px 32px;
	background: #f00f00;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: var(--nmpb-btn-size, 16px);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: background 0.2s ease, opacity 0.4s ease; /* opacity = slide cross-fade */
}

.nmpb-banner .nmpb-banner__btn:hover,
.nmpb-banner .nmpb-banner__btn:focus {
	background: #cc0c00;
	color: #fff;
	text-decoration: none;
}

/* Reduced motion: disable the cross-fade (banner.js also swaps instantly). */
@media (prefers-reduced-motion: reduce) {
	.nmpb-banner .nmpb-banner__title,
	.nmpb-banner .nmpb-banner__btn {
		transition: background 0.2s ease;
	}
}

/* Machine image - absolute so it never steals width from the title. */
/* Desktop: right of center, ~40% bleeds off the bottom (clipped by the banner). */
.nmpb-banner .nmpb-banner__media {
	position: absolute;
	z-index: 1;
	right: 22%;
	top: -30px; /* raise the image so less of the bottom is cut off */
	height: 167%;
	width: auto;
	pointer-events: none;
	transition: opacity 0.4s ease; /* slide cross-fade when the image changes per slide */
}

.nmpb-banner .nmpb-banner__media img,
.nmpb-banner .nmpb-banner__img {
	display: block;
	height: 100%;
	width: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* Desktop >=1248px: give the title/button horizontal edge-margins at least as big as
   their vertical gap (the button sits ~76px from the top/bottom of the 200px banner),
   so nothing looks jammed against the left/right edges. */
@media (min-width: 1248px) {
	.nmpb-banner .nmpb-banner__inner {
		padding-left: 76px;
		padding-right: 76px;
	}
}

/* Desktop 992-1503px: the content column is narrower (1184), so cap the title width to
   force it onto ~2 lines instead of one long line overlapping the image.
   At >=1504px the column is 1440 and the one-line title fits, so no cap there. */
@media (min-width: 992px) and (max-width: 1503px) {
	.nmpb-banner .nmpb-banner__title {
		max-width: 46%;
	}
}

/* Desktop 992-1247px: nudge the image left ~30px so the button no longer overlaps it. */
@media (min-width: 992px) and (max-width: 1247px) {
	.nmpb-banner .nmpb-banner__media {
		right: calc(22% + 30px);
	}
}

/* Desktop 1248-1503px: move the image so it sits between the text and the button. */
@media (min-width: 1248px) and (max-width: 1503px) {
	.nmpb-banner .nmpb-banner__media {
		right: calc(34% - 25px);
	}
}

/* Per-slide, per-breakpoint image nudge. A slide's "image CSS" field is inline (no media
   queries allowed), so instead it can set these variables and the transform is applied at
   the matching band. --nmpb-img-tx-<band> = horizontal, --nmpb-img-ty-<band> = vertical.
   The bands are contiguous and match the plugin's own breakpoints:
     xl   >= 1504px
     lg   1248-1503px
     md   992-1247px
     sm   737-991px
     xs   561-736px
     xxs  451-560px
     mini <= 450px
   Unset => translate(0,0) => no movement, so untouched slides/bands are unaffected. */
@media (min-width: 1504px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-xl, 0), var(--nmpb-img-ty-xl, 0)); }
}
@media (min-width: 1248px) and (max-width: 1503px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-lg, 0), var(--nmpb-img-ty-lg, 0)); }
}
@media (min-width: 992px) and (max-width: 1247px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-md, 0), var(--nmpb-img-ty-md, 0)); }
}
@media (min-width: 737px) and (max-width: 991px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-sm, 0), var(--nmpb-img-ty-sm, 0)); }
}
@media (min-width: 561px) and (max-width: 736px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-xs, 0), var(--nmpb-img-ty-xs, 0)); }
}
@media (min-width: 451px) and (max-width: 560px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-xxs, 0), var(--nmpb-img-ty-xxs, 0)); }
}
@media (max-width: 450px) {
	.nmpb-banner .nmpb-banner__img { transform: translate(var(--nmpb-img-tx-mini, 0), var(--nmpb-img-ty-mini, 0)); }
}

/* Mobile / tablet: title over button (left), image full-height on the right (cut off), with padding. */
@media (max-width: 991px) {
	.nmpb-banner {
		padding-bottom: 8rem;
	}

	.nmpb-banner .nmpb-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 20px 24px;
		padding-right: 44%; /* reserve room for the image on the right */
		min-height: 200px;
	}

	/* Title + button stack on the left. banner.js sizes the button to the title's widest line. */
	.nmpb-banner .nmpb-banner__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		max-width: 100%;
		position: relative; /* anchor for the mobile text/button laser beam */
	}

	.nmpb-banner .nmpb-banner__actions {
		margin-left: 0; /* mobile: keep the button left-aligned under the title */
	}

	.nmpb-banner .nmpb-banner__title {
		font-size: var(--nmpb-title-size, 40px);
	}

	/* Image ~15% larger (bleeds slightly past top/bottom), cut off a little on the right. */
	.nmpb-banner .nmpb-banner__media {
		right: -20px;
		top: -8px;
		bottom: -8px;
		height: auto;
	}
}

/* Small screens (<=736px): slightly smaller title, let it use more width (overlapping the image). */
@media (max-width: 736px) {
	.nmpb-banner .nmpb-banner__inner {
		padding-right: 24%;
	}

	.nmpb-banner .nmpb-banner__title {
		font-size: calc(var(--nmpb-title-size, 40px) * 0.85);
	}
}

/* Very small screens (<=560px): smaller title again, push the image further off the right. */
@media (max-width: 560px) {
	.nmpb-banner .nmpb-banner__title {
		font-size: calc(var(--nmpb-title-size, 40px) * 0.7);
	}

	.nmpb-banner .nmpb-banner__media {
		right: -50px;
	}
}

/* Narrow phones (<=450px): tighter left padding and a smaller title (~26px). */
@media (max-width: 450px) {
	.nmpb-banner .nmpb-banner__inner {
		padding-left: 1rem;
	}

	.nmpb-banner .nmpb-banner__title {
		font-size: calc(var(--nmpb-title-size, 40px) * 0.65);
	}
}