/*
 * Asa visual identity — tokens, keyframes, reduced-motion guard.
 *
 * See docs/specs/asa-logo-spec.md for the full specification (geometry,
 * rationale, animation timing, indicator suite).
 *
 * Token strategy (spec §4.2):
 *   asa-primary  = host accent color (var(--color-accent)); no new token.
 *   asa-highlight = animated comet head; near-white for max contrast with
 *                   the brand-blue base stroke. New token.
 *   asa-fill      = tinted brand-blue background (badges, avatars, active
 *                   nav). New token.
 *   asa-text      = foreground text on asa-fill. New token.
 *
 * Selector convention follows tokens.css: dark values are :root defaults,
 * light values override under :root[data-mantine-color-scheme="light"].
 */

:root {
  --color-asa-highlight: #ffffff;
  --color-asa-fill:      #1a2b47;
  --color-asa-text:      #5ba3ff;
}

:root[data-mantine-color-scheme="light"] {
  --color-asa-highlight: #dce9fa;
  --color-asa-fill:      #e6f1fb;
  --color-asa-text:      #185fa5;
}

/* ─── Thinking animation — 8 staggered phosphor-decay layers ───────────────
 *
 * Cycle: 2.6s; easing strongly accelerates through the middle and decelerates
 * at the end so the head reads as a discrete "shot" rather than a crawl.
 * Each shot-N keyframe offsets its layer slightly along the path with a
 * progressively lower peak opacity so the layers stack into a smooth comet
 * trail. See spec §5.1–§5.3.
 */

@keyframes asa-shot-1 {
  0%   { stroke-dashoffset: 100;  opacity: 0; }
  8%   { stroke-dashoffset: 100;  opacity: 1.00; }
  65%  { stroke-dashoffset: 0;    opacity: 1.00; }
  72%  { stroke-dashoffset: -4.5; opacity: 0; }
  100% { stroke-dashoffset: -4.5; opacity: 0; }
}

@keyframes asa-shot-2 {
  0%    { stroke-dashoffset: 101.0; opacity: 0; }
  8%    { stroke-dashoffset: 101.0; opacity: 0.85; }
  65%   { stroke-dashoffset: 1.0;   opacity: 0.85; }
  72.7% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-3 {
  0%    { stroke-dashoffset: 102.0; opacity: 0; }
  8%    { stroke-dashoffset: 102.0; opacity: 0.70; }
  65%   { stroke-dashoffset: 2.0;   opacity: 0.70; }
  73.4% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-4 {
  0%    { stroke-dashoffset: 103.2; opacity: 0; }
  8%    { stroke-dashoffset: 103.2; opacity: 0.55; }
  65%   { stroke-dashoffset: 3.2;   opacity: 0.55; }
  74.2% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-5 {
  0%    { stroke-dashoffset: 104.7; opacity: 0; }
  8%    { stroke-dashoffset: 104.7; opacity: 0.40; }
  65%   { stroke-dashoffset: 4.7;   opacity: 0.40; }
  75.2% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-6 {
  0%    { stroke-dashoffset: 106.5; opacity: 0; }
  8%    { stroke-dashoffset: 106.5; opacity: 0.28; }
  65%   { stroke-dashoffset: 6.5;   opacity: 0.28; }
  76.4% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-7 {
  0%    { stroke-dashoffset: 108.8; opacity: 0; }
  8%    { stroke-dashoffset: 108.8; opacity: 0.18; }
  65%   { stroke-dashoffset: 8.8;   opacity: 0.18; }
  77.8% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

@keyframes asa-shot-8 {
  0%    { stroke-dashoffset: 112.0; opacity: 0; }
  8%    { stroke-dashoffset: 112.0; opacity: 0.10; }
  65%   { stroke-dashoffset: 12.0;  opacity: 0.10; }
  79.5% { stroke-dashoffset: 0;     opacity: 0; }
  100%  { stroke-dashoffset: 0;     opacity: 0; }
}

/* Apply each keyframe to its layer. The component sets stroke,
 * stroke-dasharray, and initial stroke-dashoffset inline so dash math
 * stays co-located with the layer ordering. */
.asa-mark.is-thinking .asa-h1 { animation: asa-shot-1 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h2 { animation: asa-shot-2 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h3 { animation: asa-shot-3 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h4 { animation: asa-shot-4 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h5 { animation: asa-shot-5 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h6 { animation: asa-shot-6 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h7 { animation: asa-shot-7 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }
.asa-mark.is-thinking .asa-h8 { animation: asa-shot-8 2.6s cubic-bezier(0.5, 0, 0.15, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .asa-mark.is-thinking .asa-h {
    animation: none;
    opacity: 0;
  }
}