/* wordmark.css — renders the living "brandcurl" mark from the CSS variables
   the Go generator injects per request (see pkg/wordmark). Every value is
   legible-by-construction, so this file just faithfully paints whatever it's
   handed. Scoped to the topbar so the footer/docs marks stay quiet. */

.topbar-logo .wm-brand {
  color: var(--wm-brand, var(--ink));
}

/* "curl" is the alive half: a clipped paint (solid, gradient, or — for the
   outline paint — transparent behind a stroke), an optional glow, and at most
   one bounded motion. */
.topbar-logo .wm-curl {
  position: relative;
  background-image: var(--wm-paint, linear-gradient(currentColor, currentColor));
  background-size: var(--wm-bg-size, 100% 100%);
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: var(--wm-stroke, 0 transparent);
  text-shadow: var(--wm-glow, none);
  font-style: var(--wm-style, normal);
  animation: var(--wm-anim, none) var(--wm-anim-dur, 12s) ease-in-out infinite;
}

/* The optional gradient underline (paint = "under"). */
.topbar-logo .wm-curl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--wm-under, none);
}

/* Bounded, tasteful motions — one at a time, set by --wm-anim. */
@keyframes wm-drift {
  to { background-position: 100% 0; }
}
@keyframes wm-hue {
  0%, 100% { filter: hue-rotate(-9deg); }
  50%      { filter: hue-rotate(9deg); }
}
@keyframes wm-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-logo .wm-curl { animation: none !important; }
}