/* Romano Battiti Design System — Animation Tokens */

:root {
  /* ── Easings ── */
  --ease-swipe:   cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out:     ease-out; /* @kind other */
  /* Damped spring, sampled: linear() is the only native way to get a spring
     curve (a cubic-bezier cannot exceed 1 and come back). Use it for motion
     that continues a gesture — dragging, reordering. */
  --ease-spring:  linear(0, 0.0380 4.2%, 0.1333 8.3%, 0.2616 12.5%, 0.4037 16.7%, 0.5451 20.8%, 0.6760 25.0%, 0.7902 29.2%, 0.8846 33.3%, 0.9585 37.5%, 1.0128 41.7%, 1.0496 45.8%, 1.0717 50.0%, 1.0819 54.2%, 1.0831 58.3%, 1.0780 62.5%, 1.0689 66.7%, 1.0576 70.8%, 1.0456 75.0%, 1.0340 79.2%, 1.0235 83.3%, 1.0146 87.5%, 1.0073 91.7%, 1.0017 95.8%, 1); /* @kind other */

  /* ── Durations ── */
  --dur-fast:   160ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   240ms; /* @kind other */
  --dur-modal:  180ms; /* @kind other */
  --dur-bounce: 420ms; /* @kind other */
  --dur-long:   700ms; /* @kind other */
}

/* ── Named keyframes (global, shared by components) ── */
@keyframes rb-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rb-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes rb-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rb-bounce-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes rb-mark-draw {
  from { transform: rotate(-1.5deg) scaleX(0); }
  to   { transform: rotate(-1.5deg) scaleX(1); }
}

@keyframes rb-mark-swipe {
  from { transform: rotate(-1.5deg) scaleX(0); opacity: 0; }
  to   { transform: rotate(-1.5deg) scaleX(1); opacity: 1; }
}

@keyframes rb-sheet-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Skeleton: opacity only, alternating. No sweeping gradient — a highlight
   travelling across a screenful of blocks is more movement than the content
   it stands in for. */
@keyframes rb-skeleton {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

/* Typing dots: a small bob plus opacity, staggered per dot by the component.
   The bob is 3px — enough to read as alive, not enough to be movement on the
   page. Under reduced motion only the opacity beat survives. */
@keyframes rb-typing {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}

/* Streaming caret: opacity, stepped so it snaps like a terminal cursor rather
   than breathing. No transform, so it is unchanged under reduced motion. */
@keyframes rb-caret {
  0%, 45%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* ── Reduced motion ──
   A system setting (iOS: Accessibility → Motion → Reduce Motion). People who
   turn it on often do so for vestibular disorders: translation, scale and
   bounce cause nausea. We do NOT remove the animation — a toast that appears
   instantly goes unnoticed — we reduce it to a short fade: same announcement,
   zero movement. Components need no changes: they reuse these same names. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 100ms; /* @kind other */
    --dur-base: 120ms; /* @kind other */
    --dur-slow: 120ms; /* @kind other */
    --dur-modal: 120ms; /* @kind other */
    --dur-bounce: 120ms; /* @kind other */
    --dur-long: 160ms; /* @kind other */
    --ease-bounce: ease-out; /* @kind other */
    --ease-spring: ease-out; /* @kind other */
    --ease-swipe: ease-out; /* @kind other */
  }
  @keyframes rb-toast-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rb-modal-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rb-sheet-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rb-bounce-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rb-mark-draw { from { opacity: 0; } to { transform: rotate(-1.5deg) scaleX(1); opacity: 1; } }
  @keyframes rb-mark-swipe{ from { opacity: 0; } to { transform: rotate(-1.5deg) scaleX(1); opacity: 1; } }
  /* A pulsing page is exactly what this setting asks you to stop. */
  @keyframes rb-skeleton  { from { opacity: 1; } to { opacity: 1; } }
  /* The dots keep their beat — it is the only thing saying work is happening —
     and lose the bob. */
  @keyframes rb-typing    { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
}