/* HEADER BACKGROUND MODULE — the reusable CSS header-background system.
   Every background is a named .hb-* class on the hero (.hb-hero) and is pure
   CSS — gradients only, no image assets. All color comes from the --hb-* role
   variables (set on a wrapping canvas/element) via color-mix, so a background
   recolors automatically when the palette swaps:

     --hb-bg / --hb-ink / --hb-ink-rgb   page background + text
     --hb-primary / --hb-on-primary      brand color + text on it
     --hb-accent / --hb-on-accent        secondary color + text on it
     --hb-support                        tertiary / supporting color
     --hb-hf / --hb-bf / --hb-tw         heading font / body font / heading weight

   Each .hb-* class only sets --hb-pattern (the background-image layers) and
   --hb-pattern-size; the base rule paints them. The glow (.glow-on) is a
   separate toggleable layer — a primary wash from the top-left and an accent
   wash from the bottom-right — composed OVER whatever pattern is active, same
   recipe as the design-templates preview. Alpha levels stay in the 3.2–11.5%
   range so every backdrop reads as texture, never competes with the hero copy.

   --hb-boost scales every pattern alpha per scheme: 1 on dark palettes (where
   a faint wash already reads), ~1.8 on light ones (where the same alpha all
   but vanishes against a pale background). Set alongside the palette variables
   so it swaps with the scheme.

   The lab page chrome lives in header_bg_sections.css; this module is meant to
   be reused on the live vendor page later (same split as footer_layouts.css). */

/* ---- base hero ---- */
.hb-hero {
  background-color: var(--hb-bg);
  background-image: var(--hb-pattern, none);
  background-size: var(--hb-pattern-size, auto);
  color: var(--hb-ink);
  font-family: var(--hb-bf);
  padding: clamp(36px, 9cqi, 64px) clamp(22px, 6cqi, 48px);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}

/* Toggleable gradient glow, built from the scheme's own colors and layered
   over any active pattern. `cover` sizes the two washes; the pattern keeps its
   own tile size. */
.hb-hero.glow-on {
  background-image:
    radial-gradient(120% 80% at 12% -8%, color-mix(in srgb, var(--hb-primary) 22%, transparent) 0%, transparent 52%),
    radial-gradient(120% 85% at 108% 112%, color-mix(in srgb, var(--hb-accent) 16%, transparent) 0%, transparent 50%),
    var(--hb-pattern, none);
  background-size: cover, cover, var(--hb-pattern-size, auto);
}

/* ---- background types ---- */

/* Clean — the plain palette background; the baseline every texture is judged
   against (and what glow-only looks like). */
.hb-plain { --hb-pattern: none; --hb-pattern-size: auto; }

/* Dot Grid — the original dotted background from the design-template cards,
   promoted to a named type: faint primary dots on an 18px tile. */
.hb-dots {
  --hb-pattern: radial-gradient(color-mix(in srgb, var(--hb-primary) calc(7.7% * var(--hb-boost, 1)), transparent) 1.5px, transparent 1.6px);
  --hb-pattern-size: 18px 18px;
}

/* Blueprint Grid — fine ink graph lines, the technical/mono look. */
.hb-grid {
  --hb-pattern:
    linear-gradient(color-mix(in srgb, var(--hb-ink) calc(3.8% * var(--hb-boost, 1)), transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hb-ink) calc(3.8% * var(--hb-boost, 1)), transparent) 1px, transparent 1px);
  --hb-pattern-size: 22px 22px, 22px 22px;
}

/* Diagonal Lines — thin 45° primary pinstripes. */
.hb-diagonal {
  --hb-pattern: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--hb-primary) calc(5.8% * var(--hb-boost, 1)), transparent) 0 1px, transparent 1px 13px);
  --hb-pattern-size: auto;
}

/* Crosshatch — the pinstripes doubled in both directions, at lower alpha so
   the weave stays quiet. */
.hb-crosshatch {
  --hb-pattern:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--hb-ink) calc(3.2% * var(--hb-boost, 1)), transparent) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hb-ink) calc(3.2% * var(--hb-boost, 1)), transparent) 0 1px, transparent 1px 14px);
  --hb-pattern-size: auto, auto;
}

/* Contour Rings — concentric hairline arcs radiating from above the header,
   like a topographic map. */
.hb-rings {
  --hb-pattern: repeating-radial-gradient(circle at 50% -30%,
    color-mix(in srgb, var(--hb-primary) calc(6.4% * var(--hb-boost, 1)), transparent) 0 1px, transparent 1px 46px);
  --hb-pattern-size: auto;
}

/* Mesh Wash — soft primary / accent / support color fields drifting in from
   three corners; the modern gradient-mesh look. */
.hb-mesh {
  --hb-pattern:
    radial-gradient(90% 70% at 8% -5%, color-mix(in srgb, var(--hb-primary) calc(10.2% * var(--hb-boost, 1)), transparent) 0%, transparent 55%),
    radial-gradient(85% 75% at 105% 20%, color-mix(in srgb, var(--hb-accent) calc(7.7% * var(--hb-boost, 1)), transparent) 0%, transparent 55%),
    radial-gradient(100% 80% at 50% 115%, color-mix(in srgb, var(--hb-support) calc(6.4% * var(--hb-boost, 1)), transparent) 0%, transparent 60%);
  --hb-pattern-size: cover, cover, cover;
}

/* Horizon Fade — a single primary wash settling down from the top edge. */
.hb-horizon {
  --hb-pattern: linear-gradient(180deg,
    color-mix(in srgb, var(--hb-primary) calc(9% * var(--hb-boost, 1)), transparent) 0%, transparent 62%);
  --hb-pattern-size: cover;
}

/* Top Spotlight — the soft overhead glow dark schemes already use on the
   design-template cards, available to every palette. */
.hb-spotlight {
  --hb-pattern: radial-gradient(130% 90% at 50% -12%,
    color-mix(in srgb, var(--hb-primary) calc(11.5% * var(--hb-boost, 1)), transparent) 0%, transparent 55%);
  --hb-pattern-size: cover;
}

/* Sunbeam Rays — faint conic beams fanning out from above center. */
.hb-rays {
  --hb-pattern: repeating-conic-gradient(from -90deg at 50% -12%,
    color-mix(in srgb, var(--hb-primary) calc(4.5% * var(--hb-boost, 1)), transparent) 0deg 5deg, transparent 5deg 13deg);
  --hb-pattern-size: cover;
}

/* ---- full-page surface painter (live vendor page) ----
   .hb-surface paints the SAME .hb-* pattern onto a whole-page element (<body>
   on the vendor page) instead of a hero card. Background-image only — the
   element keeps whatever background-color the page already paints, so
   hb-plain is a true no-op. Tiled textures (dots, grid, diagonal, crosshatch)
   repeat over the full page; the directional washes are pinned to a top band
   about one viewport tall (instead of stretching to the page's full height)
   and fade out behind the hero. Backgrounds scroll with the page — no
   background-attachment: fixed, which is broken/slow on mobile Safari. */
.hb-surface {
  background-image: var(--hb-pattern, none);
  background-size: var(--hb-pattern-size, auto);
}
.hb-surface.hb-mesh, .hb-surface.hb-horizon, .hb-surface.hb-spotlight,
.hb-surface.hb-rays, .hb-surface.hb-rings {
  background-size: 100% min(120vh, 1000px);
  background-repeat: no-repeat;
  background-position: top center;
}
/* Rings and rays are repeating gradients that fill their box edge-to-edge, so
   on a page surface the top band would end in a hard cut mid-page. A page-bg
   colored fade layered on top dissolves them instead — same visual fade the
   other washes have built in. */
.hb-surface.hb-rings {
  --hb-pattern:
    linear-gradient(180deg, transparent 45%, var(--hb-bg) 88%),
    repeating-radial-gradient(circle at 50% -30%,
      color-mix(in srgb, var(--hb-primary) calc(6.4% * var(--hb-boost, 1)), transparent) 0 1px, transparent 1px 46px);
}
.hb-surface.hb-rays {
  --hb-pattern:
    linear-gradient(180deg, transparent 45%, var(--hb-bg) 88%),
    repeating-conic-gradient(from -90deg at 50% -12%,
      color-mix(in srgb, var(--hb-primary) calc(4.5% * var(--hb-boost, 1)), transparent) 0deg 5deg, transparent 5deg 13deg);
}

/* Page-level glow (.hb-surface.glow-on) — a standalone top-band overlay
   instead of an extra --hb-pattern layer, so it composes cleanly over BOTH
   tiled patterns (dots, grid, diagonal, crosshatch, which repeat and would
   otherwise tile the wash too) and the directional ones above (which already
   own a multi-layer --hb-pattern). Same two washes as .hb-hero.glow-on. */
.hb-surface.glow-on { position: relative; }
.hb-surface.glow-on::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(120vh, 1000px);
  background-image:
    radial-gradient(120% 80% at 12% -8%, color-mix(in srgb, var(--hb-primary) 22%, transparent) 0%, transparent 52%),
    radial-gradient(120% 85% at 108% 112%, color-mix(in srgb, var(--hb-accent) 16%, transparent) 0%, transparent 50%);
  /* Neither wash reliably decays to zero alpha by this box's own bottom edge
     (each is an off-center ellipse, so how much is left at
     height:min(120vh,1000px) depends on viewport height), and the accent one
     is aimed at 112% — strongest just past the bottom. Left alone that ends
     in a hard horizontal line mid-page.

     Fade it out with a mask rather than by painting a var(--hb-bg) layer on
     top: a color fade only disappears while --hb-bg is exactly the color the
     page is actually painted in, and the moment it isn't (a preview frame
     that didn't get the theme applied, a section with its own background)
     the "fade" IS the seam. Masking ramps the overlay's own alpha to zero,
     so it dissolves into whatever is behind it, always. */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  pointer-events: none;
}

/* ---- hero specimen content ---- */
.hb-hero .hb-eyebrow {
  /* --section-eyebrow, muted — matches hero_layouts.css and
     section_title_layouts.css so every eyebrow on the page reads the same. */
  font-family: var(--hb-mf, ui-monospace, monospace);
  font-size: clamp(10.5px, 2.6cqi, 12px); line-height: 1.2; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow, 0.14em); margin: 0 0 var(--stack-eb-gap, clamp(8px,1vw,12px));
  color: var(--hb-muted, color-mix(in srgb, var(--hb-ink) 58%, transparent));
}
.hb-hero .hb-name {
  font-family: var(--hb-hf); font-weight: var(--hb-tw);
  /* --type-display-l, same step as .he-name so a header and a hero agree. */
  font-size: clamp(30px, 6cqi, 40px); line-height: 1.12; letter-spacing: var(--track-display-l, -0.02em);
  margin: 0 0 12px;
}
.hb-hero .hb-tagline {
  /* --type-body */
  margin: 0 0 var(--space-md, clamp(16px,2vw,24px)); font-size: 15px; line-height: 1.6;
  /* --hb-muted like .hb-tagline's sibling above, not a fixed fade: 74% put 12
     of the 72 palettes under AA (worst 3.01:1). */
  color: var(--hb-muted, color-mix(in srgb, var(--hb-ink) 74%, transparent)); max-width: 44ch;
}
.hb-hero .hb-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hb-hero .hb-cta {
  display: inline-flex; align-items:center; justify-content:center;
  min-height: var(--btn-h-md, clamp(40px,4.4vw,44px));
  padding: 8px var(--btn-px-md, clamp(14px,1.8vw,20px)); border-radius: 999px;
  background: var(--hb-primary-fill, var(--hb-primary)); color: var(--hb-on-primary);
  font-size: 14px; line-height:1.2; font-weight: 500; text-decoration: none;
}
.hb-hero .hb-secondary {
  display: inline-flex; align-items:center; justify-content:center;
  min-height: var(--btn-h-md, clamp(40px,4.4vw,44px));
  padding: 8px var(--btn-px-md, clamp(14px,1.8vw,20px)); border-radius: 999px;
  background: transparent; color: var(--hb-ink);
  border: 1px solid color-mix(in srgb, var(--hb-ink) 26%, transparent);
  font-size: 14px; line-height:1.2; font-weight: 500; text-decoration: none;
}