/* ==========================================================================
   BRAND CAMPAIGN HERO — BP.1 Phase 1 (lab rounds 3–9 geometry, round-8
   human-locked motion contract: pass-through flow + PT2.5 EXPRESSIVE+
   default; pinned/scroll-track REJECTED — the hero never holds the
   viewport hostage).

   The stage is composed in the DOM from real WooCommerce product media
   over a PouchPick-OWNED environment gradient (identity-referenced, never
   copied manufacturer artwork). Slots own ALL geometry via inline custom
   properties (inc/brand-campaign.php preset registry) — this file holds
   only the primitives, the environments, and the ONE motion choreography,
   never brand-specific selectors.

   Motion: transform-only, driven by ONE custom property (--pp-cp, written
   by assets/js/brand-campaign.js from a passive scroll listener + one
   rAF). Progress is a pure function of scrollY, so scrolling up reverses
   by construction. Mobile (≤767px) and prefers-reduced-motion are STATIC,
   hard-forced here with !important so no JS path can override them.
   ========================================================================== */

.pp-bpc {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	height: var(--pp-bpc-h);
	background: var(--pp-navy);
	--pp-cp: 0;
}

/* Stage heights (lab C2 default / C3 minimal-fallback band) */
.pp-bpc--c2 { --pp-bpc-h: clamp(400px, 33vw, 500px); }
.pp-bpc--c3 { --pp-bpc-h: clamp(300px, 25vw, 380px); }

@media (max-width: 1024px) {
	.pp-bpc--c2 { --pp-bpc-h: clamp(360px, 42vw, 470px); }
	.pp-bpc--c3 { --pp-bpc-h: clamp(290px, 34vw, 360px); }
}

@media (max-width: 767px) {
	/* Lab §17: mobile 320–460 band, its own stage logic */
	.pp-bpc--c2 { --pp-bpc-h: clamp(340px, 100vw, 420px); }
	.pp-bpc--c3 { --pp-bpc-h: clamp(300px, 88vw, 360px); }
}

/* --------------------------------------------------------------------------
   PouchPick-owned brand environments (lab BP_PENV — base linear + one
   radial glow, identity-referenced). Unknown token = the Navy default.
   -------------------------------------------------------------------------- */
.pp-bpc--env-default { background: linear-gradient(118deg, #0A1B31 0%, #142F51 60%, #1E4173 100%); }
.pp-bpc--env-velo { background: radial-gradient(90% 140% at 76% 18%, rgba(0, 186, 196, 0.30), transparent 56%), linear-gradient(118deg, #04121F 0%, #073A47 54%, #0B5E6B 100%); }
.pp-bpc--env-loop { background: radial-gradient(85% 130% at 74% 16%, rgba(0, 206, 142, 0.24), transparent 56%), linear-gradient(118deg, #03170F 0%, #06503B 54%, #0A7A57 100%); }
.pp-bpc--env-zyn { background: radial-gradient(90% 140% at 70% 22%, rgba(0, 179, 228, 0.32), transparent 58%), linear-gradient(118deg, #041C2A 0%, #075273 54%, #0A87B4 100%); }
.pp-bpc--env-xqs { background: radial-gradient(90% 140% at 74% 18%, rgba(178, 120, 255, 0.34), transparent 56%), linear-gradient(118deg, #150A24 0%, #3B1B60 54%, #6B37A0 100%); }

/* --------------------------------------------------------------------------
   Product layers — decorative campaign objects (stage is aria-hidden).
   Geometry arrives per layer as inline custom properties.
   -------------------------------------------------------------------------- */
.pp-bpc-stage { position: absolute; inset: 0; overflow: hidden; }

.pp-bpc-layer {
	position: absolute;
	left: var(--pp-lx);
	bottom: var(--pp-ly);
	height: var(--pp-ls);
	width: auto;
	max-width: none; /* a >100%-height depth object must never be aspect-crushed by a global img cap */
	z-index: var(--pp-lz, 2);
	opacity: var(--pp-lo, 1);
	rotate: var(--pp-lr, 0deg);
	filter: blur(var(--pp-lb, 0px)) drop-shadow(0 22px 24px rgba(0, 0, 0, 0.38));
	will-change: transform;
}

/* Background forms are atmosphere, not objects — no drop shadow */
.pp-bpc-layer--bg { filter: blur(var(--pp-lb, 0px)); }

/* Copy-zone scrim — a light local anchor over the dark environment; the
   protected lower-left copy quadrant is a composition rule (lab §9) */
.pp-bpc-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(76deg, rgba(3, 9, 16, 0.5) 0%, rgba(3, 9, 16, 0.16) 30%, rgba(3, 9, 16, 0) 50%),
		linear-gradient(0deg, rgba(3, 9, 16, 0.34) 0%, rgba(3, 9, 16, 0) 34%);
}

/* --------------------------------------------------------------------------
   Copy block — the ACCESSIBLE content (logo, H1, tagline, real CTAs)
   -------------------------------------------------------------------------- */
.pp-bpc-inner {
	position: relative;
	z-index: 6;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding-bottom: clamp(26px, 4vw, 44px);
}

.pp-bpc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 460px; }

.pp-bpc-logoplate { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; background: #fff; border-radius: 10px; padding: 8px 14px; }
/* CAT.6B: a very wide wordmark (10–11:1) is held to the plate's width and scaled down inside its box, never
   distorted; every mark narrower than the cap (all four launch marks) renders exactly as before. The plate itself
   never leaves its container (the hero copy, a related-brand card): it narrows to it and the mark scales down
   proportionally inside, centred — a mark that already fits is untouched. */
.pp-bpc-logoplate img { display: block; min-width: 0; height: 26px; width: auto; max-width: min(220px, 60vw, 100%); object-fit: contain; }
.pp-bpc-logoplate--text { font-family: var(--pp-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; color: var(--pp-navy); }

.pp-bpc-title {
	margin: 0;
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.12;
	color: #fff;
	text-wrap: balance;
}

.pp-bpc-tagline { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }

.pp-bpc-ctas { display: flex; align-items: center; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.pp-bpc-ctas:empty { display: none; }

.pp-bpc-link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.pp-bpc-link:hover { color: rgba(255, 255, 255, 0.85); }
.pp-bpc-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 767px) {
	/* Mobile recomposition (lab §16): campaign art owns the UPPER half
	   via the per-slot mobile geometry; the copy owns the lower half.
	   CAT.6B (2026-10-22): that is now a rule, not a coincidence of copy
	   length. The stage keeps the hero's mobile height and its geometry; the
	   copy never starts above the stage's half-way line, and when it needs
	   more room (narrow phones, longer names or taglines) the hero grows
	   below the art instead of the heading climbing into it. Where the copy
	   already fitted (390 and wider, for every launch brand) nothing moves. */
	.pp-bpc { height: auto; min-height: var(--pp-bpc-h); }
	.pp-bpc-stage { bottom: auto; height: var(--pp-bpc-h); }
	.pp-bpc-inner { height: auto; min-height: var(--pp-bpc-h); padding-top: calc(var(--pp-bpc-h) / 2); }
	.pp-bpc-copy { max-width: 100%; }
	.pp-bpc-title { font-size: clamp(1.45rem, 6.4vw, 1.75rem); }
	.pp-bpc-tagline { font-size: 14.5px; }
}

/* ==========================================================================
   PASS-THROUGH MOTION — PT2.5 EXPRESSIVE+ (lab rounds 6–8, HUMAN LOCKED)

   The hero sits in NORMAL document flow: no pinning, no scroll track, no
   added scroll distance. --pp-cp (0→1) = the hero's own passage through
   the viewport. The EXPAND/RELEASE choreography is written ONCE and
   scaled by one amplitude factor (--pp-amp) with per-slot weights
   (--pp-amp-sN): products converge from spread start-offsets into the
   designed composition. PT3 BOLD stays a documented flagship override
   (a future .pp-bpc--pt3 { --pp-amp: 1.4; } class), never the default.
   ========================================================================== */
.pp-bpc--pt25 {
	--pp-amp: 1.2;
	--pp-amp-s1: 1.2;
	--pp-amp-s2: 1.1;
	--pp-amp-s3: 1.12;
	--pp-amp-s4: 1.45;
	--pp-amp-s5: 1.35;
	--pp-amp-s6: 1;
}

.pp-bpc--pass [data-slot="1"] { translate: 0 calc((14px - 44px * var(--pp-cp)) * var(--pp-amp-s1, var(--pp-amp))); scale: calc(1 - 0.11 * var(--pp-amp-s1, var(--pp-amp)) + 0.21 * var(--pp-amp-s1, var(--pp-amp)) * var(--pp-cp)); }
.pp-bpc--pass [data-slot="2"] { translate: calc((70px * (1 - var(--pp-cp)) - 26px * var(--pp-cp)) * var(--pp-amp-s2, var(--pp-amp))) calc((-20px * (1 - var(--pp-cp)) + 6px * var(--pp-cp)) * var(--pp-amp-s2, var(--pp-amp))); scale: calc(1 - 0.14 * var(--pp-amp-s2, var(--pp-amp)) + 0.29 * var(--pp-amp-s2, var(--pp-amp)) * var(--pp-cp)); }
.pp-bpc--pass [data-slot="3"] { translate: calc((-60px * (1 - var(--pp-cp)) + 30px * var(--pp-cp)) * var(--pp-amp-s3, var(--pp-amp))) calc((-16px * (1 - var(--pp-cp)) - 14px * var(--pp-cp)) * var(--pp-amp-s3, var(--pp-amp))); scale: calc(1 - 0.14 * var(--pp-amp-s3, var(--pp-amp)) + 0.28 * var(--pp-amp-s3, var(--pp-amp)) * var(--pp-cp)); }
.pp-bpc--pass [data-slot="4"] { translate: calc((-90px * (1 - var(--pp-cp)) + 44px * var(--pp-cp)) * var(--pp-amp-s4, var(--pp-amp))) calc((-10px * (1 - var(--pp-cp)) - 8px * var(--pp-cp)) * var(--pp-amp-s4, var(--pp-amp))); scale: calc(1 - 0.09 * var(--pp-amp-s4, var(--pp-amp)) + 0.20 * var(--pp-amp-s4, var(--pp-amp)) * var(--pp-cp)); }
.pp-bpc--pass [data-slot="5"] { translate: calc((-40px * (1 - var(--pp-cp)) + 16px * var(--pp-cp)) * var(--pp-amp-s5, var(--pp-amp))) calc((-40px * (1 - var(--pp-cp)) + 24px * var(--pp-cp)) * var(--pp-amp-s5, var(--pp-amp))); scale: calc(1 - 0.14 * var(--pp-amp-s5, var(--pp-amp)) + 0.28 * var(--pp-amp-s5, var(--pp-amp)) * var(--pp-cp)); }
.pp-bpc--pass [data-slot="6"] { scale: calc(1 - 0.04 * var(--pp-amp-s6, var(--pp-amp)) + 0.19 * var(--pp-amp-s6, var(--pp-amp)) * var(--pp-cp)); }

/* PT2.5 micro-rotation — primary + edges only (≤1.5°, lab round 7) */
.pp-bpc--pass.pp-bpc--pt25 [data-slot="1"] { rotate: calc(var(--pp-lr, 0deg) + 1.2deg * var(--pp-cp)); }
.pp-bpc--pass.pp-bpc--pt25 [data-slot="4"] { rotate: calc(var(--pp-lr, 0deg) + 1.5deg * var(--pp-cp)); }
.pp-bpc--pass.pp-bpc--pt25 [data-slot="2"] { rotate: calc(var(--pp-lr, 0deg) - 1deg * var(--pp-cp)); }

/* --------------------------------------------------------------------------
   STATIC contracts — hard-forced (brief §11):
   prefers-reduced-motion = static, full stop.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pp-bpc-layer {
		translate: 0 0 !important;
		scale: 1 !important;
		rotate: var(--pp-lr, 0deg) !important;
	}
}

/* Mobile = STATIC + its own art direction: only the ≤4 instances that
   carry mobile geometry render, upper-half placement (brief §31). */
@media (max-width: 767px) {
	.pp-bpc-layer {
		display: none;
		translate: 0 0 !important;
		scale: 1 !important;
		rotate: var(--pp-lr, 0deg) !important;
	}

	.pp-bpc-layer[data-m="1"] {
		display: block;
		height: var(--pp-lms, var(--pp-ls));
		left: var(--pp-lmx, var(--pp-lx));
		bottom: var(--pp-lmy, var(--pp-ly));
	}
}

/* HD.1 final correction — on a Brand Page the transition area above the cover (the fixed header's spacer, behind
   the header at rest; >= 768 only) carries the cover's own base Navy, so a fast scroll-up that runs ahead of the
   header's scroll-linked height (a frame or two) never shows a white band between the header and the cover. A
   zero-blur outer shadow paints only outside the cover's box and is not clipped by its overflow. */
@media screen and (min-width: 768px) {
	#pp-main > .pp-bp:first-child > .pp-bpc:first-child { box-shadow: 0 calc(-1 * var(--pp-header-full-h, 150px)) 0 0 var(--pp-navy); }
}