/* ============================================================
   RTM MOTION SYSTEM v1.0 — brand/motion.css
   RapidTriageME Design Language · 2026
   Inject AFTER brand-enforce.css on every page
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --dur-instant:  80ms;
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-crawl:   700ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.6, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 1. PAGE ENTER */
.page-enter { animation: pageEnter var(--dur-base) var(--ease-out) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. SKELETON LOADERS */
.skeleton {
  background: linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(0,196,212,.08) 50%,rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s var(--ease-in-out) infinite;
  border-radius: 6px;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skeleton-text  { height:14px; margin-bottom:8px; }
.skeleton-title { height:22px; width:60%; margin-bottom:12px; }
.skeleton-card  { height:80px; border-radius:12px; margin-bottom:12px; }
.skeleton-badge { height:24px; width:60px; border-radius:100px; display:inline-block; }

/* 3. PRIORITY PULSE */
.badge-p1,[data-priority="p1"] .badge { animation: pulseP1 2s var(--ease-in-out) infinite; }
@keyframes pulseP1 {
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}
.badge-p2,[data-priority="p2"] .badge { animation: pulseP2 3s var(--ease-in-out) infinite; }
@keyframes pulseP2 {
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.35)} 50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}
}

/* 4. LIVE DOT */
.live-dot {
  width:8px; height:8px; background:#00C4D4; border-radius:50%;
  display:inline-block; position:relative;
}
.live-dot::after {
  content:''; position:absolute; inset:-4px;
  border-radius:50%; border:2px solid #00C4D4;
  animation: livePing 1.4s var(--ease-out) infinite; opacity:0;
}
@keyframes livePing {
  0%  { transform:scale(.8); opacity:.8; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* 5. BUTTONS */
.btn, button, [role="button"] {
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled), button:hover:not(:disabled) {
  transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,196,212,.2);
}
.btn:active:not(:disabled), button:active:not(:disabled) {
  transform:translateY(0) scale(.98); box-shadow:none;
}
.btn:disabled, button:disabled { opacity:.45; cursor:not-allowed; }
.btn-loading { position:relative; color:transparent!important; pointer-events:none; }
.btn-loading::after {
  content:''; position:absolute; inset:0; margin:auto;
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin var(--dur-slow) linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* 6. CARDS HOVER */
.card, .issue-card, .metric-card, .report-card {
  transition: transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.card:hover, .issue-card:hover, .metric-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,196,212,.12),0 2px 8px rgba(0,0,0,.3);
  border-color:rgba(0,196,212,.35);
}

/* 7. FORM INPUTS */
input, textarea, select {
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:#00C4D4; box-shadow:0 0 0 3px rgba(0,196,212,.18);
}

/* 8. TOAST */
.toast, .alert, .notification { animation:toastIn var(--dur-base) var(--ease-spring) both; }
.toast.exit, .alert.exit      { animation:toastOut var(--dur-fast) var(--ease-sharp) forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateY(-12px) scale(.96)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateY(-8px);pointer-events:none} }

/* 9. MODAL */
.modal-backdrop { animation:fadeIn var(--dur-base) var(--ease-out) both; }
.modal-content  { animation:modalUp var(--dur-base) var(--ease-spring) both; }
.modal-backdrop.closing { animation:fadeOut var(--dur-fast) var(--ease-sharp) forwards; }
.modal-content.closing  { animation:modalDown var(--dur-fast) var(--ease-sharp) forwards; }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes fadeOut   { to{opacity:0} }
@keyframes modalUp   { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }
@keyframes modalDown { to{opacity:0;transform:translateY(16px)} }

/* 10. NAV ITEM ACTIVE INDICATOR */
.nav-item, .sidebar a {
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    padding-left var(--dur-fast) var(--ease-out);
}
.nav-item.active::before, .sidebar a.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:3px; background:#00C4D4; border-radius:0 2px 2px 0;
  animation:navIndicator var(--dur-base) var(--ease-spring) both;
}
@keyframes navIndicator { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} }

/* 11. AI TYPING DOTS */
.typing-dots span {
  display:inline-block; width:6px; height:6px;
  background:#00C4D4; border-radius:50%; margin:0 2px;
  animation:typingBounce 1.2s var(--ease-in-out) infinite;
}
.typing-dots span:nth-child(2){ animation-delay:.2s }
.typing-dots span:nth-child(3){ animation-delay:.4s }
@keyframes typingBounce {
  0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1}
}
.chat-msg { animation:msgIn var(--dur-base) var(--ease-spring) both; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} }

/* 12. PROGRESS BAR */
.progress-fill, .confidence-fill, .sig-fill {
  transition: width var(--dur-slow) var(--ease-out);
}
@keyframes fillBar { from{width:0%;opacity:.6} }

/* 13. STAGGERED TABLE ROWS */
.data-table tbody tr, .report-list li { animation:rowIn var(--dur-base) var(--ease-out) both; }
.data-table tbody tr:nth-child(1){animation-delay:0ms}
.data-table tbody tr:nth-child(2){animation-delay:40ms}
.data-table tbody tr:nth-child(3){animation-delay:80ms}
.data-table tbody tr:nth-child(4){animation-delay:120ms}
.data-table tbody tr:nth-child(5){animation-delay:160ms}
.data-table tbody tr:nth-child(n+6){animation-delay:200ms}
@keyframes rowIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

/* 14. METRIC COUNTER ROLL-UP */
.metric-value.counting { animation:countUp var(--dur-slow) var(--ease-out) both; }
@keyframes countUp { from{opacity:0;transform:translateY(12px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }

/* 15. PRIORITY QUEUE CARDS */
.priority-queue .issue-card { animation:cardSlideIn var(--dur-base) var(--ease-spring) both; }
.priority-queue .issue-card:nth-child(1){animation-delay:0ms}
.priority-queue .issue-card:nth-child(2){animation-delay:60ms}
.priority-queue .issue-card:nth-child(3){animation-delay:120ms}
.priority-queue .issue-card:nth-child(4){animation-delay:180ms}
.priority-queue .issue-card:nth-child(5){animation-delay:240ms}
.priority-queue .issue-card:nth-child(n+6){animation-delay:300ms}
@keyframes cardSlideIn { from{opacity:0;transform:translateX(20px) scale(.97)} to{opacity:1;transform:none} }

/* 16. DROPDOWN */
.dropdown, .popover, [role="menu"] {
  transform-origin:top left;
  animation:dropIn var(--dur-fast) var(--ease-spring) both;
}
@keyframes dropIn { from{opacity:0;transform:scale(.92) translateY(-6px)} to{opacity:1;transform:none} }

/* 17. SUCCESS / ERROR STATES */
.state-success { animation:successPop var(--dur-base) var(--ease-spring) both; }
.state-error   { animation:errorShake var(--dur-slow) var(--ease-in-out) both; }
@keyframes successPop { 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes errorShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* 18. AI SCORE RING */
.ai-score-ring {
  stroke-dasharray:283; stroke-dashoffset:283;
  animation:ringFill 1s var(--ease-out) .3s forwards;
  transform-origin:center; transform:rotate(-90deg);
}
@keyframes ringFill { to{stroke-dashoffset:var(--score-offset,0)} }

/* 19. SIDEBAR COLLAPSE */
.sidebar {
  transition: width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  overflow:hidden;
}
.sidebar.collapsed { width:0!important; opacity:0; }
.sidebar.collapsed * { visibility:hidden; }

/* 20. CODE BLOCK REVEAL */
.code-block, pre, .diff-block { animation:codeReveal var(--dur-slow) var(--ease-out) both; }
@keyframes codeReveal { from{opacity:0;max-height:0;overflow:hidden} to{opacity:1;max-height:800px} }
.diff-add { background:rgba(34,197,94,.08); border-left:3px solid rgba(34,197,94,.6); }
.diff-del { background:rgba(239,68,68,.08); border-left:3px solid rgba(239,68,68,.5); text-decoration:line-through; }

/* 21. SCROLL REVEAL (JS adds .visible via IntersectionObserver) */
.reveal { opacity:0; transform:translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.visible { opacity:1; transform:none; }

/* 22. SCAN LINE (loading state) */
.scan-line { position:relative; overflow:hidden; }
.scan-line::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,196,212,.06),rgba(0,196,212,.12),rgba(0,196,212,.06),transparent);
  animation:scanMove 2s var(--ease-in-out) infinite;
}
@keyframes scanMove { to{left:100%} }

/* 23. EMPTY STATE FLOAT */
.empty-state-icon, .onboarding-icon { animation:floatIcon 3s var(--ease-in-out) infinite; }
@keyframes floatIcon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* 24. DATA REFRESH FLASH */
.data-updated { animation:updateFlash var(--dur-slow) var(--ease-out) forwards; }
@keyframes updateFlash { 0%{background:rgba(0,196,212,.12)} 100%{background:transparent} }