/* SI Hub motion layer: short, purposeful feedback without moving evidence while it is read. */
:root {
  --motion-fast: 190ms;
  --motion-standard: 400ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-spring: cubic-bezier(.2, .9, .28, 1.15);
}

@keyframes si-page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes si-item-enter {
  from { opacity: 0; transform: translateY(9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes si-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes si-dialog-enter {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes si-toast-enter {
  0% { opacity: 0; transform: translateY(-16px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes si-confirm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128, 201, 162, 0); }
  45% { box-shadow: 0 0 0 4px rgba(128, 201, 162, .16); }
}

@keyframes si-attention {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes si-case-tab-forward {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes si-case-tab-backward {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes si-tab-selected {
  0% { box-shadow: inset 0 0 0 1px rgba(227, 77, 70, 0); }
  55% { box-shadow: inset 0 0 0 1px rgba(227, 77, 70, .55); }
  100% { box-shadow: inset 0 0 0 1px rgba(227, 77, 70, 0); }
}

.motion-page-enter {
  animation: si-page-enter var(--motion-standard) var(--motion-ease) backwards;
}

.motion-item-enter {
  animation: si-item-enter var(--motion-standard) var(--motion-ease) backwards;
  animation-delay: calc(var(--motion-order, 0) * 48ms);
}

.motion-confirm { animation: si-confirm var(--motion-slow) var(--motion-ease); }
.motion-attention { animation: si-attention 520ms var(--motion-ease) 2; }

.case-tab-enter-forward {
  animation: si-case-tab-forward 360ms var(--motion-ease) backwards;
}

.case-tab-enter-backward {
  animation: si-case-tab-backward 360ms var(--motion-ease) backwards;
}

.case-cockpit-nav-item.active,
.case-cockpit-menu-item.active {
  animation: si-tab-selected 420ms var(--motion-ease) both;
}

.case-cockpit-nav-code,
.case-cockpit-menu-number,
.case-cockpit-nav-copy,
.case-cockpit-menu-copy {
  transition: color var(--motion-fast) ease-out, background-color var(--motion-fast) ease-out;
}

.modal-backdrop { animation: si-backdrop-enter var(--motion-fast) ease-out both; }
.modal-backdrop .modal { animation: si-dialog-enter var(--motion-standard) var(--motion-spring) both; }
.toast { animation: si-toast-enter var(--motion-standard) var(--motion-spring) both; }
.progress-fill { transition: width var(--motion-slow) var(--motion-ease); }

button,
.btn-primary,
.btn-secondary,
.nav a,
.case-cockpit-nav-item,
.case-cockpit-menu-item {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--motion-fast);
  transition-timing-function: ease-out;
}

button:not(:disabled):active,
.btn-primary:not(:disabled):active,
.btn-secondary:not(:disabled):active { transform: scale(.975); }

details[open] > :not(summary) {
  animation: si-page-enter var(--motion-standard) var(--motion-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}