/* Ported from hoot-forms-source packages/ui/src/theme/wordmark.css — this
   is the same wordmark used on the app's login/register pages (H + eyes +
   t + Forms), not the square icon-mark tile. Classes renamed fb- -> hf-. */
.hf-wordmark {
  --wm-gold: #e7a93e;
  --wm-gold-deep: #b9791f;
  --wm-glint: #f6f1e4;
  --wm-pupil: #17120a;
  --wm-ink: rgb(var(--hf-foreground));
  font-family: var(--hf-font);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--wm-ink);
}

.hf-wordmark__ch {
  display: inline-block;
}

/* Letters come from data-ch rather than text nodes, so they don't end up in
   the brand link's text (see hf_wordmark() in functions.php). */
.hf-wordmark__ch::before {
  content: attr(data-ch);
}

.hf-wordmark__sp {
  display: inline-block;
  width: 0.32em;
}

.hf-wordmark__ch--forms {
  font-weight: 500;
}

.hf-wordmark__eyes {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.hf-wordmark__eye {
  position: relative;
  z-index: 1;
  width: 0.66em;
  height: 0.66em;
  margin: 0 0.02em;
  display: inline-flex;
  transform: translateY(0.06em) scaleY(1);
  transform-origin: 50% 55%;
}

.hf-wordmark__eye svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hf-wordmark__iris {
  fill: var(--wm-gold);
}

.hf-wordmark__pupil {
  fill: var(--wm-pupil);
}

.hf-wordmark__glint {
  fill: var(--wm-glint);
}

.hf-wordmark__pupil-group {
  transform-box: fill-box;
  transform-origin: center;
}

.hf-wordmark__brow {
  position: absolute;
  left: 0;
  bottom: 0.57em;
  width: 100%;
  height: 0.44em;
  overflow: visible;
}

.hf-wordmark__brow path {
  fill: none;
  stroke: var(--wm-gold);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-wordmark__beak {
  position: absolute;
  left: 50%;
  top: 0.58em;
  width: 0.3em;
  height: 0.26em;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
}

.hf-wordmark__beak path {
  fill: var(--wm-gold-deep);
}

/* Animated (loading) state: eyes drift in a loose, uneven look-around
   cycle. Reserve `animated` for loading/empty states, not steady-state
   nav — matches the brand rule from hoot-forms-source's wordmark.md. */
.hf-wordmark--animated .hf-wordmark__pupil-group {
  animation: hf-wm-look 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.hf-wordmark--animated .hf-wordmark__eye:last-of-type .hf-wordmark__pupil-group {
  animation-delay: 0.03s;
}

.hf-wordmark--animated .hf-wordmark__beak {
  animation: hf-wm-beak 6.4s ease-in-out infinite;
}

@keyframes hf-wm-look {
  0%,
  4% {
    transform: translate(0px, 0px);
  }
  13% {
    transform: translate(15px, -4px);
  }
  24% {
    transform: translate(17px, -2px);
  }
  33% {
    transform: translate(-16px, 3px);
  }
  46% {
    transform: translate(-14px, 4px);
  }
  56% {
    transform: translate(-3px, 13px);
  }
  64% {
    transform: translate(2px, 12px);
  }
  75% {
    transform: translate(7px, -11px);
  }
  85% {
    transform: translate(4px, -9px);
  }
  93%,
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes hf-wm-beak {
  0%,
  30%,
  36%,
  62%,
  68%,
  100% {
    transform: translateX(-50%) scaleY(1);
  }
  33% {
    transform: translateX(-50%) scaleY(1.18);
  }
  65% {
    transform: translateX(-50%) scaleY(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-wordmark--animated .hf-wordmark__pupil-group,
  .hf-wordmark--animated .hf-wordmark__beak {
    animation: none;
  }
}