/* Top-centre brand mark: the drawn portrait alongside the wordmark.
 * No panel and no capsule. Legibility over scrolling photography comes from
 * the progressive-blur scroll edge behind it (css/components/scroll-edge.css),
 * which spans the full width — a halo around the mark alone reads as a blob.
 */

.brand-badge {
  position: fixed;
  left: 50%;
  top: var(--s-4);
  transform: translateX(-50%);
  z-index: var(--z-nav);

  /* Persists across navigations — see the view-transition rules in base.css. */
  view-transition-name: brand-mark;

  /* Brand morph progress: 0 at the very top → 1 once scrolled past the range.
     js/brand-scroll.js scrubs this to the scroll position and every part of the
     mark interpolates off it, so the switch evolves continuously with the
     scroll — no trigger, no fixed-duration animation, no phases. */
  --morph: 0;

  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  /* Never wider than the screen, so the fixed mark can't push a scroll. */
  max-width: 100vw;
  box-sizing: border-box;
}

/* Above the scroll edge. */
.brand-badge__img,
.brand-badge__name {
  position: relative;
  z-index: 1;
}

.brand-badge__img {
  height: 55px;   /* +20% over the original 46px */
  width: auto;
  /* Source art is pure black; bring it to the brand ink. */
  filter: brightness(0) saturate(100%) invert(13%) sepia(19%)
          saturate(1200%) hue-rotate(115deg) brightness(95%) contrast(92%);
  /* Fades out as the scroll progresses. */
  opacity: calc(1 - var(--morph));
}

.brand-badge__name {
  font-family: var(--f-display);
  font-size: 64px;
  line-height: 1;
  /* The display face sits low in its box; nudge it onto the drawing's axis. */
  padding-top: 0.15em;
}

.brand-badge[data-tone='dark'] {
  color: var(--c-on-dark);
}

.brand-badge[data-tone='dark'] .brand-badge__img {
  filter: brightness(0) invert(1);
}

/* --- Scroll morph: icon + wordmark  ⇄  circular avatar ------------------ *
 * Every value below interpolates off --morph (0 → 1), which is scrubbed to the
 * scroll position in js/brand-scroll.js. No transitions: the variable already
 * tracks scroll frame by frame, so the mark evolves smoothly and continuously
 * between the two states, both directions, with no discrete phases. */

/* One box holding the icon and the avatar, so they cross-fade in place. */
.brand-badge__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1;   /* above the scroll edge, like the icon/name it replaces */
}

/* Avatar: fades in (opacity = --morph) and grows out of the icon's centre
   (scale 0.62 → 1) as the scroll progresses. */
.brand-badge__pp {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 64px;
  max-width: none;   /* override the global img{max-width:100%}, else it ovals */
  border-radius: 50%;
  transform-origin: center;
  z-index: 2;
  opacity: var(--morph);
  transform: translate(-50%, -50%) scale(calc(0.62 + 0.38 * var(--morph)));
}

/* Wordmark: fades and collapses its width (and the flex gap) in lockstep, so the
   centre-anchored badge glides down to just the avatar as --morph rises. */
.brand-badge__name {
  overflow: hidden;
  white-space: nowrap;
  opacity: calc(1 - var(--morph));
  max-width: calc(22ch * (1 - var(--morph)));
  margin-left: calc(var(--s-3) * var(--morph) * -1);
}

@media (max-width: 820px) {
  .brand-badge {
    top: var(--s-2);
    gap: var(--s-2);
  }
  .brand-badge__pp { height: 48px; width: 48px; }
  .brand-badge__name {
    margin-left: calc(var(--s-2) * var(--morph) * -1);
  }
  .brand-badge__img {
    height: 41px;   /* +20% over the original 34px */
  }
  .brand-badge__name {
    font-size: 42px;
    /* Lighter optical nudge at this size, so the wordmark sits on the drawing's
       centre line rather than a touch low. */
    padding-top: 0.06em;
  }
}