/* ==========================================================================
   AIDisruption.fyi logo: the "code editor" wordmark
   --------------------------------------------------------------------------
   "AIDisrupt" is typed, a teal cursor waits, and "ion.fyi" is the editor's
   grey suggestion. Hovering or focusing the logo accepts the suggestion.

   Drop this after design-system.css. It only uses the existing --ax- tokens.
   Markup: web/nav-logo.html (inline SVG). Optional typing intro: web/logo.js.
   ========================================================================== */

/* 1. Fix: `.ax-page a` out-ranks `.ax-logo`, which is why the current logo
      renders all teal. Matching the specificity puts the colors back. */
.ax-page a.ax-logo,
.ax-page a.ax-logo:hover { color: var(--ax-text); text-decoration: none; }

/* 2. Layout and size */
.ax-logo { display: inline-flex; align-items: center; line-height: 0; border-radius: var(--ax-r); }
.ax-logo__svg { display: block; height: 24px; width: auto; overflow: visible; }

/* 3. Colors, straight from the design tokens */
.ax-logo__typed { fill: var(--ax-text); }
.ax-logo__caret { fill: var(--ax-teal); }
.ax-logo__ghost { fill: var(--ax-border-muted); transition: fill .12s ease-out; }

/* 4. Hover or keyboard focus accepts the suggestion: the ghost text fills in
      and the cursor jumps to the end, the way Tab does in an editor. */
.ax-logo:hover .ax-logo__ghost,
.ax-logo:focus-visible .ax-logo__ghost { fill: var(--ax-text); }
.ax-logo:hover .ax-logo__caret,
.ax-logo:focus-visible .ax-logo__caret { transform: translateX(4170px); }

/* 5. On dark surfaces (the dark footer, or anywhere you add .ax-logo--on-dark) */
.ax-footer--dark .ax-logo__typed, .ax-logo--on-dark .ax-logo__typed { fill: #F4F6F5; }
.ax-footer--dark .ax-logo__caret, .ax-logo--on-dark .ax-logo__caret { fill: var(--ax-teal-mid); }
.ax-footer--dark .ax-logo__ghost, .ax-logo--on-dark .ax-logo__ghost { fill: #6B7684; }
.ax-footer--dark .ax-logo:hover .ax-logo__ghost, .ax-logo--on-dark:hover .ax-logo__ghost { fill: #F4F6F5; }

/* The footer brand slot runs a little smaller than the nav */
.ax-footer__brand .ax-logo__svg { height: 22px; }

/* 6. Phones: a touch smaller so the nav keeps its two-row layout */
@media (max-width: 640px) {
  .ax-logo__svg { height: 20px; }
}

/* 7. Optional typing intro. logo.js adds .ax-logo--typing once per visit.
      0.6s pause, 90ms per letter, then the suggestion fades in and the
      cursor blinks three times. */
.ax-logo--typing .ax-logo__typed { animation: ax-logo-in .01s linear both; }
.ax-logo--typing .ax-logo__t1 { animation-delay: .69s; }
.ax-logo--typing .ax-logo__t2 { animation-delay: .78s; }
.ax-logo--typing .ax-logo__t3 { animation-delay: .87s; }
.ax-logo--typing .ax-logo__t4 { animation-delay: .96s; }
.ax-logo--typing .ax-logo__t5 { animation-delay: 1.05s; }
.ax-logo--typing .ax-logo__t6 { animation-delay: 1.14s; }
.ax-logo--typing .ax-logo__t7 { animation-delay: 1.23s; }
.ax-logo--typing .ax-logo__t8 { animation-delay: 1.32s; }
.ax-logo--typing .ax-logo__t9 { animation-delay: 1.41s; }
.ax-logo--typing .ax-logo__caret {
  animation: ax-logo-move .81s steps(9, end) .6s both, ax-logo-blink 1.06s linear 1.61s 3;
}
.ax-logo--typing .ax-logo__ghost { animation: ax-logo-in .35s ease-out 1.56s both; }

@keyframes ax-logo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-logo-move { from { transform: translateX(-5400px); } to { transform: none; } }
@keyframes ax-logo-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ax-logo--typing .ax-logo__typed,
  .ax-logo--typing .ax-logo__caret,
  .ax-logo--typing .ax-logo__ghost { animation: none; }
  .ax-logo__ghost { transition: none; }
}

/* 8. Optional live-text version (web/text-logo.html). Needs Source Code Pro
      from web/fonts-addition.css. Use it where an inline SVG is awkward. */
.ax-logo-text {
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 650; font-size: 24px; line-height: 1; letter-spacing: 0;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.ax-page a.ax-logo-text { color: var(--ax-text); text-decoration: none; }
.ax-logo-text__caret {
  display: inline-block; width: .07em; height: 1em; margin: 0 .045em;
  background: var(--ax-teal); border-radius: .01em;
}
.ax-logo-text__ghost { color: var(--ax-border-muted); }
.ax-logo-text:hover .ax-logo-text__ghost,
.ax-logo-text:focus-visible .ax-logo-text__ghost { color: var(--ax-text); }