/* =============================================================================
   header.css — minimal firefly-logo header (UI-011 / KD-8).
   Fixed, transparent over the hero; gains a faint twilight backdrop once
   scrolled (toggled by js/hero.js adding .is-scrolled).
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  padding: var(--space-s) clamp(var(--space-m), 4vw, var(--space-xl));
  transition: background var(--dur-2) var(--ease),
    backdrop-filter var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgb(var(--c-ink) / 0.66);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--hairline);
}

.site-header__mark {
  display: inline-flex;
  align-items: center;
  line-height: 0; /* no text baseline gap around the SVG mark */
  text-decoration: none;
  color: var(--text);
}

/* --- Firefly logo mark ---------------------------------------------------
   Self-contained SVG (its own colours + breathing animation live in the file).
   Here we only size it and add an extra bloom on hover/focus. */
.logo {
  display: block;
  height: clamp(2rem, 1.7rem + 1vw, 2.6rem);
  width: auto;
  filter: drop-shadow(0 0 5px rgb(var(--c-gold) / 0.35));
  transition: filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.site-header__mark:hover .logo,
.site-header__mark:focus-visible .logo {
  filter: drop-shadow(0 0 10px rgb(var(--c-gold) / 0.6));
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    transition: none;
  }
}