/* Shared wordmark + locked G3 glitch (multi-layer slice).
 * Used by homepage nav and city-guide nav.
 */

.wordmark {
  display: inline-flex;
  /* Align the two text spans by their TEXT baseline, not their box centres.
   * "Career" (Inter) and "Badger" (Permanent Marker) have different line-box
   * heights, so centring the boxes floated "Badger" up. Baseline alignment
   * puts both on the same baseline — the typographically correct fix, and it
   * needs no per-browser translateY nudge (which kept drifting). The icon is
   * re-centred on the cross axis via align-self below. */
  align-items: baseline;
  gap: 8px;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  user-select: none;
  position: relative;
}

.wordmark__icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  align-self: center;
}

/* G3 glitch on the badger icon. Mirrors the host shake on the text
 * spans, plus hue-rotate jitter so the magenta silhouette flashes
 * through ghost colours — visually echoes the RGB-split on the text. */
.wordmark:hover .wordmark__icon {
  animation: g3-icon 450ms steps(7, end) 1;
}

@keyframes g3-icon {
  0%, 100% { transform: translate(0, 0); filter: none; }
  14%  { transform: translate(-3px, 1px); filter: hue-rotate(60deg) brightness(1.2); }
  28%  { transform: translate(3px, -1px); filter: hue-rotate(-60deg) brightness(1.1); }
  42%  { transform: translate(-2px, 2px); filter: hue-rotate(120deg); }
  57%  { transform: translate(3px, -1px); filter: hue-rotate(-100deg) brightness(1.15); }
  71%  { transform: translate(-2px, 1px); filter: hue-rotate(180deg); }
  85%  { transform: translate(1px, 0); filter: hue-rotate(40deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .wordmark__icon { animation: none !important; }
}

.wordmark__career {
  font-family: var(--font-system);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  position: relative;
}

.wordmark__badger {
  font-family: var(--font-wordmark);
  color: var(--magenta);
  font-weight: 400;
  letter-spacing: 0.01em;
  /* No translateY nudge: the parent's align-items:baseline now aligns the
   * "Career" and "Badger" text baselines directly, so the handwritten face
   * no longer needs a per-breakpoint vertical correction. */
  position: relative;
}

/* G3 multi-layer glitch — magenta + cyan ghost copies via ::before/::after */
.wordmark__career::before,
.wordmark__career::after,
.wordmark__badger::before,
.wordmark__badger::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  opacity: 0;
}

.wordmark__badger::before,
.wordmark__badger::after {
  font-family: var(--font-wordmark);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.wordmark:hover .wordmark__career::before,
.wordmark:hover .wordmark__badger::before {
  animation: g3-layer-a 450ms steps(7, end) 1;
}
.wordmark:hover .wordmark__career::after,
.wordmark:hover .wordmark__badger::after {
  animation: g3-layer-b 450ms steps(7, end) 1;
}
.wordmark:hover .wordmark__career,
.wordmark:hover .wordmark__badger {
  animation: g3-host 450ms steps(7, end) 1;
}

@keyframes g3-host {
  0%, 100% { transform: translate(0,0); }
  14%  { transform: translate(-2px, 0); }
  28%  { transform: translate(2px, 1px); }
  42%  { transform: translate(-1px, 0); }
  57%  { transform: translate(2px, -1px); }
  71%  { transform: translate(-2px, 0); }
  85%  { transform: translate(1px, 0); }
}

@keyframes g3-layer-a {
  0%   { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); color: var(--magenta); }
  14%  { opacity: 1; transform: translate(-9px, 1px); clip-path: inset(0 0 70% 0); color: var(--magenta); }
  28%  { opacity: 1; transform: translate(7px, -1px); clip-path: inset(20% 0 50% 0); color: var(--magenta); }
  42%  { opacity: 1; transform: translate(-6px, 2px); clip-path: inset(40% 0 30% 0); color: var(--magenta); }
  57%  { opacity: 1; transform: translate(8px, -1px); clip-path: inset(55% 0 15% 0); color: var(--magenta); }
  71%  { opacity: 1; transform: translate(-5px, 1px); clip-path: inset(70% 0 5% 0); color: var(--magenta); }
  85%  { opacity: 0.5; transform: translate(2px, 0); clip-path: inset(85% 0 0 0); color: var(--magenta); }
  100% { opacity: 0; transform: translate(0,0); }
}

@keyframes g3-layer-b {
  0%   { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); color: #6BE9FF; }
  14%  { opacity: 1; transform: translate(8px, -1px); clip-path: inset(60% 0 20% 0); color: #6BE9FF; }
  28%  { opacity: 1; transform: translate(-7px, 1px); clip-path: inset(35% 0 45% 0); color: #6BE9FF; }
  42%  { opacity: 1; transform: translate(9px, 0); clip-path: inset(15% 0 65% 0); color: #6BE9FF; }
  57%  { opacity: 1; transform: translate(-8px, 2px); clip-path: inset(45% 0 30% 0); color: #6BE9FF; }
  71%  { opacity: 1; transform: translate(6px, -1px); clip-path: inset(0 0 80% 0); color: #6BE9FF; }
  85%  { opacity: 0.5; transform: translate(-3px, 0); clip-path: inset(25% 0 60% 0); color: #6BE9FF; }
  100% { opacity: 0; transform: translate(0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .wordmark__career,
  .wordmark:hover .wordmark__badger,
  .wordmark:hover .wordmark__career::before,
  .wordmark:hover .wordmark__career::after,
  .wordmark:hover .wordmark__badger::before,
  .wordmark:hover .wordmark__badger::after {
    animation: none !important;
  }
}