/* ─────────────────────────────────────────────────────────────
   GTD Desco — the page banner.

   WHAT WAS WRONG

   Three templates each hard-coded the same eight lines: a
   full-viewport div holding an autoplaying, looping 16–21MB MP4
   with no poster, no preload hint and no reduced-motion path,
   and a single <h1> floating over whatever frame the footage
   happened to be on. On the Driller Focused Support page that
   <h1> was EMPTY — the page had no heading at all.

   Copy sat directly on moving pictures, so its contrast changed
   from frame to frame.

   WHAT THIS DOES

   A poster frame pulled from the footage itself paints on the
   first pass and the video fades in over it once it can play, so
   the banner is never a black rectangle. The type sits at the
   container's left edge over a scrim that is heaviest exactly
   where the words are and clears away from the picture.
   ───────────────────────────────────────────────────────────── */

.gtd-banner {
	--b-red:   var(--gtd-red, #c60000);
	--b-ink:   #0d1414;
	--b-ease:  cubic-bezier(.16, 1, .3, 1);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(64vh, 660px);
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--b-ink);
	overflow: clip;

	/* Full bleed out of whatever it is written inside. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.gtd-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.gtd-banner__poster,
.gtd-banner__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/*
 * The video starts invisible and is faded up by js/banner.js the moment it can
 * actually play. Without this the browser paints one black frame between the
 * poster and the first video frame, which is the flicker the old banner had.
 */
.gtd-banner__video {
	opacity: 0;
	transition: opacity .9s var(--b-ease);
}

.gtd-banner__video.is-playing { opacity: 1; }

/*
 * The scrim is heaviest at the bottom left, where the type is, and clears
 * before it reaches the top right, where the picture is. A flat wash over the
 * whole frame — which is what the old banner used — dims the footage evenly
 * and still leaves the type at the mercy of whatever is behind it.
 */
.gtd-banner__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(13, 20, 20, .92) 0%, rgba(13, 20, 20, .55) 38%, rgba(13, 20, 20, .12) 72%, rgba(13, 20, 20, 0) 100%),
		linear-gradient(to right, rgba(13, 20, 20, .72) 0%, rgba(13, 20, 20, .3) 46%, rgba(13, 20, 20, 0) 80%);
}

.gtd-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.gtd-banner--centre .gtd-banner__inner { text-align: center; }
.gtd-banner--centre .gtd-banner__rule   { margin-inline: auto; }
.gtd-banner--centre .gtd-banner__lede   { margin-inline: auto; }

.gtd-banner__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--b-red);
	transform-origin: left;
}

.gtd-banner__title {
	margin: 0;
	/* !important answers css/type.css's `h1 { … !important }`. */
	font-size: clamp(2.4rem, 1.3rem + 3.6vw, 6rem) !important;
	font-weight: 900;
	line-height: .88;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	max-width: 18ch;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.gtd-banner--centre .gtd-banner__title { max-width: 22ch; margin-inline: auto; }

.gtd-banner__lede {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	font-size: clamp(1.02rem, .95rem + .38vw, 1.3rem) !important;
	line-height: 1.55;
	max-width: 52ch;
	color: rgba(255, 255, 255, .84) !important;
}

.gtd-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.gtd-banner--centre .gtd-banner__actions { justify-content: center; }

/* The entrance: the still is already there, so only the type arrives. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes gtdBannerRise {
		from { opacity: 0; transform: translate3d(0, 26px, 0); }
		to   { opacity: 1; transform: none; }
	}
	.gtd-banner__rule    { animation: gtdBannerRise .7s var(--b-ease) backwards; }
	.gtd-banner__title   { animation: gtdBannerRise .8s var(--b-ease) .06s backwards; }
	.gtd-banner__lede    { animation: gtdBannerRise .8s var(--b-ease) .16s backwards; }
	.gtd-banner__actions { animation: gtdBannerRise .8s var(--b-ease) .26s backwards; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-banner__video { display: none; }
}

@media (max-width: 900px) {
	.gtd-banner {
		min-height: min(58vh, 460px);
		align-items: flex-end;
	}
	.gtd-banner__title { max-width: 100%; }
	.gtd-banner__scrim {
		background: linear-gradient(to top, rgba(13, 20, 20, .94) 0%, rgba(13, 20, 20, .62) 45%, rgba(13, 20, 20, .2) 80%, rgba(13, 20, 20, .05) 100%);
	}
}