.brand-wordmark { position: relative; }
.brand-wordmark img { display: block; width: 100%; }

@supports (mask-image: url('')) {
  .brand-wordmark img { visibility: hidden; }
  .brand-wordmark::before,
  .brand-wordmark::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    aspect-ratio: 2544 / 792;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--brand-paint, #fff);
    mask: var(--mark) center / contain no-repeat;
  }
  .brand-wordmark::before {
    --mark: url('./assets/hero/traffic-pack-header-wordmark.webp');
    transition: background-color .24s ease;
  }
  .brand-wordmark::after {
    --mark: url('./assets/hero/traffic-pack-header-wordmark-drips.webp');
    /* The paint runs start at different heights in the original artwork. */
    --drip-t: calc(100% - 50% * var(--brand-drip-trim, 1));
    --drip-t-side: calc(100% - 57% * var(--brand-drip-trim, 1));
    --drip-r: calc(100% - 14.5% * var(--brand-drip-trim, 1));
    --drip-traffic-top: calc(100% - 77.5% * var(--brand-drip-trim, 1));
    --drip-c: calc(100% - 24% * var(--brand-drip-trim, 1));
    --drip-pack-top: calc(100% - 64% * var(--brand-drip-trim, 1));
    --drip-p: calc(100% - 21% * var(--brand-drip-trim, 1));
    --drip-underline: calc(100% - 5.5% * var(--brand-drip-trim, 1));
    --drip-k: calc(100% - 23.5% * var(--brand-drip-trim, 1));
    clip-path: polygon(
      0 0, 0 var(--drip-t),
      4.8% var(--drip-t), 4.8% var(--drip-t-side),
      8% var(--drip-t-side), 8% var(--drip-r),
      16% var(--drip-r), 16% var(--drip-traffic-top),
      32% var(--drip-traffic-top), 32% var(--drip-c),
      51% var(--drip-c), 51% var(--drip-pack-top),
      57% var(--drip-pack-top), 57% var(--drip-p),
      61% var(--drip-p), 61% var(--drip-underline),
      78% var(--drip-underline), 78% var(--drip-k),
      100% var(--drip-k), 100% 0
    );
    transition: background-color .24s ease, clip-path .58s cubic-bezier(.2,.7,.5,1);
  }
  .brand-wordmark:is(:focus-visible, :active) { --brand-paint: var(--accent); }
  @media (hover: hover) {
    .brand-wordmark:hover { --brand-paint: var(--accent); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .brand-wordmark:is(:focus-visible, :active) { --brand-drip-trim: 0; }
    @media (hover: hover) {
      .brand-wordmark:hover { --brand-drip-trim: 0; }
    }
  }
}

@media (forced-colors: active) {
  .brand-wordmark::before, .brand-wordmark::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wordmark::before, .brand-wordmark::after { transition: none; }
}