/* ==========================================================================
   Block: Landing Animation (bga/landing-animation)
   Scroll-driven intro sequence using GSAP ScrollTrigger.

   The section occupies 200vh so ScrollTrigger has room to scrub.
   The inner .bga-landing__pin is pinned for the scroll duration.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shared base styles (all variants)
   --------------------------------------------------------------------------- */

.bga-landing {
	position: relative;
	height: 300vh;
	overflow: visible;
}

.bga-landing__pin {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ── Background layers ─────────────────────────────────────────────────── */

.bga-landing__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--color-cream);
}

/* Orange colour rises from the bottom as user scrolls */
.bga-landing__orange {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: var(--color-orange);
}

/* ── Cloud layer ───────────────────────────────────────────────────────── */

.bga-landing__cloud {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0) translateZ(0);
	z-index: 1;
	opacity: 0.5;
}

.bga-landing__cloud-img {
	width: 90vw;
	max-width: 1100px;
	height: auto;
	mix-blend-mode: screen;
	display: block;
	filter: brightness(1.4) contrast(0.8);
}

/* ── Content (text) ────────────────────────────────────────────────────── */

.bga-landing__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 24px;
	opacity: 1;
	transform: none;
}

.bga-landing__logotype {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-regular);
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	color: var(--color-cream);
	margin-bottom: 24px;
}

.bga-landing__headline {
	font-family: var(--font-heading);
	/* 26 → 40px. Stepped down from --font-size-h2 so the headline sits inside
	   the cloud on two lines instead of three (BGA via Bryce, 12 Aug). */
	font-size: clamp(1.375rem, 2.4vw, 2rem);
	font-weight: var(--font-weight-regular);
	color: #fff;
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.3;
}

/* ── Scroll hint arrow ─────────────────────────────────────────────────── */

/* Same cue as .bga-hero__scroll-indicator (see blocks/hero.css) — frosted
   panel, same padding, same bounce rhythm — as asked for (Bryce, 3 Aug: "an
   arrow like the homepage hero image"). A real button, matching the hero cue in
   behaviour as well as looks, so that clicking it actually scrolls.

   INVERTED against the hero, deliberately. The hero's cue is white-on-
   translucent-white because it sits over a dark photograph. Here the cue sits
   low on bare parchment, well below the cloud, so the hero's exact colours
   render as a white arrow on cream — all but invisible. Same treatment, brown
   ink, so it actually reads. */
.bga-landing__scroll-hint {
	position: absolute;
	bottom: var(--sp-32);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: var(--color-brown);
	background: rgba(41, 19, 5, 0.05);
	border: 1px solid rgba(41, 19, 5, 0.2);
	padding: var(--sp-12);
	line-height: 0;
	cursor: pointer;
	/* Safari paints its own chrome on <button> without this. */
	-webkit-appearance: none;
	appearance: none;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 0;
	animation: bga-landing-bounce 2s ease-in-out infinite;
	will-change: transform;
}

/* Brown outline, not the hero's white: this cue sits on bare parchment. */
.bga-landing__scroll-hint:focus-visible {
	outline: 2px solid var(--color-brown);
	outline-offset: var(--sp-4);
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bga-landing__scroll-hint {
		animation: none;
		will-change: auto;
	}
}

@keyframes bga-landing-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-8px); }
	60% { transform: translateX(-50%) translateY(-4px); }
}

/* ── No-JS fallback ────────────────────────────────────────────────────── */

.no-js .bga-landing {
	height: auto;
}

.no-js .bga-landing__pin {
	height: auto;
	min-height: 60vh;
}

.no-js .bga-landing__content {
	opacity: 1;
	transform: none;
}

.no-js .bga-landing__orange {
	height: 100%;
}

.no-js .bga-landing__cloud {
	opacity: 1;
}

/* ── Variant: Threshold — split panels ─────────────────────────────────── */

.bga-landing__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: var(--color-orange);
	z-index: 4;
}

.bga-landing__panel--left {
	left: 0;
}

.bga-landing__panel--right {
	right: 0;
}

/* ── Variant: Blueprint — SVG overlay ─────────────────────────────────── */

.bga-landing__blueprint-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.bga-landing__blueprint-svg line,
.bga-landing__blueprint-svg rect,
.bga-landing__blueprint-svg circle {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
}

/* ── Variant: Cloudscape — layered parallax clouds ────────────────────── */

.bga-landing__cloud-layer {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	transform: translateZ(0);
}

.bga-landing__cloud-layer .bga-landing__cloud-img {
	mix-blend-mode: screen;
	filter: brightness(1.4) contrast(0.8);
}

.bga-landing__cloud-layer--1 {
	inset: -10% -15%;
	opacity: 0.15;
	z-index: 1;
}

.bga-landing__cloud-layer--1 .bga-landing__cloud-img {
	width: 130%;
	max-width: none;
}

.bga-landing__cloud-layer--2 {
	inset: 5% -5%;
	opacity: 0.25;
	z-index: 2;
}

.bga-landing__cloud-layer--2 .bga-landing__cloud-img {
	width: 110%;
	max-width: none;
	transform: scaleX(-1);
}

.bga-landing__cloud-layer--3 {
	inset: -5% 10%;
	opacity: 0.35;
	z-index: 3;
}

.bga-landing__cloud-layer--3 .bga-landing__cloud-img {
	width: 90%;
	max-width: none;
}

.bga-landing__cloud-layer--4 {
	inset: 15% -10%;
	opacity: 0.5;
	z-index: 4;
}

.bga-landing__cloud-layer--4 .bga-landing__cloud-img {
	width: 100%;
	max-width: none;
	transform: scaleX(-1) scaleY(-1);
}

/* ── Variant: Drift — same cloud layers as cloudscape ─────────────────── */
/* Drift reuses cloudscape layers but with horizontal movement instead of vertical */

/* ── Variant: Ember — radial glow pulse ───────────────────────────────── */

.bga-landing--ember .bga-landing__orange {
	background: radial-gradient(ellipse at center, #d4722e 0%, var(--color-orange) 60%);
}

/* ── Variant: Horizon — vertical split reveal ─────────────────────────── */
/* Uses standard layers, animation does the work */

/* ── Variant: Veil — frosted overlay ──────────────────────────────────── */

.bga-landing__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(234, 230, 225, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* ── Variant: Cascade — horizontal strips ─────────────────────────────── */

.bga-landing__cascade-strip {
	position: absolute;
	left: 0;
	right: 0;
	height: 20vh;
	background: var(--color-cream);
	z-index: 4;
}

.bga-landing__cascade-strip--1 { top: 0; }
.bga-landing__cascade-strip--2 { top: 20vh; }
.bga-landing__cascade-strip--3 { top: 40vh; }
.bga-landing__cascade-strip--4 { top: 60vh; }
.bga-landing__cascade-strip--5 { top: 80vh; }

/* ── Variant: Cloudscape + Horizon (combined, scroll-driven) ──────────── */
/*
 * Scroll-driven via GSAP ScrollTrigger (uses the shared pinned model: the
 * section is 300vh tall and .bga-landing__pin is pinned for the scroll).
 * The watercolour cloudscape reads first; as the user scrolls, the orange
 * rises from the bottom through the centre to fill the screen, then the
 * pinned screen scrolls up to hand over to the homepage (whose orange header
 * reads as a continuation of the fill).
 */

.bga-landing--cloudscape-horizon {
	background: var(--color-cream); /* sky base before images load */
}

/* The "sky" — cloudscape backdrop. Sits behind the orange overlay. */
.bga-landing__ch-sky {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--color-cream);
	overflow: hidden;
}

/* Single orange overlay driven by clip-path tweens. */
.bga-landing__ch-orange {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Semi-transparent so the cloudscape reads through the orange as it slides
	   in (Bryce, 29 Jun). Alpha is overridable via --ch-orange-alpha; the
	   preview page exposes a slider so Bryce can set the level himself. */
	background: rgba(174, 86, 37, var(--ch-orange-alpha, 0.80));
	/* GPU compositing for smooth clip-path animation. */
	transform: translateZ(0);
	will-change: clip-path;
	clip-path: inset(100% 0% 0% 0%); /* hidden at the bottom — cloudscape reads first; JS rises it on scroll */
}

/* Headline sits above both sky and orange so it reads on either. */
.bga-landing--cloudscape-horizon .bga-landing__content--ch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	text-align: center;
	padding: var(--sp-24);
	color: var(--color-cream);
	max-width: 740px;
}

.bga-landing--cloudscape-horizon .bga-landing__logotype,
.bga-landing--cloudscape-horizon .bga-landing__headline {
	color: #ffffff; /* white centred text (Bryce, 29 Jun) */
	/* Legible over the cloud and the semi-transparent orange. */
	text-shadow: 0 1px 24px rgba(41, 19, 5, 0.55), 0 0 6px rgba(41, 19, 5, 0.35);
}

/* ── Cloudscape+Horizon clouds — client-approved logo cloud (BGA, 10 Jun) ──
 * A single organic cloud on parchment (BGA, 20 Jul). Reset the base
 * screen-blend + brightness filter so the parchment/cloud colour reads true;
 * blend stays 'normal' (multiply would darken the baked-in parchment field). */
.bga-landing--cloudscape-horizon .bga-landing__cloud-layer {
	will-change: transform;
}
.bga-landing--cloudscape-horizon .bga-landing__cloud-img {
	mix-blend-mode: normal;
	filter: none;
}

/* Single organic cloud (BGA, 20 Jul) — centred, gently floating. The prior
 * Layer 1 (40% echo) is gone; only this foreground layer renders now. It keeps
 * the --cloud-layer--3 hook so the existing JS scroll-drift still applies. */
.bga-landing--cloudscape-horizon .bga-landing__cloud-layer--3 {
	inset: 0;
	justify-content: center;
	align-items: center;
	opacity: 1;
}
.bga-landing--cloudscape-horizon .bga-landing__cloud-layer--3 .bga-landing__cloud-img {
	/* "Large / enveloping" — Bryce chose Option D (21 Jul): the cloud wraps
	   well beyond the centred headline. */
	width: 140%;
	max-width: 2000px;
	margin: 0;
	/* Feather the raster's rectangular edge so the baked-in parchment melts into
	 * the page parchment. The image corners are ~#eae5e1 ≈ --color-cream, so the
	 * matched sky + this elliptical mask leave no visible box — no transparent
	 * PNG or multiply needed (multiply would darken the parchment field). */
	-webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 48%, #000 54%, rgba(0, 0, 0, 0) 90%);
	        mask-image: radial-gradient(ellipse 74% 66% at 50% 48%, #000 54%, rgba(0, 0, 0, 0) 90%);
	/* Barely-there ambient breathe so the single cloud never reads as static. */
	animation: bga-landing-breathe-soft 22s ease-in-out infinite;
	will-change: transform;
}

/* ── Cloud interpretation variants — PREVIEW PAGE ONLY (data-ch-style) ──────
 * Set only by template-landing-preview.php via ?cloud=<style>. The homepage
 * block never sets data-ch-style, so its approved look is unchanged. */

/* Refined — a polish of the approved look: foreground eased in off the left
 * edge and softened, the echo lifted for depth, composition raised a touch. */
.bga-landing--cloudscape-horizon[data-ch-style="refined"] .bga-landing__cloud-layer--1 { justify-content: flex-start; opacity: 0.58; }
.bga-landing--cloudscape-horizon[data-ch-style="refined"] .bga-landing__cloud-layer--1 .bga-landing__cloud-img { width: 62%; margin-left: -1%; margin-bottom: 5%; }
.bga-landing--cloudscape-horizon[data-ch-style="refined"] .bga-landing__cloud-layer--3 { justify-content: flex-start; opacity: 0.93; }
.bga-landing--cloudscape-horizon[data-ch-style="refined"] .bga-landing__cloud-layer--3 .bga-landing__cloud-img { width: 40%; margin-left: 5%; margin-bottom: 7%; }

/* Centred — logo cloud + 40% echo centred. */
.bga-landing--cloudscape-horizon[data-ch-style="centered"] .bga-landing__cloud-layer--1 { justify-content: center; }
.bga-landing--cloudscape-horizon[data-ch-style="centered"] .bga-landing__cloud-layer--1 .bga-landing__cloud-img { width: 80%; margin-left: 0; }
.bga-landing--cloudscape-horizon[data-ch-style="centered"] .bga-landing__cloud-layer--3 { justify-content: center; }
.bga-landing--cloudscape-horizon[data-ch-style="centered"] .bga-landing__cloud-layer--3 .bga-landing__cloud-img { width: 52%; margin-left: 0; }

/* Immersive — large, enveloping cloud (Bryce: "larger, more immersive… scale"). */
.bga-landing--cloudscape-horizon[data-ch-style="immersive"] .bga-landing__cloud-layer--1 { justify-content: center; opacity: 0.6; }
.bga-landing--cloudscape-horizon[data-ch-style="immersive"] .bga-landing__cloud-layer--1 .bga-landing__cloud-img { width: 128%; margin-left: 0; }
.bga-landing--cloudscape-horizon[data-ch-style="immersive"] .bga-landing__cloud-layer--3 { justify-content: center; }
.bga-landing--cloudscape-horizon[data-ch-style="immersive"] .bga-landing__cloud-layer--3 .bga-landing__cloud-img { width: 92%; margin-left: 0; }

/* Dual drift — approved composition, but both clouds move (JS); lift the
 * background presence a touch so the parallax reads. */
.bga-landing--cloudscape-horizon[data-ch-style="dual"] .bga-landing__cloud-layer--1 { opacity: 0.6; }

/* Minimal — single foreground logo cloud, no echo, centred and calm. */
.bga-landing--cloudscape-horizon[data-ch-style="minimal"] .bga-landing__cloud-layer--1 { display: none; }
.bga-landing--cloudscape-horizon[data-ch-style="minimal"] .bga-landing__cloud-layer--3 { justify-content: center; }
.bga-landing--cloudscape-horizon[data-ch-style="minimal"] .bga-landing__cloud-layer--3 .bga-landing__cloud-img { width: 50%; margin-left: 0; }

/* Legibility halo for the cloud-behind-text interpretations (the centred
 * compositions put the headline over the cloud). Approved/home are excluded
 * so they stay byte-for-byte unchanged. */
.bga-landing--cloudscape-horizon[data-ch-style]:not([data-ch-style="approved"]) .bga-landing__headline,
.bga-landing--cloudscape-horizon[data-ch-style]:not([data-ch-style="approved"]) .bga-landing__logotype {
	text-shadow: 0 0 26px rgba(233, 230, 225, 0.96), 0 0 9px rgba(233, 230, 225, 0.88);
}

@keyframes bga-landing-breathe {
	0%, 100% { transform: scale(1) translate(0, 0); }
	50%      { transform: scale(1.05) translate(1.2%, -1.2%); }
}

@keyframes bga-landing-breathe-soft {
	0%, 100% { transform: scale(1) translate(0, 0); }
	50%      { transform: scale(1.02) translate(-0.8%, 0.4%); }
}

@media (prefers-reduced-motion: reduce) {
	.bga-landing--cloudscape-horizon .bga-landing__cloud-layer--1 .bga-landing__cloud-img,
	.bga-landing--cloudscape-horizon .bga-landing__cloud-layer--3 .bga-landing__cloud-img {
		animation: none;
	}
}

/* Mobile: tighten the headline width and pull the foreground cloud in. */
@media (max-width: 767px) {
	.bga-landing--cloudscape-horizon .bga-landing__content--ch {
		max-width: 90vw;
	}
	/* Single cloud centred behind the headline on mobile. Enlarged to the
	 * "large" Option D (Bryce, 21 Jul) so it carries the full ~5-line headline
	 * — the previous size only backed the middle lines. */
	.bga-landing--cloudscape-horizon .bga-landing__cloud-layer--3 .bga-landing__cloud-img {
		width: 290%;
		max-width: none;
	}
}

/* No-JS: hide the intro overlay — let the page render. */
.no-js .bga-landing--cloudscape-horizon {
	display: none;
}

/* Reduced motion: static cloudscape + headline, orange hidden, normal scroll. */
@media (prefers-reduced-motion: reduce) {
	.bga-landing--cloudscape-horizon {
		height: 100vh;
	}

	.bga-landing--cloudscape-horizon .bga-landing__ch-orange {
		clip-path: inset(100% 0% 0% 0%);
	}
}

/* ── Variant selector bar ─────────────────────────────────────────────── */

.bga-replay-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-8) var(--sp-16);
	background: rgba(41, 19, 5, 0.9);
	backdrop-filter: blur(8px);
	font-size: var(--text-label);
}

.bga-replay-bar__label {
	color: rgba(255, 255, 255, 0.5);
	font-weight: var(--font-weight-light);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-right: var(--sp-8);
}

.bga-replay-bar__btn {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	padding: var(--sp-4) var(--sp-12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	transition: all 0.15s ease;
}

.bga-replay-bar__btn:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.bga-replay-bar__btn.is-active {
	color: #fff;
	background: var(--color-orange);
	border-color: var(--color-orange);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.bga-landing__headline {
		/* 26 → 40px, ~72% of --font-size-h1 (was 32 → 56px). */
		font-size: clamp(1.625rem, 3vw, 2.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bga-landing {
		height: 100vh;
	}

	.bga-landing__orange {
		height: 100%;
	}

	.bga-landing__cloud {
		opacity: 1;
	}

	.bga-landing__content {
		opacity: 1;
		transform: none;
	}

	.bga-landing__scroll-hint {
		animation: none;
	}
}