/* The motion vocabulary. Three named animations.
   M.01 BREATHE  3s ease cycle   listening / idle / ambient presence.
   M.02 UTTER    1.1s alternating waveform  voice in / out.
   M.03 TICK     1s step-end blink  cursor / "thinking".
*/

@keyframes breathe {
  0%   { transform: scale(0.96); opacity: 0.55; }
  50%  { transform: scale(1.04); opacity: 0.95; }
  100% { transform: scale(0.96); opacity: 0.55; }
}

@keyframes breathe-ring {
  0%   { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes utter {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

@keyframes tick {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.m-breathe {
  animation: breathe var(--t-breathe) var(--ease-in-out) infinite;
}

.m-tick {
  animation: tick var(--t-tick) step-end infinite;
}

.m-utter-bar {
  transform-origin: bottom center;
  animation: utter var(--t-utter) var(--ease-in-out) infinite;
}

.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out-expo), transform var(--t-slow) var(--ease-out-expo);
}
.fade-up.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .m-breathe, .m-tick, .m-utter-bar { animation: none !important; }
  .fade-up { opacity: 1; transform: none; transition: opacity var(--t-ui) linear; }
}