/* ⛔ THE EMBER IS THE PAGE'S FIRE TOKEN, NEVER ITS OWN HEX (2026-09-22).
   MEASURED on seven shipping pages by hovering the real mark and reading the computed fill: the wordmark lit an
   OLDER red while every one of those pages resolved --fire to the current one. Two reds five points apart on the
   same screen, one of them on the mark that sits directly above a hero painted in the other.
   ★ The defect was not the colour, it was the LITERAL: four hardcoded hexes in a brand file cannot follow a palette,
   so the mark drifts the moment the system moves — and the system HAS moved; frontend/css/bhasm-core.css still
   declares the older value. Design Law 3 is "colour means something or it means nothing"; a wordmark with a private
   red is the shape that breaks it.
   ⚠ THE RETIRED HEX IS DELIBERATELY NOT WRITTEN HERE. The first draft of this very note quoted it while explaining
   its removal — and tests/atomic/logo_ember_token.test.js §5 caught it on the gate's first run. A note that re-types
   what it retired is how the value comes back; the gate is the binding, not the prose.
   The fallback keeps frontend/brand/logo.html — which loads no palette — rendering exactly as it did. */
/* BHASM logo — ember reveal. CSS only, no JavaScript.
   Two identical lockup layers; the ember copy is clipped by a moving band.
   The base layer is never animated, so the logo is legible if motion never runs. */

.bhasm-logo{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:19px;            /* the only value to change when scaling */
  letter-spacing:-.03em;
  line-height:1;
  text-decoration:none;
}
.bhasm-logo .bhasm-lock{display:flex;align-items:center;gap:1px}
.bhasm-logo .bhasm-lock svg{display:block;flex:none;width:.79em;height:1em}
.bhasm-logo .bhasm-ember{position:absolute;left:0;top:0}

/* Light (ash) ground */
.bhasm-logo{color:#ECEEF0}
.bhasm-logo .bhasm-ember .bhasm-lock{color:var(--fire, #FF4D3D)}

/* Dark (charred) ground */
.bhasm-logo.on-dark{color:#ECEEF0}
.bhasm-logo.on-dark .bhasm-ember .bhasm-lock{color:var(--fire, #FF4D3D)}

/* ── THE WEDGE STAYS GREY. FIRE ARRIVES ON HOVER. ──────────────
   Founder, 2026-08-05: "wedge A in logo has to remain grey like designed
   handed over. hovering makes it ember — the one that fire reveals in
   motion."

   The delivered kit fills the wedge with `currentColor`, so it took the
   letter colour and the continuous sweep washed it ember along with the
   letters. The designer anticipated this exact preference in logo.html:
   "The base wedge reads #848B92 on ash / #1E242D on charred if you prefer
   it dimmer than the letters: set fill on the first <path> explicitly
   instead of currentColor."

   ★ Done in CSS, not in the markup. Following that note literally would
   mean editing the fill attribute on 32 lockups across 14 pages — and
   every one of them would have to be found again after the next export.
   A CSS `fill` rule outranks a presentation attribute, so four rules here
   do it once, for every lockup that exists or ever will.

   Both layers are matched deliberately: the rule selects `.bhasm-lock svg
   path`, which is present in the base AND the ember copy, so the sweep
   passes over a grey wedge and changes nothing. The letters keep their
   continuous ember pass — that is the fire that "keeps moving" — and the
   wedge holds still until you touch it. */
.bhasm-logo .bhasm-lock svg path{fill:#848B92}
.bhasm-logo.on-dark .bhasm-lock svg path{fill:#C7CDD4}

/* On hover the ember LAYER's wedge lights, and the sweep already running
   underneath is what reveals it in motion — the reveal is the existing
   animation, not a second one. Ash holds the shape; one ember pass shows
   it. `:focus-visible` too, so the same thing happens for a keyboard. */
.bhasm-logo:hover .bhasm-ember .bhasm-lock svg path,
.bhasm-logo:focus-visible .bhasm-ember .bhasm-lock svg path{fill:var(--fire, #FF4D3D)}
.bhasm-logo.on-dark:hover .bhasm-ember .bhasm-lock svg path,
.bhasm-logo.on-dark:focus-visible .bhasm-ember .bhasm-lock svg path{fill:var(--fire, #FF4D3D)}

@keyframes bhasm-sweep{
  0%{clip-path:inset(0 102% 0 -22%)}
  100%{clip-path:inset(0 -22% 0 102%)}
}
.bhasm-logo .bhasm-ember{animation:bhasm-sweep 5.5s cubic-bezier(.5,0,.5,1) infinite}

@media (prefers-reduced-motion:reduce){
  .bhasm-logo .bhasm-ember{animation:none;clip-path:inset(0 46% 0 0)}
}