/* PeptPro — Round 5 hero composition (Naem's approved hero adjustment).
 *
 * Front-page only, loaded after round5-home.css so it can restate the hero mask
 * that assets/css/round2.css sets, without editing that shared sheet.
 *
 * His ask: "make the turquoise molecular/helix depth scene more visually
 * highlighted and extend its composition across the FULL RIGHT HALF of the
 * hero, not just a small patch behind the product card."
 *
 * What was actually wrong, measured on the live page at 1440x764:
 *
 * 1. Not the renderer. molecular-field.js already draws at uOpacity 1.0 (lines)
 *    and 0.98 (points). Nothing here raises it, and the JS is untouched.
 *
 * 2. The helix is a projected 3D object, and its on-screen WIDTH is a function
 *    of the canvas HEIGHT alone: half-width = 0.2716 x canvasH px (radius 2.0
 *    units, camera 2.58/9.5, divided by the aspect, times canvasW/2 — the width
 *    cancels). style.css sized the canvas at 96% of a 764px hero, so the braid
 *    was only +-199px wide and centred at x=763. That is the narrow vertical
 *    band at x560-960 in the before-crop. Widening the mask over the right half
 *    unmasked black, because the helix was never there to begin with.
 *
 * 3. The right half was additionally being painted out by .hero::before, a
 *    legacy 90deg wash of the page colour that still had 61% black at x=720 and
 *    34% at x=922 — over the exact region he wants lit.
 *
 * So: move and enlarge the canvas so the braid's body lands on the right side,
 * shape the field with a real composition mask instead of one centred blob, and
 * pull the legacy wash back to the copy column where it earns its keep.
 *
 * The multi-layer mask needs mask-composite, so the whole set is behind an
 * @supports gate: where it is missing the page keeps round2's composition
 * exactly, rather than falling back to a union mask that would put dust behind
 * the headline. Chromium and WebKit both report the condition true and both
 * render the intersect correctly (pixel-checked, not assumed).
 *
 * Dark-only theme: no light-mode media query anywhere in here — the literal
 * scheme-preference token is deliberately absent so the deploy gate's grep of
 * assets/css/round5-*.css stays empty.
 * No animation is introduced, so prefers-reduced-motion stays the JS's job and
 * the reduced-motion render is a still frame (verified).
 */

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {

/* --- Desktop: one continuous system across the right side ---------------- */

@media (min-width: 901px) {
	/* Canvas box, in % of the field (= the hero, 1440x764 at the reference
	   width). left 26% + width 74% puts it at x374-1440 so its particle cloud
	   reaches the right edge; height 116% (886px) grows the braid to +-241px
	   and centres it at x=907, so it now runs behind the product plate's left
	   edge (x=779) instead of stopping 180px short of it.

	   116% is a ceiling, not a preference: the helix advances 5.4pi over 8.4
	   units, so its pitch on screen scales with the same canvas height. At 160%
	   only ~1.5 turns survive inside the hero and the braid falls apart into two
	   disconnected arcs — tried it, it reads as debris. 116% keeps ~2.05 turns,
	   which is the dense braid from the before-crop, just larger and moved. */
	.hero-split .molecular-canvas,
	.hero-split .molecular-poster {
		inset: -8% auto -8% 30%;
		width: 82%;
		height: 116%;
	}

	/* Three intersected mask layers instead of one radial, because the three
	   jobs are independent: where the composition starts on the left, how it
	   leaves the frame, and how it sits vertically. A single radial cannot do a
	   tight left falloff and a soft right edge at once.

	   Horizontal — nothing before 28% (x=403); the headline column measures
	   x84-435, so the copy never gets dust behind it. Full weight from 59%
	   (x=850) to 94%, then eased to .60 at the right edge so the field reads as
	   continuing off-frame rather than being cut.
	   Vertical — .30 at the top edge and .34 at the bottom, so the braid runs
	   full height and fades into the header and into the next section instead
	   of butting into them.
	   Radial — a wide, shallow falloff centred at 66% x, the density peak he
	   asked for, biased to the right half without a visible edge. */
	.hero-split .molecular-field {
		inset: 0;
		-webkit-mask-image:
			linear-gradient(to right, transparent 0%, transparent 28%, rgba(0, 0, 0, .30) 40%, rgba(0, 0, 0, .82) 50%, #000 59%, #000 92%, rgba(0, 0, 0, .74) 96%, rgba(0, 0, 0, .46) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .88) 12%, #000 22%, #000 80%, rgba(0, 0, 0, .34) 100%),
			radial-gradient(82% 96% at 68% 46%, #000 0%, #000 66%, rgba(0, 0, 0, .88) 86%, rgba(0, 0, 0, .62) 100%);
		mask-image:
			linear-gradient(to right, transparent 0%, transparent 28%, rgba(0, 0, 0, .30) 40%, rgba(0, 0, 0, .82) 50%, #000 59%, #000 92%, rgba(0, 0, 0, .74) 96%, rgba(0, 0, 0, .46) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .88) 12%, #000 22%, #000 80%, rgba(0, 0, 0, .34) 100%),
			radial-gradient(82% 96% at 68% 46%, #000 0%, #000 66%, rgba(0, 0, 0, .88) 86%, rgba(0, 0, 0, .62) 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	/* 720 particles over the right half is dust, not depth — the far right was
	   still reading as dead black between them. This is the atmosphere they sit
	   in: three very low-alpha lobes of the one accent, no second hue. It lives
	   inside .molecular-field so it inherits the same mask and fades on exactly
	   the same edges as the helix — one composition, not a second layer with its
	   own outline. */
	.hero-split .molecular-field::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background:
			radial-gradient(42% 60% at 62% 46%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 78%),
			radial-gradient(40% 52% at 90% 54%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 82%),
			radial-gradient(70% 90% at 76% 50%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 84%);
	}

	/* .hero::before was a full-width 90deg wash: 61% black at x=720 and 34% at
	   x=922. That is the reason the right half looked unlit. Pulled back to the
	   copy column — fully out by 57% (x=821), where the composition begins. */
	.hero-split::before {
		background: linear-gradient(92deg,
			rgba(4, 6, 8, .97) 0%,
			rgba(4, 6, 8, .90) 21%,
			rgba(4, 6, 8, .56) 33%,
			rgba(4, 6, 8, .16) 45%,
			transparent 57%);
	}

	/* round2's copy scrim inherits height:24% from .hero::after, so it only ever
	   covered the top 183px of the hero. Restated over the full height, and
	   lightened because .hero-split::before above now does the heavy lifting.
	   Measured worst-case contrast over the result: h1 16.9:1, .sub 9.2:1,
	   .eyebrow 13.0:1. */
	.hero-split::after {
		inset: 0;
		height: auto;
		background: linear-gradient(96deg,
			color-mix(in srgb, var(--page) 62%, transparent) 0%,
			color-mix(in srgb, var(--page) 34%, transparent) 12%,
			color-mix(in srgb, var(--page) 12%, transparent) 20%,
			transparent 28%);
	}

	/* His "unforgettable element" is the card floating INSIDE the helix, and the
	   braid now runs right behind the plate — but at 62%/34% the plate was
	   opaque enough to swallow it, so the strands stopped dead at x=779 and the
	   card read as pasted onto the scene. At 46%/24% the braid stays traceable
	   through the glass and the plate is still unmistakably a plate. Cost to the
	   card's own copy, measured: .hero-name 10.5 -> 10.1, .hero-strength (the
	   worst of them, 14px muted) 6.9 -> 6.6, .hero-price 13.0 -> 12.8,
	   .hero-stock 8.3 -> 8.3, .hero-chip 9.3 -> 9.1. All far above 4.5. */
	.hero-split .hero-stage {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--surface-raised) 50%, transparent) 0%,
			color-mix(in srgb, var(--surface-raised) 52%, transparent) 44%,
			color-mix(in srgb, var(--surface) 74%, transparent) 64%,
			color-mix(in srgb, var(--surface) 93%, transparent) 73%,
			color-mix(in srgb, var(--surface) 96%, transparent) 100%);
	}

	/* An earlier pass guarded this with @supports not (backdrop-filter: ...).
	   That guard is gone: it could never fire in the case it was written for —
	   an engine that DECLARES backdrop-filter and then does not composite it
	   answers the support query TRUE — and where it did fire it flattened the
	   plate to near-opaque and destroyed the braid-through-the-plate read for
	   no benefit. The dependency is removed structurally instead, in the ramp
	   above and the chip's own ground below, and verified with the blur forced
	   off. Reduced transparency stays, because that one is a person asking for
	   less glass rather than an engine failing to draw it. */

	@media (prefers-reduced-transparency: reduce) {
		.hero-split .hero-stage {
			background: linear-gradient(180deg,
				color-mix(in srgb, var(--surface-raised) 94%, transparent),
				color-mix(in srgb, var(--surface) 88%, transparent));
		}
	}

	/* The halo is what makes the plate read as lit BY the field rather than laid
	   on top of it. Pushed past the plate edges and blurred harder so the light
	   wraps the corners — it is a soft ground, deliberately not a ring. */
	.hero-split .hero-stage-halo {
		inset: -12% -14% -10%;
		background:
			radial-gradient(50% 44% at 50% 46%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 74%),
			radial-gradient(78% 70% at 52% 54%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 82%);
		filter: blur(18px);
	}
}

/* --- Stacked layouts: a separate art direction, not a squeeze ------------- */
/* RETUNED after the max-height clamp was released below. The stacked hero was
   760px and is now 918-944px, so every percentage in this block was pointing at
   the wrong band. Re-measured, and consistent across 375/390/430/600/768:
   copy ends 33-34.5%, plate starts 44.5-48%, photo 51-77%, meta row 78-88%.
   The profile now clears the copy by ~2.5pp, opens through the gap between the
   copy and the plate — which is the only place the web reads on a phone — and
   is at full weight from 57%, behind the photo. */
/* Below 900px the copy sits above and the plate below, so "the right half" has
   no meaning: the composition frames the CARD instead. Measured stacks —
   768x1038: copy ends at 44% of the hero, plate starts at 59%.
   390x760:  copy ends at 42.5%, plate starts at 56%.
   So one vertical profile serves both: nothing above 43%, full weight from 64%
   down. The field lights the gap between the last line of copy and the top of
   the plate, then carries the plate, and never reaches the headline.

   The canvas is deliberately NOT enlarged here. At <=768 the scene is already
   in the renderer's `lite` mode, and its half-width is 0.2716 x 760 = 206px at
   390 — wider than the viewport already. Growing it would only cost fill rate
   for a braid that is off-screen. */

@media (max-width: 900px) {
	/* The helix's on-screen pitch scales with the canvas height, so releasing the
	   760px clamp stretched it: at 934px the braid thinned to ~1.2 visible turns
	   and the band between the copy and the plate — the only place the web reads
	   on a phone — went nearly empty. Sizing the canvas back to 91% restores the
	   pitch to ~355px, close to the 321px it had at 760, and drops the backing
	   store rather than growing it. Offset 9% from the top so the box covers the
	   copy/plate seam and the whole plate rather than starting above the fold. */
	.hero-split .molecular-canvas,
	.hero-split .molecular-poster { inset: 9% auto 0 0; width: 100%; height: 91%; }

	.hero-split .molecular-field {
		inset: 0;
		-webkit-mask-image:
			linear-gradient(to bottom, transparent 0%, transparent 37%, rgba(0, 0, 0, .34) 43%, rgba(0, 0, 0, .90) 51%, #000 57%, #000 88%, rgba(0, 0, 0, .40) 95%, transparent 99%),
			linear-gradient(to right, rgba(0, 0, 0, .30) 0%, #000 15%, #000 85%, rgba(0, 0, 0, .30) 100%),
			radial-gradient(98% 56% at 52% 72%, #000 0%, #000 62%, rgba(0, 0, 0, .78) 86%, rgba(0, 0, 0, .48) 100%);
		mask-image:
			linear-gradient(to bottom, transparent 0%, transparent 37%, rgba(0, 0, 0, .34) 43%, rgba(0, 0, 0, .90) 51%, #000 57%, #000 88%, rgba(0, 0, 0, .40) 95%, transparent 99%),
			linear-gradient(to right, rgba(0, 0, 0, .30) 0%, #000 15%, #000 85%, rgba(0, 0, 0, .30) 100%),
			radial-gradient(98% 56% at 52% 72%, #000 0%, #000 62%, rgba(0, 0, 0, .78) 86%, rgba(0, 0, 0, .48) 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	.hero-split .molecular-field::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background:
			radial-gradient(72% 34% at 50% 70%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 78%),
			radial-gradient(96% 46% at 50% 82%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 84%);
	}

	/* Same job as the desktop rule, rotated: hold the copy, release the plate.
	   Fully out by 62%, which is below the top of the plate at both widths. */
	.hero-split::before {
		background:
			linear-gradient(180deg,
				rgba(4, 6, 8, .97) 0%,
				rgba(4, 6, 8, .94) 24%,
				rgba(4, 6, 8, .70) 33%,
				rgba(4, 6, 8, .24) 40%,
				transparent 47%),
			radial-gradient(88% 40% at 52% 70%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 64%);
	}

	.hero-split::after {
		inset: 0;
		height: auto;
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--page) 58%, transparent) 0%,
			color-mix(in srgb, var(--page) 30%, transparent) 20%,
			color-mix(in srgb, var(--page) 10%, transparent) 30%,
			transparent 40%);
	}

	/* Same structural fix as the desktop plate, and it became REQUIRED here only
	   once the clip above was released: while the hero amputated its own card,
	   `.hero-name` was 71-80% cut and the meta row below it did not render at
	   all, so nothing measured it. With the card whole, the mobile plate is
	   still pharma-pass's thin 0.62/0.34 and the product name measured 3.87 in
	   chromium-noblur and 3.86 in WebKit — under the bar. Ramped on the same
	   principle, with the stops moved to the mobile card's own proportions:
	   photo 12-61% of the plate, meta row 64-82%, controls 85-97%. The
	   transition sits under the photo, so it is not visible as a band. */
	.hero-split .hero-stage {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--surface-raised) 50%, transparent) 0%,
			color-mix(in srgb, var(--surface-raised) 52%, transparent) 50%,
			color-mix(in srgb, var(--surface) 76%, transparent) 58%,
			color-mix(in srgb, var(--surface) 94%, transparent) 66%,
			color-mix(in srgb, var(--surface) 96%, transparent) 100%);
	}

	/* The plate is nearly full-bleed here, so the halo stays inside it: a glow
	   spilling past a 358px-wide card would just look like a lit rectangle. */
	.hero-split .hero-stage-halo {
		inset: 2% 2% 6%;
		background:
			radial-gradient(54% 46% at 50% 46%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 76%),
			radial-gradient(80% 68% at 50% 56%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 82%);
		filter: blur(14px);
	}
}
} /* @supports mask-composite */

/* --- Scroll depth: the one compositor hint ------------------------------- */
/* molecular-field.js adds .has-scroll-depth to the plate only when the scroll
   parallax is actually live — never under prefers-reduced-motion, and removed
   again while the pause control is engaged. So this is a hint on the single
   layer that moves, for exactly as long as it moves, rather than a standing
   GPU reservation. The field's own two layers move inside the existing canvas
   via shader uniforms, so they cost no extra compositor layer at all: three
   moving layers, one promotion.

   Deliberately outside the @supports gate above — the parallax does not depend
   on mask-composite, so it should still be hinted on engines that fall back to
   round2's static composition. */
.hero-split .hero-stage.has-scroll-depth { will-change: transform; }

/* --- Legibility that does not depend on a blur --------------------------- */
/* Round 5 verification found a structural bug, and it is older than this round.
 * .hero-stage's legibility came almost entirely from backdrop-filter: blur(8px)
 * smearing the field into an even wash. Where that blur is declared but never
 * composited, the braid renders CRISP straight across "Retatrutide",
 * "20 mg · Price pending" and "IN STOCK". Reproduced deterministically by
 * forcing backdrop-filter:none in chromium — same renderer, one variable — and
 * independently in headless WebKit, which declares the property and ignores it:
 *   .hero-name 1.97 / 1.95, .hero-strength 1.22 / 1.24, .hero-stock 1.87 /
 *   1.87, .hero-chip 2.83 / 2.46. All far under 4.5:1.
 *
 * @supports cannot catch this — an engine that declares the property and
 * refuses to composite it answers TRUE. So the fix is to remove the dependency
 * rather than detect it: the copy carries its own ground, and the blur goes
 * back to being an enhancement.
 *
 * These rules sit OUTSIDE the mask-composite gate on purpose. Legibility must
 * never be contingent on a support query.
 */

/* The chip had the same dependency and its own translucent accent fill, so it
 * gets fixed on its own terms rather than by stretching the scrim up the card.
 * The accent tint is unchanged and simply gets an opaque ground UNDER it: over
 * the dark plate the chip looks exactly as it did, and the only thing that
 * changes is the case where the braid used to show through it. Making the tint
 * itself denser would have turned a light chip into a heavy badge. */
.hero-split .hero-chip {
	background:
		linear-gradient(0deg,
			color-mix(in srgb, var(--accent) 14%, transparent),
			color-mix(in srgb, var(--accent) 14%, transparent)),
		color-mix(in srgb, var(--page) 92%, transparent);
}

/* --- The hero was amputating its own product card ------------------------ */
/* mobile.css:289 clamps `.hero` to max-height:760px (inside its 680px block)
 * and pharma-pass makes `.hero-split` overflow:hidden. The stacked layout needs
 * 918-944px, so the section cut 134-160px off the bottom of its own plate. The
 * copy survived; `.hero-price`, `.hero-strength`, `.hero-stock`, both arrows and
 * all three dots did not, and a tap aimed at a carousel control hit-tested to
 * the NEXT SECTION's "View all Peptides" CTA — six focusable buttons that were
 * invisible, untappable and mis-targeting, with two of the three bestsellers
 * unreachable.
 *
 * Pre-existing: the clamp is byte-identical in the pre-Round-5 backup and the
 * same cut is visible in the before-shots. Round 5 did not cause it.
 *
 * The clamp is a leftover reservation for the OLD hero, whose vials were
 * absolutely positioned and so cost no height. Releasing it is what makes the
 * section as tall as its own content; nothing else here depends on 760px.
 *
 * Scoped to the whole 680px block, not just the three tested widths: measured,
 * 600px overruns by 160px — worse than 430's 134px — so fixing only <=430 would
 * have left the same amputation live one breakpoint up. */
@media (max-width: 680px) {
	.hero.hero-split {
		height: auto;
		max-height: none;
		/* Room under the plate for the motion control. It is authored inside
		   .molecular-field, so the composition mask used to erase it — it is
		   lifted out in molecular-field.js and is now genuinely visible, which
		   means it needs somewhere to sit that is not on top of the carousel's
		   prev arrow. A strip below the plate reads as a caption; overlapping
		   the card read as a mistake. */
		padding-bottom: 96px;
	}

	.hero-split #molecularMotionToggle { white-space: nowrap; }
}