/* Footer reveal on scroll (quick 260716-kib) — Humaan-style: as the footer
   enters the viewport, .tb-reveal-content scales 1 → --tb-reveal-scale and its
   bottom corners round to --tb-reveal-radius, revealing the dark --footer-bg
   backdrop and the footer (normal flow) beneath it.

   Pure CSS — reuses the theme's native animation-timeline pipeline (see 03-03
   reveals in theme.css). Driven by the footer's own view-timeline, so it stays
   in sync with Lenis (which drives the real scroll position). Fully gated:
   reduced-motion / no scroll-timeline support / no footer → no effect. */

.tb-reveal-content {
	/* Tuning knobs (Task 3 checkpoint — Ben live-tunes these): */
	--tb-reveal-scale: 0.95;
	--tb-reveal-radius: 60px;
}

/* Pastel #72 — the whole scrubbed reveal is desktop-only now. Below 1024 the
   page flows normally and only the rounded bottom edge survives (see the
   static block at the end of this file). Adding the width test to the
   existing gate rather than a separate one keeps a single place where the
   effect is switched on. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	@supports (animation-timeline: view()) and (timeline-scope: --x) {

		/* Common ancestor of both the footer (defines the timeline) and the
		   content wrapper (consumes it). */
		#wrapper {
			timeline-scope: --tb-footer-reveal;
			/* Dark backdrop revealed around the shrinking card — only active
			   while the reveal runs (transparent at range start). */
			animation: tb-reveal-backdrop both;
			animation-timeline: --tb-footer-reveal;
			animation-range: entry 0% entry 100%;
		}

		/* The theme's legacy top scrim (theme.css .footer-outer-wrapper:before,
		   150px black fade) reads as a drop shadow separating the backdrop from
		   the pinned footer — with the reveal active the two must merge into
		   one continuous surface (Ben, r3). */
		.footer-outer-wrapper::before {
			display: none !important;
		}

		/* The footer publishes its scroll-into-view progress as the timeline. */
		.footer-outer-wrapper {
			view-timeline-name: --tb-footer-reveal;
			view-timeline-axis: block;
			/* Clip window for the counter-parallax: the shifted-up inner content
			   must only paint inside the footer's own box. */
			overflow: clip;
		}

		/* Counter-parallax: the inner content starts shifted up by its own
		   height and scrubs to 0 on the same timeline, so it appears pinned at
		   its final viewport position while the page content slides up off it.
		   100% = fully pinned illusion; lower values give a partial parallax. */
		.tb-footer-reveal-inner {
			--tb-reveal-parallax: 100%;
			/* Upward travel of the footer content across the reveal (Ben, r5 —
			   Humaan-style): 0 = footer fully pinned; 20vh = footer rises 20%
			   of the viewport while being revealed. */
			--tb-reveal-drift: 28vh;
			/* linear is required: the counter-translate must cancel the scroll
			   1:1 or the pinned content wobbles (default `ease` did). */
			animation: tb-reveal-parallax linear both;
			animation-timeline: --tb-footer-reveal;
			animation-range: entry 0% entry 100%;
		}

		.tb-reveal-content {
			/* Bottom origin glues the content's bottom edge to the footer seam:
			   scale(0.95) on a page thousands of px tall would otherwise lift
			   the bottom edge ~5%/2 of its height, exposing a backdrop band
			   between the content and the footer (Ben, r4). */
			transform-origin: center bottom;
			overflow: clip;           /* clip content's square bottom corners to the animated radius; `clip` (not `hidden`) keeps internal position:sticky working */
			animation: tb-reveal-shrink both;
			animation-timeline: --tb-footer-reveal;
			animation-range: entry 0% entry 100%;
		}
	}
}

@keyframes tb-reveal-shrink {
	from { transform: scale(1);                          border-radius: 0; }
	to   { transform: scale(var(--tb-reveal-scale, .95)); border-radius: 0 0 var(--tb-reveal-radius, 60px) var(--tb-reveal-radius, 60px); }
}

@keyframes tb-reveal-parallax {
	/* Adding the drift to the start offset means the counter-cancel is short
	   by exactly --tb-reveal-drift, which the footer makes up by rising that
	   distance across the reveal. */
	from { transform: translateY(calc(-1 * var(--tb-reveal-parallax, 100%) + var(--tb-reveal-drift, 0vh))); }
	to   { transform: translateY(0); }
}

@keyframes tb-reveal-backdrop {
	from { background-color: transparent; }
	1%,
	to   { background-color: var(--footer-bg, #200147); }
}

/* Mobile (constraint #8): smaller radius + gentler shrink so the effect scales
   sensibly at small viewports. */
@media (max-width: 767px) {
	.tb-reveal-content {
		--tb-reveal-scale: 0.965;
		--tb-reveal-radius: 32px;
	}
}


/* Pastel #72 — "keep the border radius for the bottom of the body, just have
   the html flow like normal". No timeline, no transform, no counter-parallax:
   the radius is a static property here. #wrapper takes the footer colour so
   the two corners reveal the footer surface rather than a slice of page
   background — with the reveal off, nothing else paints that area. */
@media (max-width: 1023.98px) {
	#wrapper {
		background-color: var(--footer-bg, #200147);
	}

	.tb-reveal-content {
		border-radius: 0 0 var(--tb-reveal-radius, 60px) var(--tb-reveal-radius, 60px);
		overflow: clip;   /* `clip`, not `hidden` — `hidden` would kill every internal position:sticky */
	}
}


/* ------------------------------------------------------- contact FAQ photo

   Chris, 260901: on the contact page the FAQ section IS the bottom section, so
   its photo should round off in lockstep with the page corners as the footer
   reveals. Scoped to .page-id-259 (contact) because no other page ends on the
   FAQ — a global rule would scrub the radius on a mid-page module that never
   reaches the footer seam.

   It consumes the SAME --tb-footer-reveal timeline and the SAME entry 0%/100%
   range as tb-reveal-shrink above, which is what "at the same rate" means: one
   timeline, one range, so the two radii are never a frame apart. The photo well
   already carries overflow:hidden, so the radius clips the drifting <img>.

   Only the gate is duplicated, not the effect — this sits outside the block
   above so it stays legible as a page-specific addition. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	@supports (animation-timeline: view()) and (timeline-scope: --x) {

		.page-id-259 .tbl-faq__media {
			/* Defaults to the page's own corner radius so the two match out of
			   the box; set it separately to tune the photo on its own. */
			--tbl-faq-reveal-radius: var(--tb-reveal-radius, 60px);
			/* No `linear` — tb-reveal-shrink above runs on the shorthand default
			   (ease), so a linear photo would only agree with the page corners at
			   the two endpoints and run behind it everywhere in between. */
			animation: tbl-faq-reveal-radius both;
			animation-timeline: --tb-footer-reveal;
			animation-range: entry 0% entry 100%;
		}

	}
}

@keyframes tbl-faq-reveal-radius {
	from { border-radius: 0; }
	to   { border-radius: var(--tbl-faq-reveal-radius, 60px); }
}