/* ==========================================================================
   holo-fallback.css — THE FROZEN COMPONENT CONTRACT for the HoloHDR site.
   Base styles for every foil surface. Works standalone (pure-CSS gradient
   fallback); the engine upgrades surfaces by injecting a canvas as the
   element's FIRST CHILD and adding .hl-gl. Page CSS only sizes/positions
   the boxes — never restyles the foil itself.

   Tints: --hl-c1..c4 (gradient) and --hl-s1..s2 (sheen) are set here with
   cold-mode defaults; holo-boot.js retints them per palette mode, and
   concepts.css may override per [data-concept].
   ========================================================================== */

:root{
  /* cold-mode fallback tints (engine overrides at runtime) */
  --hl-c1:#d5e3f4; --hl-c2:#d9f2e2; --hl-c3:#d3f0de; --hl-c4:#d7e6f6;
  --hl-s1:#7fa8d9; --hl-s2:#8fd0a8;
}

/* ---- the foil pill (CSS fallback until the GL face switches on) ---- */
.hl{
  position:relative;z-index:-1;color:var(--ink);font-weight:700;font-size:inherit;
  border-radius:0.12em;padding:0.03em 0.18em 0.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  --hl-lx:50%;--hl-ly:36%;--hl-sheen:0;
  background:
    radial-gradient(circle 140px at var(--hl-lx) var(--hl-ly),
      color-mix(in srgb, white calc(var(--hl-sheen) * 85%), transparent) 0%,
      color-mix(in srgb, var(--hl-s1) calc(var(--hl-sheen) * 65%), transparent) 36%,
      color-mix(in srgb, var(--hl-s2) calc(var(--hl-sheen) * 35%), transparent) 62%,
      transparent 84%),
    linear-gradient(105deg, var(--hl-c1) 0%, var(--hl-c2) 34%, var(--hl-c3) 66%, var(--hl-c4) 100%),
    linear-gradient(color-mix(in srgb, white 40%, var(--slate-200)),
                    color-mix(in srgb, white 40%, var(--slate-200)));
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--slate-400) 20%, transparent);
}
/* a pill's parent needs its own stacking context for the z-index:-1 trick;
   give sections `isolation:isolate` (and release with :has(.hl-gl) if needed) */
.hl.hl-gl{
  display:inline-block;
  position:relative;
  z-index:0;
  background:none;
  box-shadow:none;
}

/* the injected foil canvas (engine-owned; never target it from page CSS) */
.warr-hl-canvas{
  position:absolute;
  inset:0;
  dynamic-range-limit:no-limit;
  width:100%;
  height:100%;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
}

/* ---- steel: the element's own glyphs ARE the mask (giant typography) ---- */
.hl.hl--steel{white-space:nowrap;}
.hl.hl--steel.hl-gl{color:transparent;}

/* ---- masked artworks: the CSS mask clips the fallback foil AND the injected
   GL canvas identically; the engine never needs to know the shape. Block
   surfaces reset the pill chrome. Pages size/position the boxes. ---- */
.hl.hl--block,
.hl.hl--stripe, .hl.hl--stripe.hl-gl,
.hl.hl--seal,   .hl.hl--seal.hl-gl,
.hl.hl--logo,   .hl.hl--logo.hl-gl,
.hl.hl--ribbon, .hl.hl--ribbon.hl-gl,
.hl.hl--globe,  .hl.hl--globe.hl-gl{
  display:block;
  padding:0;
  border-radius:0;
}

/* vertical edge band, right-anchored by default (1:5 source SVGs) */
.hl.hl--stripe, .hl.hl--stripe.hl-gl{
  position:absolute;
  right:0;
  top:50%;
  translate:0 -50%;
  z-index:0;
  width:clamp(96px,19.2vh,168px);
  height:clamp(480px,96vh,840px);
}

/* thin left-edge seal stripe inside a card (parent must be position:relative) */
.hl.hl--seal, .hl.hl--seal.hl-gl{
  position:absolute;
  left:0; top:0; bottom:0;
  z-index:0;
  width:clamp(20px,2.5vw,36px);
}

/* pattern tiles — combine with .hl--stripe / .hl--seal / any block surface.
   urls resolve relative to THIS file: assets/holo/svg + assets/patterns */
.hl--pat-logo   { -webkit-mask:url('../patterns/stripe2.svg') center/cover no-repeat; mask:url('../patterns/stripe2.svg') center/cover no-repeat; }
.hl--pat-shield { -webkit-mask:url('svg/tile-shield.svg') center/cover no-repeat; mask:url('svg/tile-shield.svg') center/cover no-repeat; }
.hl--pat-mix    { -webkit-mask:url('svg/tile-mix.svg') center/cover no-repeat; mask:url('svg/tile-mix.svg') center/cover no-repeat; }
.hl--pat-micro  { -webkit-mask:url('svg/tile-microtext.svg') center/cover no-repeat; mask:url('svg/tile-microtext.svg') center/cover no-repeat; }
.hl--pat-lines  { -webkit-mask:url('svg/tile-lines.svg') center/cover no-repeat; mask:url('svg/tile-lines.svg') center/cover no-repeat; }
.hl--pat-dots   { -webkit-mask:url('svg/tile-particles.svg') center/cover no-repeat; mask:url('svg/tile-particles.svg') center/cover no-repeat; }
.hl--pat-guilloche { -webkit-mask:url('svg/tile-guilloche.svg') center/cover no-repeat; mask:url('svg/tile-guilloche.svg') center/cover no-repeat; }
/* right-anchored variant when a clamped box ratio deviates from the tile */
.hl--pat-anchor-right{ -webkit-mask-position:right center; mask-position:right center; }

/* logo/shield silhouette fill (sized by parent, e.g. tier-card shieldwrap) */
.hl.hl--logo, .hl.hl--logo.hl-gl{
  position:absolute; inset:0; z-index:0;
  -webkit-mask:url('../patterns/shield.svg') center/contain no-repeat;
  mask:url('../patterns/shield.svg') center/contain no-repeat;
}

/* animated guilloché ribbon (tall banknote strip; page sizes the box) */
.hl.hl--ribbon, .hl.hl--ribbon.hl-gl{
  position:relative;
  -webkit-mask:url('../guilloche/ribbon.svg') center/cover no-repeat;
  mask:url('../guilloche/ribbon.svg') center/cover no-repeat;
}

/* live dot globe (engine feeds a live mask; box sized by page) */
.hl.hl--globe, .hl.hl--globe.hl-gl{ position:relative; }

/* ---- tier cards: foil outline ring + shield foil, from the prime lab ---- */
.warr-tier-wrap{position:relative;}
.warr-tier__ring{
  position:absolute; inset:-5px; z-index:0;
  border-radius:calc(var(--radius-card) + 5px);
  background:linear-gradient(105deg, var(--hl-c1) 0%, var(--hl-c2) 34%, var(--hl-c3) 66%, var(--hl-c4) 100%);
}
.warr-tier-wrap .warr-tier{position:relative; z-index:1;}

/* ==========================================================================
   v2 components (CONCEPTS.md frozen contract v2) — appended; everything
   above is stable. rule / watermark / holo-frame / icon.
   ========================================================================== */

/* horizontal block foil rule (certificate line / heading underline).
   Page sizes the box (typ. 2-28px tall); optional .hl--pat-* tile. */
.hl.hl--rule, .hl.hl--rule.hl-gl{
  display:block;
  position:relative;
  z-index:0;
  padding:0;
  border-radius:0;
}

/* full-height micro-pattern margin column (the Filigrane signature).
   Place one .hl--watermark--left and/or one .hl--watermark--right. */
.hl.hl--watermark, .hl.hl--watermark.hl-gl{
  display:block;
  position:fixed;
  top:0; bottom:0;
  z-index:0;
  width:clamp(14px,1.6vw,26px);
  padding:0;
  border-radius:0;
  pointer-events:none;
}
.hl--watermark--left{left:0;}
.hl--watermark--right{right:0;}
/* default microtext tile; any .hl--pat-* modifier takes over (the :not()
   guard steps aside as soon as a pattern class is present) */
.hl.hl--watermark:not([class*="hl--pat-"]){
  -webkit-mask:url('svg/tile-microtext.svg') center/cover no-repeat;
  mask:url('svg/tile-microtext.svg') center/cover no-repeat;
}

/* foil-framed card: generalized tier ring. Structure:
   .holo-frame > .holo-frame__ring + .holo-frame__body */
.holo-frame{position:relative;}
.holo-frame__ring{
  position:absolute; inset:-5px; z-index:0;
  border-radius:calc(var(--radius-card) + 5px);
  background:linear-gradient(105deg, var(--hl-c1) 0%, var(--hl-c2) 34%, var(--hl-c3) 66%, var(--hl-c4) 100%);
}
.holo-frame__body{
  position:relative;
  z-index:1;
  border-radius:var(--radius-card);
}

/* small foil icon (28x28 default; page CSS may resize the box).
   Combine with an .hl--icon-* mask modifier below. The size lives on the
   base selector ONLY, so page rules (equal or higher specificity) can
   resize the box even after the engine adds .hl-gl. */
.hl.hl--icon, .hl.hl--icon.hl-gl{
  display:inline-block;
  position:relative;
  z-index:0;
  padding:0;
  border-radius:0;
}
.hl.hl--icon{
  width:28px;
  height:28px;
}
.hl--icon-radar{ -webkit-mask:url('svg/icon-radar.svg') center/contain no-repeat; mask:url('svg/icon-radar.svg') center/contain no-repeat; }
.hl--icon-flame{ -webkit-mask:url('svg/icon-flame.svg') center/contain no-repeat; mask:url('svg/icon-flame.svg') center/contain no-repeat; }
.hl--icon-chart{ -webkit-mask:url('svg/icon-chart.svg') center/contain no-repeat; mask:url('svg/icon-chart.svg') center/contain no-repeat; }

/* a kind disabled by the active concept preset: the engine stamps hl-off so
   the raw CSS-fallback gradient never shows for banned surfaces */
.hl.hl-off, .hl.hl-off.hl-gl,
.warr-tier__ring.hl-off, .holo-frame__ring.hl-off{
  background:none;
  box-shadow:none;
}

/* ==========================================================================
   v3 components (CONCEPTS.md frozen contract v3) — appended; everything
   above is stable. serial / numeral (steel derivatives) + inverted nav icon
   (foil chip + static knocked-out glyph).
   ========================================================================== */

/* serial strip + drop-cap numeral (Specimen) — STEEL-technique surfaces:
   the element's own glyphs are the mask (holo-surfaces maps both -> steel).
   Defaults below; page CSS may override the type. */
.hl.hl--serial, .hl.hl--numeral{white-space:nowrap;}
.hl.hl--serial.hl-gl, .hl.hl--numeral.hl-gl{color:transparent;}
/* serial: one-line foil microtext strip */
.hl.hl--serial{
  font-family:Inter,var(--font-body,sans-serif);
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
/* numeral: display-font single glyph / section number */
.hl.hl--numeral{
  font-family:var(--font-display,"Satoshi",Inter,sans-serif);
  font-weight:700;
  line-height:1;
}

/* inverted icon (nav product tiles): the CHIP is the reflective foil — a
   plain rounded block (rounded corners via border-radius, which the injected
   canvas inherits; full-coverage texture, kind 'icon'); the glyph sits ON TOP
   as a static, NON-foil overlay (.ptile__glyph below + an .hl--icon-* mask). */
.hl.hl--icon-chip, .hl.hl--icon-chip.hl-gl{
  width:34px;
  height:34px;
  border-radius:9px;
}

/* the inverted tile host: relative anchor for the glyph overlay + release
   the slate chip fill so the foil chip reads as THE container */
.ptile__ic--foil{position:relative;background:transparent;}
.ptile__glyph{
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  pointer-events:none;
}
.ptile__glyph--ink{background:var(--slate-950,#020617);}
.ptile__glyph--silver{background:linear-gradient(180deg,var(--slate-300,#cbd5e1),var(--slate-400,#94a3b8));}

/* ==========================================================================
   v4 components — appended; everything above is stable.
   holo-hr (the applied stripe), btn--holo foil CTA, solutions icon masks.
   ========================================================================== */

/* the applied stripe: pre-footer separator on EVERY page (site.js injects it
   immediately before #site-foot). A continuous unmasked foil rule is the
   silver bed; the page's product-pattern rule rides ON TOP of it, so the
   glowing pattern sits IN a solid silver stripe:
     <div class="holo-hr" aria-hidden="true">
       <div class="hl hl--rule holo-hr__base"></div>
       <div class="hl hl--rule holo-hr__pat hl--pat-<tile>"></div>
     </div>
   Both layers are engine kind 'rule'. The child selector below intentionally
   outranks .hl.hl--rule.hl-gl{position:relative} (same specificity, later in
   the file) so the layers stay stacked after the engine upgrades them. */
.holo-hr{position:relative;height:16px;width:100%;}
.holo-hr .hl.hl--rule{position:absolute;inset:0;}

/* glowy CTA button:
     <button class="btn btn--holo"><span class="hl hl--btn">Label</span></button>
   The .hl--btn span is a standard foil pill (engine kind: pill — the default
   classification; the injected canvas inherits the pill radius and the engine
   applies its rounded-rect mask) rendering the foil face BEHIND the ink
   label. Fallback = the base .hl gradient pill. The wrapper isolates the
   pre-engine z-index:-1 trick and drops the .btn fill/padding so the foil
   face IS the button. */
.btn--holo{position:relative;isolation:isolate;background:none;border:none;padding:0;}
.hl.hl--btn, .hl.hl--btn.hl-gl{
  display:inline-block;
  border-radius:var(--radius-pill,9999px);
}
.hl.hl--btn{
  padding:14px 28px;
  font-weight:600;
  color:var(--slate-950,#020617);
}

/* solutions foil-icon masks (SVGs authored by the engine package, same
   contain-fit contract as icon-radar/flame/chart above) */
.hl--icon-building { -webkit-mask:url('svg/icon-building.svg') center/contain no-repeat; mask:url('svg/icon-building.svg') center/contain no-repeat; }
.hl--icon-umbrella { -webkit-mask:url('svg/icon-umbrella.svg') center/contain no-repeat; mask:url('svg/icon-umbrella.svg') center/contain no-repeat; }
.hl--icon-briefcase{ -webkit-mask:url('svg/icon-briefcase.svg') center/contain no-repeat; mask:url('svg/icon-briefcase.svg') center/contain no-repeat; }