/* brand — Bridgus isologo and wordmark */
@layer components {
  .logo, .logo-mark {
    --logo-default-h: 1.75rem;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--logo-ink, var(--ink));
  }

  .logo-mark {
    --logo-dur: 900ms;
    --logo-delay: 150ms;
    block-size: var(--logo-h, var(--logo-default-h));
    inline-size: auto;
    aspect-ratio: 112 / 70;
    overflow: visible;
  }

  .logo-mark__arch {
    stroke: currentColor;
    stroke-width: 9;
    stroke-linecap: round;
  }
  .logo-mark__node { fill: currentColor; }

  /* accent flow: drawn from the origin node to the top of the arch */
  .logo-mark__flow {
    stroke: var(--accent);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 1 2;
    animation: logo-flow var(--logo-dur) var(--ease-out) var(--logo-delay) backwards;
  }

  /* the payload rides the arch around its center (80, 85) */
  .logo-mark__payload {
    fill: var(--accent);
    transform-box: view-box;
    transform-origin: 80px 85px;
    animation: logo-payload var(--logo-dur) var(--ease-out) var(--logo-delay) backwards;
  }
  .logo-mark__core {
    fill: var(--surface-2);
  }

  /* the intro plays once per tab; theme.js sets .intro-played afterwards */
  .intro-played :is(.logo-mark__flow, .logo-mark__payload) { animation: none; }

  @keyframes logo-flow { from { stroke-dashoffset: 1; } }
  @keyframes logo-payload { from { rotate: -90deg; } }

  .logo__text {
    display: grid;
    line-height: var(--leading-none);
  }
  .logo__word {
    font-size: calc(var(--logo-h, var(--logo-default-h)) * 0.8);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tightest);
    span { color: var(--accent); }
  }
  .logo__tag {
    margin-block-start: 0.35em;
    font-family: var(--font-sans);
    font-size: calc(var(--logo-h, var(--logo-default-h)) * 0.32);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    color: var(--muted);
  }

  /* lockup on dark/inverse surfaces */
  .logo--inverse {
    --logo-ink: var(--inverse-ink);
    --muted: color-mix(in oklab, var(--inverse-ink) 60%, transparent);
    .logo-mark__core { fill: var(--inverse); }
  }
}