/* ─────────────────────────────────────────────────────────────
   GTD Desco — page-load entrance.

   WHAT WAS WRONG

   `.fadeInUp-animation` — `animation: 1.5s fadeInUp`, from
   `translateY(100%)` and `opacity: 0` — was on 58 elements
   across 32 templates, and it was wrong in four separate ways.

   1. It ran ON LOAD, everywhere on the page. A row 5,000px down
      played its entrance while the visitor was still looking at
      the hero, and had long finished by the time they scrolled
      to it. The animation was, for most of its uses, invisible.

   2. `translateY(100%)` is a percentage of the ELEMENT's own
      height, not a distance. On a tall row that is a slide of
      six or seven hundred pixels — an enormous travel that reads
      as the page falling into place rather than arriving.

   3. 1.5s is roughly three times an entrance. Long enough that
      on a fast connection the visitor is waiting for the page to
      finish being a page.

   4. No easing was named, so it took the CSS default `ease` —
      which accelerates INTO the end of the move. An entrance
      should decelerate into rest.

   WHAT THIS DOES

   One class, `.gtd-enter`, on exactly one wrapper per template:
   the block that is genuinely in the first viewport — the video
   banner's inner block on pages that have one, and the first
   content row on pages that do not. Nothing below the fold
   animates on load any more; the blocks further down have their
   own scroll-driven entrances (P5c–P5i), which is the correct
   trigger for content you have to travel to.

   Inside that one wrapper the entrance is choreographed BY ROLE
   rather than by DOM order, which is what makes it read as a
   page arriving rather than a list of elements appearing:

     image     0ms    950ms   settles out of a 4.5% scale
     heading   60ms   780ms   rises 26px
     lede      170ms  620ms   rises 16px
     2nd para  230ms
     buttons   300ms  560ms   rises 14px

   Each also releases a small blur, so the page reads as coming
   into focus rather than sliding — and the blur is what lets the
   travel stay short. 26px and a blur release carries further
   than 100px and no blur.

   The homepage is deliberately absent: includes/hero_block.php
   has its own `gtd-rise` choreography in css/hero.css, and this
   file matches its ease and its feel rather than competing with
   it or running on top of it.
   ───────────────────────────────────────────────────────────── */

/*
 * Both zone classes carry the token. .gtd-enter-plate is not inside a
 * .gtd-enter, so it does not inherit it — and an `animation` shorthand holding
 * an undefined var() is invalid at computed-value time, which silently
 * resolves the whole declaration to `animation: none`. That is exactly how the
 * plate ended up not animating at all on the first pass.
 */
.gtd-enter,
.gtd-enter-plate {
	/* The site's ease everywhere else: exponential out, so the move
	   decelerates into rest instead of arriving at speed. */
	--e-ease: cubic-bezier(.16, 1, .3, 1);
}

/*
 * Everything lives inside the no-preference query, so with reduced motion
 * requested there is no pre-state to undo — the page simply renders. Nothing
 * here hides content that an unapplied rule would have to reveal.
 */
@media (prefers-reduced-motion: no-preference) {

	@keyframes gtdEnterHead {
		from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); }
		to   { opacity: 1; transform: none;                    filter: blur(0); }
	}

	@keyframes gtdEnterText {
		from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(4px); }
		to   { opacity: 1; transform: none;                    filter: blur(0); }
	}

	@keyframes gtdEnterImage {
		from { opacity: 0; transform: scale(1.045); filter: blur(10px); }
		to   { opacity: 1; transform: none;         filter: blur(0); }
	}

	/*
	 * `backwards`, not `both`. `both` would leave `filter: blur(0)` on the
	 * element for the life of the page, and a filter — even a zero one — makes
	 * the element a containing block for absolutely positioned descendants and
	 * holds a compositing layer. With `backwards` the from-state applies during
	 * the delay and the element goes back to its own styles the moment it ends.
	 */

	/* ── the picture ──────────────────────────────────────────
	   First, and slowest. A settle rather than a slide: a
	   photograph that slides has been moved, one that settles has
	   been focused.
	   ───────────────────────────────────────────────────────── */
	.gtd-enter :is(img, picture) {
		animation: gtdEnterImage .95s var(--e-ease) backwards;
	}

	/* The banner's video is the page's ground, not an element arriving on it. */
	.gtd-enter video { animation: none; }

	/* ── the heading ──────────────────────────────────────────
	   The most travel of anything here, because it is the thing
	   the eye lands on and the only one that can carry it.
	   ───────────────────────────────────────────────────────── */
	.gtd-enter :is(h1, h2) {
		animation: gtdEnterHead .78s var(--e-ease) .06s backwards;
	}

	/* ── the text ─────────────────────────────────────────────
	   A second paragraph comes in behind the first, so the copy
	   reads as being set rather than switched on.
	   ───────────────────────────────────────────────────────── */
	.gtd-enter :is(p, blockquote) {
		animation: gtdEnterText .62s var(--e-ease) .17s backwards;
	}

	.gtd-enter p + p {
		animation-delay: .23s;
	}

	/*
	 * Lists are deliberately not in that set. An above-the-fold intro almost
	 * never leads with one, but a tall wrapper that reaches past the fold very
	 * often ENDS in one — the contact page's four address lists were animating
	 * 600px below the fold, which is the exact fault this file exists to fix.
	 */

	/*
	 * Nothing inside a form. A form is a control surface, not an entrance: its
	 * labels and help text arriving one after another reads as the page still
	 * loading, and on a long form most of them are below the fold anyway.
	 */
	.gtd-enter :is(form, .wpforms-container) :is(p, h1, h2, img, a) {
		animation: none;
	}

	/* ── the control ──────────────────────────────────────────
	   Last, and the shortest move. The button is the one thing
	   here that is waiting to be used, so it should be still
	   soonest after it appears.
	   ───────────────────────────────────────────────────────── */
	.gtd-enter :is(
		.info-button,
		.red-info-button,
		.green-info-button,
		.geoweights-info-button
	) {
		animation: gtdEnterText .56s var(--e-ease) .3s backwards;
	}

	/* The hero's eyebrow rule and any small mark above a heading lead the whole
	   sequence — it is the first stroke on the page. */
	.gtd-enter :is(.gtd-close__rule, .drill-rig-title-rule) {
		animation: gtdEnterText .5s var(--e-ease) backwards;
	}

	/* ── the plate ────────────────────────────────────────────
	   Some banners are an empty div with a background-image —
	   #our-story-banner is one — so there is no child to animate
	   and the block itself is the picture. It gets the image
	   settle directly.

	   Safe only because the element is empty: an animation puts a
	   filter on it, and a filter makes an element the containing
	   block for absolutely positioned descendants. This one has
	   none, which is why the ordinary .gtd-enter wrapper is never
	   animated itself.
	   ───────────────────────────────────────────────────────── */
	.gtd-enter-plate {
		animation: gtdEnterImage .95s var(--e-ease) backwards;
	}
}