/* Motion — all enhancements gated behind prefers-reduced-motion: no-preference.
   Baseline content is always visible; hidden from-states live ONLY here. */

@media (prefers-reduced-motion: no-preference) {
  /* Signature: line-write reveal for the wordmark + header stats */
  .line-write {
    animation: line-write var(--dur-m) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  @keyframes line-write {
    from {
      clip-path: inset(0 100% 0 0);
      opacity: 0.4;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

  /* Columns slide onto their rails on first paint */
  .column.rails-in {
    animation: slide-on-rails var(--dur-m) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  @keyframes slide-on-rails {
    from {
      transform: translateX(18px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Card settles after a drop. The full-board repaint rebuilds the node, so the
     animation runs once per drop without JS cleanup. */
  .card.settle {
    animation: settle 240ms ease-in-out both;
  }
  @keyframes settle {
    0% {
      transform: scale(0.97);
    }
    60% {
      transform: scale(1.015);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Signature gag: Done stamp presses in with overshoot.
     The animation is re-triggered by JS adding .stamped after a commit, so a
     stamp re-rendering on every paint doesn't re-animate by itself. */
  .done-stamp.stamped {
    animation: stamp-press 260ms var(--ease) both;
  }
  @keyframes stamp-press {
    0% {
      transform: rotate(-14deg) scale(1.6);
      opacity: 0;
    }
    55% {
      transform: rotate(-7deg) scale(0.94);
      opacity: 1;
    }
    100% {
      transform: rotate(-8deg) scale(1);
      opacity: 0.9;
    }
  }

  /* Toasts slide up */
  .toast {
    animation: toast-up var(--dur-m) var(--ease) both;
  }
  @keyframes toast-up {
    from {
      transform: translateY(14px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .toast.leaving {
    animation: toast-out var(--dur-s) var(--ease) both;
  }
  @keyframes toast-out {
    to {
      transform: translateY(10px);
      opacity: 0;
    }
  }

  /* Modals press in; archive panel slides from the right */
  .modal {
    animation: modal-in var(--dur-m) var(--ease) both;
  }
  @keyframes modal-in {
    from {
      transform: translateY(10px) scale(0.985);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .overlay {
    animation: fade-in var(--dur-s) var(--ease) both;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }
  .archive-panel {
    animation: panel-in var(--dur-m) var(--ease) both;
  }
  @keyframes panel-in {
    from {
      transform: translateX(32px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }

  /* Archive rows reveal as a staggered log */
  .archive-item.line-write {
    animation-delay: calc(var(--i, 0) * 45ms);
  }

  /* Drag ghost tilts like a picked-up slip */
  .card.drag-ghost,
  .column.drag-ghost {
    transform: rotate(2.5deg) scale(1.03);
    box-shadow: var(--shadow-lift);
    opacity: 0.92;
  }
}

/* Reduced motion: neutralise everything this file adds, restore visibility */
@media (prefers-reduced-motion: reduce) {
  .line-write,
  .column.rails-in,
  .card.settle,
  .done-stamp,
  .toast,
  .toast.leaving,
  .modal,
  .overlay,
  .archive-panel,
  .card.drag-ghost,
  .column.drag-ghost {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  .done-stamp {
    transform: rotate(-8deg);
  }
  *,
  *::before,
  *::after {
    transition-duration: 1ms;
  }
}