/* hero-fade.css
 * Ports remedium.html's hero "black & red" backdrop to the other product PDPs.
 * Source of truth: assets/css/remedium.css — the FINAL (winning) .hero::before at
 * the "Product Page 2026 Visual Pass" block (~line 2104), plus the .hero /
 * .hero-left/.hero-right structure (~line 2055).
 *
 * The PDP hero sits over main's #120d13 top band; this full-bleed pseudo-element
 * lays the diagonal black->red gradient + the two pink radial glows + a faint grid
 * behind the hero content. No CSP impact (stylesheet link, not inline script).
 * The fade is static (no motion) so prefers-reduced-motion needs no handling.
 */

.hero {
  position: relative;
  isolation: isolate;   /* own stacking context so the full-bleed backdrop stays put */
  overflow: visible;    /* let the 100vw ::before bleed past the 1220px hero column */
}
.hero > * {
  position: relative;
  z-index: 2;           /* all hero content sits above the backdrop */
}

/* Full-bleed black->red hero backdrop: diagonal gradient + dual pink glows + grid. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 12% 0%, rgba(219, 38, 108, 0.17), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(219, 38, 108, 0.11), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(116deg, #120d13 0%, #09080a 62%, #2a0e1a 100%);
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  pointer-events: none;
  z-index: 0;
}

/* Page-wide fine grain (remedium uses body::before; on the PDPs body::before is the
 * legacy disabled grid, so the grain lives on the free body::after). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}

/* Hero proof-pills: standardize the PDP hero chips to remedium.html's pink-outline
 * look — the .hero-proof-chips li treatment in remedium.css (the /remedium reference).
 * Each PDP defines an inline single-class .hero-pill base (gray translucent); the
 * compound .hero-points .hero-pill (specificity 0,0,2,0) wins over it (0,0,1,0), so
 * the pink standard applies on every PDP with no per-page HTML edits. Layout/sizing
 * stays owned by responsive-fixes.css + the inline base; this rule only sets color. */
.hero-points .hero-pill {
  border: 1px solid rgba(219, 38, 108, 0.45);
  background: transparent;
  color: #ff8ab9;
}