/* ============================================================
   Yoshi motion vocabulary

   Five named motions. Linear or cubic-out only.
   Nothing bounces. Nothing overshoots.
   Import into any HTML alongside colors_and_type.css.
   ============================================================ */

/* 01 · The seam draws — the hairline crosses left→right at approval. */
@keyframes yo-seam-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.yo-seam-draw {
  display: block;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  animation: yo-seam-draw var(--dur-3, 320ms) linear forwards;
}
.yo-seam-draw[data-loop="1"] {
  animation: yo-seam-draw 1.8s linear infinite;
}

/* 02 · Pulse — the LIVE dot, the active automation, the pending row. */
@keyframes yo-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 var(--accent); }
  50%      { transform: scale(1.18); opacity: 0.7;  box-shadow: 0 0 0 5px rgba(0,0,0,0); }
}
.yo-pulse { animation: yo-pulse 2.4s ease-in-out infinite; border-radius: 999px; }

/* 03 · Numbers tick — character-level fade, never odometer-spin. */
@keyframes yo-tick {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yo-tick { display: inline-block; animation: yo-tick 280ms cubic-bezier(0.16, 1, 0.30, 1); }

/* 04 · Enter-from-below — for briefs, cards, suggested prompts. */
@keyframes yo-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yo-enter { animation: yo-enter 400ms cubic-bezier(0.16, 1, 0.30, 1) both; }
.yo-enter[data-delay="1"] { animation-delay: 80ms;  }
.yo-enter[data-delay="2"] { animation-delay: 160ms; }
.yo-enter[data-delay="3"] { animation-delay: 240ms; }
.yo-enter[data-delay="4"] { animation-delay: 320ms; }
.yo-enter[data-delay="5"] { animation-delay: 400ms; }
.yo-enter[data-delay="6"] { animation-delay: 480ms; }
.yo-enter[data-delay="7"] { animation-delay: 560ms; }
.yo-enter[data-delay="8"] { animation-delay: 640ms; }

/* 05 · Focus opens — the propose→execute overlay. */
@keyframes yo-focus-backdrop {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@keyframes yo-focus-card {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.yo-focus-backdrop { animation: yo-focus-backdrop 240ms cubic-bezier(0.16, 1, 0.30, 1) both; }
.yo-focus-card     { animation: yo-focus-card     320ms cubic-bezier(0.16, 1, 0.30, 1) both; }

/* 06 · Checkpoint fade-in — used in onboarding building step. */
@keyframes yo-checkpoint {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.yo-checkpoint { animation: yo-checkpoint 320ms cubic-bezier(0.16, 1, 0.30, 1) both; }

/* 07 · Marquee — the Bloomberg-style ticker. */
@keyframes yo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.yo-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: yo-marquee 90s linear infinite;
  will-change: transform;
}
.yo-marquee-track:hover { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .yo-seam-draw, .yo-pulse, .yo-tick, .yo-enter, .yo-focus-backdrop, .yo-focus-card, .yo-checkpoint, .yo-marquee-track {
    animation: none !important;
  }
}