/* Micro-Motion Library V1 (D32, Working Presence 2.0).
 *
 * One small animated icon per working-card / voice-activity step: a SYMBOL
 * (the still glyph, drawn once in activityMotion.js's sprite and referenced
 * here through <use>) crossed with an ACTION overlay (the only thing that
 * ever moves, built as plain light-DOM siblings of the <use> so this
 * stylesheet can always reach it -- content pulled in through <use> is a
 * separate instance tree that per-instance CSS animation cannot address
 * reliably). Never the Ghost figure itself.
 *
 * Rules of the road: transform/opacity only, currentColor + --am-accent for
 * tone, one calm loop (1.4-2.6s) per element, and a resting (non-animated)
 * pose that already reads as a complete, sensible icon -- every base am-ov-*
 * rule below is exactly its @keyframes' 0%/100%, so nothing jumps when an
 * icon starts, stops or is paused mid-loop.
 */

.am {
  --am-size: 20px;
  display: inline-flex;
  width: var(--am-size);
  height: var(--am-size);
  flex: none;
  color: var(--light-cyan);
  --am-accent: var(--light-violet);
}

.am[data-tone='decision'] {
  color: var(--warn);
  --am-accent: var(--warn);
}

.am[data-tone='problem'] {
  color: var(--error);
  --am-accent: var(--error);
}

.am svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Overlay elements transform relative to their own centre and take the tone
   accent. Filled variants (dots, the calendar highlight, the orbit/beam dot)
   opt back into a flat fill through .am-ov-fill. */
.am-ov {
  transform-box: fill-box;
  transform-origin: center;
  stroke: var(--am-accent);
}

.am-ov-fill {
  fill: var(--am-accent);
  stroke: none;
}

/* -----------------------------------------------------------------------
   search -- am-scan: a line sweeping once through the icon. document adds
   am-pages (two pages rising); research swaps in am-beam instead.
   ----------------------------------------------------------------------- */
.am-ov-scan {
  opacity: 0.4;
  transform: translateY(0);
}
.am[data-action='search']:not(.am--static) .am-ov-scan {
  animation-name: am-scan;
  animation-duration: 2.2s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-scan {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(8px);
  }
}

.am-ov-page {
  opacity: 0.5;
  transform: translateY(0);
}
.am[data-action='search']:not(.am--static) .am-ov-page-1 {
  animation-name: am-pages;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
.am[data-action='search']:not(.am--static) .am-ov-page-2 {
  animation-name: am-pages;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
  animation-delay: 0.3s;
}
@keyframes am-pages {
  0%,
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2.2px);
  }
}

.am-ov-beam {
  opacity: 0.85;
  transform: translate(0, 0);
}
.am[data-action='search']:not(.am--static) .am-ov-beam {
  animation-name: am-beam;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-beam {
  0%,
  100% {
    opacity: 0.85;
    transform: translate(0, 0);
  }
  33% {
    opacity: 1;
    transform: translate(6px, -11px);
  }
  66% {
    opacity: 1;
    transform: translate(12px, 0);
  }
}

/* -----------------------------------------------------------------------
   read -- am-lines: three short lines redrawing themselves. calendar swaps
   in am-cell instead: a highlight stepping across the day grid.
   ----------------------------------------------------------------------- */
.am-ov-line {
  opacity: 0.8;
  transform: scaleX(1);
  transform-origin: left center;
}
.am[data-action='read']:not(.am--static) .am-ov-line-1 {
  animation-name: am-lines;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
.am[data-action='read']:not(.am--static) .am-ov-line-2 {
  animation-name: am-lines;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
}
.am[data-action='read']:not(.am--static) .am-ov-line-3 {
  animation-name: am-lines;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
}
@keyframes am-lines {
  0%,
  100% {
    opacity: 0.8;
    transform: scaleX(1);
  }
  45% {
    opacity: 0.25;
    transform: scaleX(0.2);
  }
}

.am-ov-cell {
  opacity: 0.5;
  transform: translate(0, 0);
}
.am[data-action='read']:not(.am--static) .am-ov-cell {
  animation-name: am-cell;
  animation-duration: 2.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-cell {
  0%,
  100% {
    opacity: 0.5;
    transform: translate(0, 0);
  }
  25% {
    opacity: 0.9;
    transform: translate(3.8px, 0);
  }
  50% {
    opacity: 0.9;
    transform: translate(7.6px, 0);
  }
  75% {
    opacity: 0.7;
    transform: translate(3.8px, 3.2px);
  }
}

/* -----------------------------------------------------------------------
   attach -- am-clip: a paper clip settling into place.
   ----------------------------------------------------------------------- */
.am-ov-clip {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}
.am[data-action='attach']:not(.am--static) .am-ov-clip {
  animation-name: am-clip;
  animation-duration: 2s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-clip {
  0%,
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  40% {
    opacity: 0.5;
    transform: translate(1.3px, -1.5px) rotate(-9deg);
  }
  70% {
    opacity: 1;
    transform: translate(0, 0) rotate(3deg);
  }
}

/* -----------------------------------------------------------------------
   compose (any symbol) -- am-dots: three dots pulsing in sequence.
   ----------------------------------------------------------------------- */
.am-ov-dot {
  opacity: 0.35;
  transform: scale(0.85);
}
.am[data-action='compose']:not(.am--static) .am-ov-dot-1 {
  animation-name: am-dots;
  animation-duration: 1.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
.am[data-action='compose']:not(.am--static) .am-ov-dot-2 {
  animation-name: am-dots;
  animation-duration: 1.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
}
.am[data-action='compose']:not(.am--static) .am-ov-dot-3 {
  animation-name: am-dots;
  animation-duration: 1.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
}
@keyframes am-dots {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* -----------------------------------------------------------------------
   wait -- am-ring: approval's amber ring breathing, plus a fainter second
   stroke (am-ring-glow) for glow. generic idles as am-orbit instead: a dot
   circling the plain ring drawn in the sprite.
   ----------------------------------------------------------------------- */
.am-ov-ring {
  opacity: 0.4;
  transform: scale(0.96);
}
.am[data-action='wait']:not(.am--static) .am-ov-ring {
  animation-name: am-ring;
  animation-duration: 2.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-ring {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

.am-ov-ring-glow {
  opacity: 0.12;
  transform: scale(1.02);
}
.am[data-action='wait']:not(.am--static) .am-ov-ring-glow {
  animation-name: am-ring-glow;
  animation-duration: 2.6s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-ring-glow {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(1.02);
  }
  50% {
    opacity: 0.32;
    transform: scale(1.12);
  }
}

.am-ov-orbit {
  opacity: 0.9;
  transform: translate(0, 0);
}
.am[data-action='wait']:not(.am--static) .am-ov-orbit {
  animation-name: am-orbit;
  animation-duration: 2.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes am-orbit {
  0% {
    transform: translate(0, 0);
  }
  12.5% {
    transform: translate(4.95px, 2.05px);
  }
  25% {
    transform: translate(7px, 7px);
  }
  37.5% {
    transform: translate(4.95px, 11.95px);
  }
  50% {
    transform: translate(0, 14px);
  }
  62.5% {
    transform: translate(-4.95px, 11.95px);
  }
  75% {
    transform: translate(-7px, 7px);
  }
  87.5% {
    transform: translate(-4.95px, 2.05px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* -----------------------------------------------------------------------
   send -- am-arrow: a short forward arc, then a deliberate pause.
   ----------------------------------------------------------------------- */
.am-ov-arrow {
  opacity: 0.85;
  transform: translateX(0);
}
.am[data-action='send']:not(.am--static) .am-ov-arrow {
  animation-name: am-arrow;
  animation-duration: 2.2s;
  animation-timing-function: var(--ease-ambient);
  animation-iteration-count: infinite;
}
@keyframes am-arrow {
  0% {
    opacity: 0.85;
    transform: translateX(0);
  }
  22% {
    opacity: 1;
    transform: translateX(2.4px);
  }
  40%,
  82% {
    opacity: 0;
    transform: translateX(4.6px);
  }
  100% {
    opacity: 0.85;
    transform: translateX(0);
  }
}

/* -----------------------------------------------------------------------
   State: pause on tab hide, force-static, reduced motion. animation-name/
   -duration/-timing-function/-iteration-count above are set as longhands
   (never the `animation` shorthand) specifically so they never reset
   animation-play-state -- that stays this rule's alone to set.
   ----------------------------------------------------------------------- */
html[data-motion-paused] .am * {
  animation-play-state: paused;
}

.am--static * {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .am * {
    animation: none !important;
  }
}