/* 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:#FF5252}

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

/* ── 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:#FF5252}
.bhasm-logo.on-dark:hover .bhasm-ember .bhasm-lock svg path,
.bhasm-logo.on-dark:focus-visible .bhasm-ember .bhasm-lock svg path{fill:#FF5252}

@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)}
}