/* ─────────────────────────────────────────────────────────────
   GTD Desco — CTA panels.

   Three blocks: the factory tour, driller focused support, and
   our story.

   WHAT WAS WRONG

   The same 650px box, copied three times. The photograph as a
   background-image with a flat `rgba(0, 0, 0, .6)` wash across
   the whole of it — a 60% black sheet over the one asset each
   block exists to show — and the copy absolutely positioned in a
   corner under 90 to 120px of padding, so two thirds of every
   block was empty space and the button floated in the middle of
   a greyed photograph with nothing beneath it.

   All three carried a 6px top border in #217d5a, a green the
   site uses nowhere else, and all three shared the wrapper id
   `#factory-tour-outter` — which is invalid HTML and was the
   direct cause of two real bugs.

   WHAT THIS DOES

   A solid panel holds the invitation, hard against a clean
   photograph. Nothing is dimmed, because the type is on the
   panel rather than on the picture.

   THE SEQUENCE

   These three run consecutively on eleven templates, so three
   identical slabs would read as wallpaper. They share one
   grammar and differ in weight:

     Factory tour     red panel,  left,  44 / 56
     Driller support  ink panel,  right, 40 / 60
     Our story        ink panel,  left,  48 / 52

   The red one leads — it is the invitation — and the two ink
   ones follow as a pair, which is a hierarchy rather than a
   checkerboard. The ink panels carry a 6px red seam on the edge
   that meets the photograph, so the brand red is still the thing
   dividing panel from picture without a third red slab.

   THE MOMENT

   One element does the reveal and the layout. A panel-coloured
   curtain covers the block and leaves towards the photograph as
   it is scrolled into view, so the picture is uncovered and the
   panel is what the curtain leaves behind. It travels in the
   direction the panel faces, so the right-hand panel sweeps the
   other way. Transform only, scroll-driven, no JavaScript.
   ───────────────────────────────────────────────────────────── */

/*
 * `#factory-tour-outter` is the factory tour's id alone now — support and our
 * story have their own, and includes/looper-download-block.php, the fourth
 * user, is not included by any template.
 *
 * height and border-top carry !important because sass/style.css's mobile block
 * sets BOTH with !important of its own —
 *
 *     #factory-tour-outter { height: 420px !important;
 *                            border-top: 4px solid #217d5a !important; }
 *
 * and !important beats specificity outright, so (1,1,0) here lost to (1,0,0)
 * there. The block's own content is 550px on a phone, so a forced 420px with
 * `overflow: hidden` was cutting the CTA off the bottom entirely.
 */
#factory-tour-outter.gtd-cta {
	height: auto !important;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	margin-top: var(--cta-gap) !important;   /* answers `margin-top: 50px !important` */
	margin-bottom: var(--cta-gap);
	border-top: 0 !important;                /* the green slab */
	padding: 0;

	/*
	 * And the reason the curtain and the panel never moved. sass/style.css
	 * line 1858 sets `#factory-tour-outter { overflow: hidden }` at id
	 * strength, which beat `.gtd-cta { overflow: clip }` below outright.
	 * `overflow: hidden` makes the section a scroll container, so the
	 * curtain's and the panel's `animation-timeline: view()` measured
	 * against a box that never scrolls and froze at a constant progress.
	 * Restated here at (1,1,0) so the clip wins.
	 */
	overflow: clip;
}

/* ── the component ────────────────────────────────────────── */

.gtd-cta {
	--cta-red:   var(--gtd-red, #c60000);
	--cta-ink:   var(--gtd-ink, #101d1d);
	--cta-gap:   120px;
	--cta-ease:  cubic-bezier(.16, 1, .3, 1);

	/* Overridden per instance below. */
	--cta-panel: 44fr;
	--cta-photo: 56fr;
	--cta-bg:    var(--cta-red);
	--cta-seam:  0px;

	position: relative;
	isolation: isolate;
	overflow: clip;

	display: grid;
	align-items: stretch;

	min-height: clamp(30rem, 46vw, 44rem);
	background: var(--cta-ink);   /* the ground before the photograph arrives */
}

/* ── side ─────────────────────────────────────────────────────
   Which column the panel takes, which way the curtain leaves,
   and which edge the seam sits on. Three properties, one switch.
   ───────────────────────────────────────────────────────────── */

.gtd-cta--left {
	grid-template-columns: minmax(0, var(--cta-panel)) minmax(0, var(--cta-photo));
	--cta-col: 1;
	--cta-out: 101%;
	--cta-seam-shadow: inset calc(-1 * var(--cta-seam)) 0 0 0 var(--cta-red);
}

.gtd-cta--right {
	grid-template-columns: minmax(0, var(--cta-photo)) minmax(0, var(--cta-panel));
	--cta-col: 2;
	--cta-out: -101%;
	--cta-seam-shadow: inset var(--cta-seam) 0 0 0 var(--cta-red);
}

/* ── tone ─────────────────────────────────────────────────── */

.gtd-cta--red { --cta-bg: var(--cta-red); --cta-seam: 0px; }
.gtd-cta--ink { --cta-bg: var(--cta-ink); --cta-seam: 6px; }

/* ── per-instance weight ──────────────────────────────────────
   The splits are not arbitrary. Support gets the photograph its
   largest share because the picture is two drillers on a site,
   and people are the whole claim the block is making.
   ───────────────────────────────────────────────────────────── */

#factory-tour-outter.gtd-cta { --cta-panel: 44fr; --cta-photo: 56fr; }
#support-cta                 { --cta-panel: 40fr; --cta-photo: 60fr; }
#our-story-cta               { --cta-panel: 42fr; --cta-photo: 58fr; }

/* The two blocks with no legacy id rules still need their own spacing. */
#support-cta,
#our-story-cta {
	margin-top: var(--cta-gap);
	margin-bottom: var(--cta-gap);
}

/* ── the photograph ───────────────────────────────────────────
   Behind everything and across the whole block, not just its own
   column: the panel sits ON the picture rather than beside a
   cropped one, so the scene runs the full width and the panel is
   an object placed on it.
   ───────────────────────────────────────────────────────────── */

.gtd-cta__figure {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.gtd-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	max-width: none;
	display: block;
	transition: transform 1.2s var(--cta-ease);
}

.gtd-cta:hover .gtd-cta__img { transform: scale(1.035); }

/* ── the panel ────────────────────────────────────────────── */

.gtd-cta__panel {
	position: relative;
	z-index: 2;
	grid-column: var(--cta-col);

	background: var(--cta-bg);
	color: #fff;
	box-shadow: var(--cta-seam-shadow);

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	padding: clamp(2rem, 4.5vw, 4.5rem);
}

.gtd-cta__title {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(2.1rem, 1.2rem + 2.8vw, 4.5rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

/* The rule the rig cards, the upsell panels and the quote banner all use. */
.gtd-cta__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.1rem, 2.2vw, 1.75rem);
	background: #fff;
	transform-origin: left;
	transition: transform .7s var(--cta-ease);
}

/* On ink the rule can be the brand red; on red it has to be white. */
.gtd-cta--ink .gtd-cta__rule { background: var(--cta-red); }

.gtd-cta:hover .gtd-cta__rule { transform: scaleX(1.7); }

.gtd-cta__text,
.gtd-cta__text p {
	margin: 0;
	/*
	 * 42ch was set against the narrowest of the three panels and left the other
	 * two with a column of dead ink to the right of every line — 307px of it on
	 * our story. The measure has to fill the panel it is in, and at 18px this is
	 * still well inside a comfortable line length.
	 */
	max-width: min(52ch, 100%);
	/* !important answers css/type.css's blanket `p { … !important }`. */
	font-size: clamp(.95rem, .9rem + .3vw, 1.125rem) !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9) !important;
}

.gtd-cta__text p + p { margin-top: .7em; }

.gtd-cta__cta {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * On red, .info-button ships a white face with red type, which is exactly
 * right — but its hover fills red on red, so it goes to the brand ink instead.
 */
.gtd-cta--red:hover .gtd-cta__cta,
.gtd-cta--red .gtd-cta__cta:hover,
.gtd-cta--red .gtd-cta__cta:focus-visible {
	background-color: var(--cta-ink);
	border-color: var(--cta-ink);
	color: #fff;
}

/*
 * On ink, .red-info-button's own red fill and lift-on-hover are already the
 * right behaviour, so only the lift is added here.
 */
.gtd-cta:hover .gtd-cta__cta,
.gtd-cta__cta:hover,
.gtd-cta__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.gtd-cta__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ── the reveal ───────────────────────────────────────────────
   Scroll-driven, behind @supports, no JavaScript. The timeline is
   on the curtain — never on the element that contains the
   photograph, per the P5e/P5g lesson.

   FILL MODE IS `forwards`, NOT `both`, AND THAT IS LOAD-BEARING.

   `both` fills backwards as well: before the timeline reaches its
   range, the element is painted with the FIRST keyframe. For every
   reveal here that first keyframe is `opacity: 0`. On a browser
   that accepts `animation-timeline: view()` and then never
   advances the timeline — iOS, on this site — the animation sits
   in its before-phase for ever and the fill holds the content at
   zero. The panel's ground is not animated, so what renders is an
   empty coloured box under a photograph. That was the bug, on the
   CTA panels, the closing ask, the claim band, news, downloads,
   equipment and contact: thirteen stylesheets, fifty-five fills.

   `forwards` has no backwards fill. Before the range — and on a
   browser where the range never arrives — the element is painted
   from its own base styles: opacity 1, no transform, exactly as
   the rule above declares it. The reveal becomes an enhancement
   that can fail to nothing, which is what it should always have
   been.

   The cost where it does work is one frame's discontinuity as the
   range opens, at the very bottom edge of the viewport. Nobody
   has ever seen it.
   ───────────────────────────────────────────────────────────── */

.gtd-cta__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--cta-bg);
	pointer-events: none;
	/* With no scroll timeline available it is simply never in the way. */
	transform: translateX(var(--cta-out));
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdCtaReveal {
			from { transform: translateX(0); }
			to   { transform: translateX(var(--cta-out)); }
		}

		.gtd-cta__curtain {
			animation: gtdCtaReveal linear forwards;
			animation-timeline: view();
			animation-range: entry 10% entry 92%;
		}

		/* The panel arrives from its own side, just behind the curtain, so it
		   reads as the thing the curtain left rather than as a separate
		   entrance of its own. */
		@keyframes gtdCtaPanelIn {
			from { opacity: 0; transform: translateX(calc(var(--cta-out) / -4.2)); }
			to   { opacity: 1; transform: none; }
		}

		.gtd-cta__panel {
			animation: gtdCtaPanelIn linear forwards;
			animation-timeline: view();
			animation-range: entry 30% cover 4%;
		}
	}
}

/* ── small screens ────────────────────────────────────────────
   Stacked: a band of photograph, then the panel under it. The
   panel over a picture at this width would need a scrim, and a
   scrim is the thing this redesign exists to remove.

   The seam turns with the layout: it divides panel from picture,
   so once the picture is above it, it is a top edge.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.gtd-cta {
		--cta-gap: clamp(3.5rem, 12vw, 7.5rem);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: clamp(12rem, 40vw, 18rem) auto;
		min-height: 0;
	}

	.gtd-cta__figure {
		position: relative;
		grid-row: 1;
		inset: auto;
	}

	.gtd-cta__panel {
		grid-column: 1;
		grid-row: 2;
		padding: clamp(1.75rem, 7vw, 2.5rem);
		box-shadow: inset 0 var(--cta-seam) 0 0 var(--cta-red);
	}

	/* A curtain that leaves sideways across a stacked block wipes the panel
	   off its own photograph, which reads as a glitch. It lifts instead. */
	.gtd-cta__curtain { transform: translateY(-101%); }

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			@keyframes gtdCtaRevealUp {
				from { transform: translateY(0); }
				to   { transform: translateY(-101%); }
			}

			.gtd-cta__curtain { animation-name: gtdCtaRevealUp; }

			@keyframes gtdCtaPanelUp {
				from { opacity: 0; transform: translateY(20px); }
				to   { opacity: 1; transform: none; }
			}

			.gtd-cta__panel { animation-name: gtdCtaPanelUp; }
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-cta__img,
	.gtd-cta__rule,
	.gtd-cta__cta { transition: none !important; }

	.gtd-cta__curtain {
		animation: none !important;
		transform: translateX(var(--cta-out));
	}

	.gtd-cta__panel {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ═════════════════════════════════════════════════════════════
   NO REVEAL ON A PHONE. AT ALL.

   The curtain is an opaque slab at inset:0, z-index 3, in the
   panel's own colour, parked off-frame by a transform and slid
   away by a scroll-driven animation. The panel behind it fades
   and slides in on the same timeline. Both are choreography for
   the wide, side-by-side layout, where a block of colour wiping
   off a photograph is the point.

   Stacked on a phone the wipe is barely legible — and it is the
   one thing on this site that can hide content outright. If the
   curtain's transform does not apply, for any reason, it covers
   the block completely: an empty coloured slab where a panel of
   text should be. That is what iOS was showing, and it is not a
   risk worth carrying for an entrance nobody is watching for on
   a 390px screen.

   So below the stacked breakpoint the curtain is removed from
   the box tree and the panel is pinned to its resting state.
   Nothing to stall, nothing to fill, nothing to cover. Declared
   last in the file and with !important so it wins over the
   @supports block above regardless of source order.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.gtd-cta__curtain {
		display: none !important;
		animation: none !important;
	}

	.gtd-cta__panel {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* ── and the entrance, rebuilt ────────────────────────────
	   The panel still arrives. What it does NOT do is start from
	   a hidden state.

	   Nothing here hides anything until .gtd-in is on the panel,
	   and .gtd-in is only ever added by script. So the resting
	   state of this markup — no script, script that errored,
	   script that ran but never reached this panel — is the text
	   on the screen. The only thing a failure can cost is the
	   animation.

	   That is the opposite of what was here before, where the
	   hidden state was the default and the reveal was the thing
	   that had to work. It is why the panels were empty on iOS.

	   Time-based keyframes, not a scroll timeline: once the class
	   lands the animation runs to completion on its own clock.
	   Nothing to stall, no fill holding frame zero, no @supports.

	   Choreographed by role the way .gtd-enter does it — title,
	   then the rule DRAWING from the left because that is the
	   gesture every other rule on this site makes, then the copy,
	   then the control. Four beats of roughly 80ms on the theme's
	   own exponential ease-out, so the panel assembles rather
	   than appears.

	   The button animates opacity only: a transform on it would
	   out-specify its own hover lift and quietly kill it.
	   ───────────────────────────────────────────────────────── */

	@keyframes gtdCtaPhoneRise {
		from { opacity: 0; transform: translateY(15px); }
		to   { opacity: 1; transform: none; }
	}
	@keyframes gtdCtaPhoneDraw {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
	@keyframes gtdCtaPhoneFade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.gtd-cta__panel.gtd-in > .gtd-cta__title {
		animation: gtdCtaPhoneRise .6s var(--cta-ease) both;
	}
	.gtd-cta__panel.gtd-in > .gtd-cta__rule {
		transform-origin: left center;
		animation: gtdCtaPhoneDraw .5s var(--cta-ease) .09s both;
	}
	.gtd-cta__panel.gtd-in > .gtd-cta__text {
		animation: gtdCtaPhoneRise .6s var(--cta-ease) .17s both;
	}
	.gtd-cta__panel.gtd-in > .gtd-cta__cta {
		animation: gtdCtaPhoneFade .5s var(--cta-ease) .25s both;
	}
}

/* Somebody who has asked for less motion gets the panel, not the assembly. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.gtd-cta__panel.gtd-in > * { animation: none !important; }
}