/* ============================================================
   VALFORA — Motion Tokens
   
   Philosophy: motion over decoration. Every transition serves
   a functional purpose — never decorative loops.
   ============================================================ */

:root {
  /* ── Duration ────────────────────────────────────────────*/
  --duration-instant:  50ms;   /* @kind other */
  --duration-fast:    100ms;  /* @kind other */
  --duration-default: 200ms;  /* @kind other */
  --duration-slow:    250ms;  /* @kind other */
  --duration-enter:   300ms;  /* @kind other */
  --duration-skeleton: 1100ms; /* @kind other */

  /* ── Easing ──────────────────────────────────────────────*/
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);    /* @kind other */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-linear:  linear;                         /* @kind other */

  /* ── Composite transitions ───────────────────────────────*/
  --transition-default:   all var(--duration-default) var(--ease-default);
  --transition-bg:        background-color var(--duration-default) var(--ease-default);
  --transition-color:     color var(--duration-default) var(--ease-default);
  --transition-opacity:   opacity var(--duration-default) var(--ease-out);
  --transition-transform: transform var(--duration-default) var(--ease-default);
  --transition-drawer:    transform var(--duration-slow) var(--ease-out);
}

/* ── Keyframes ───────────────────────────────────────────── */

@keyframes valfora-spin {
  to { transform: rotate(360deg); }
}

@keyframes valfora-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes valfora-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes valfora-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes valfora-toast-enter {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}