/*
  ReactBits-inspired global motion layer.
  Rollback note: remove this file and the /static/motion_layer.css link in app/main.py.
  Scope: visual feedback only; no layout, data, route, or business behavior changes.
*/

:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-spring: cubic-bezier(.18, .9, .28, 1.12);
}

@media (prefers-reduced-motion: no-preference) {
  .page-shell > .hero,
  .page-shell > .dashboard-hero,
  .page-shell > .app-page-hero,
  .page-shell > .result-hero,
  .page-shell > .system-status-hero,
  .page-shell > h1 {
    animation: motion-page-enter 520ms var(--motion-ease) both;
  }

  .dashboard-panel,
  .data-panel,
  .workspace-form,
  .upload-side-panel,
  .ledger-toolbar,
  .card,
  .metric-card,
  .compact-metric,
  .result-summary-grid > *,
  .health-card,
  .system-config-grid > *,
  body > .page-shell > ul,
  table {
    animation: motion-surface-enter 560ms var(--motion-ease) both;
  }

  .dashboard-panel:nth-of-type(2),
  .data-panel:nth-of-type(2),
  .card:nth-of-type(2),
  table:nth-of-type(2) {
    animation-delay: 55ms;
  }

  .dashboard-panel:nth-of-type(3),
  .data-panel:nth-of-type(3),
  .card:nth-of-type(3),
  table:nth-of-type(3) {
    animation-delay: 95ms;
  }

  .metric-card,
  .compact-metric,
  .quick-card,
  .side-info-card,
  .side-flow-card,
  .upload-picker-card,
  .review-field,
  .health-card,
  .notification-item {
    transition:
      transform var(--motion-base) var(--motion-spring),
      box-shadow var(--motion-base) var(--motion-ease),
      border-color var(--motion-base) var(--motion-ease),
      background var(--motion-base) var(--motion-ease),
      color var(--motion-base) var(--motion-ease);
  }

  .metric-card:hover,
  .compact-metric:hover,
  .side-info-card:hover,
  .side-flow-card:hover,
  .upload-picker-card:hover,
  .review-field:hover,
  .health-card:hover {
    transform: translateY(-2px) scale(1.006);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
  }

  body.page-upload .workspace-form,
  body.page-upload .review-field,
  body.page-upload .upload-picker-card,
  body.page-upload .side-info-card,
  body.page-upload .side-flow-card {
    transition:
      border-color var(--motion-base) var(--motion-ease),
      box-shadow var(--motion-base) var(--motion-ease),
      background var(--motion-base) var(--motion-ease);
  }

  body.page-upload .workspace-form:hover,
  body.page-upload .review-field:hover,
  body.page-upload .upload-picker-card:hover,
  body.page-upload .side-info-card:hover,
  body.page-upload .side-flow-card:hover {
    transform: none;
  }

  .finance-overview-card:hover {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
  }

  .quick-card:hover,
  .notification-item:hover {
    transform: translateY(-2px) scale(1.01);
  }

  button,
  .btn,
  .quick-submit-button,
  .action-link,
  .secondary-btn,
  .export-link,
  .nav-links a,
  .floating-upload {
    transition:
      transform var(--motion-fast) var(--motion-spring),
      box-shadow var(--motion-base) var(--motion-ease),
      background var(--motion-base) var(--motion-ease),
      color var(--motion-base) var(--motion-ease),
      border-color var(--motion-base) var(--motion-ease),
      opacity var(--motion-base) var(--motion-ease);
  }

  button:active,
  .btn:active,
  .quick-submit-button:active,
  .action-link:active,
  .secondary-btn:active,
  .export-link:active,
  .nav-links a:active,
  .floating-upload:active {
    transform: scale(0.975);
  }

  input,
  select,
  textarea {
    transition:
      border-color var(--motion-base) var(--motion-ease),
      box-shadow var(--motion-base) var(--motion-ease),
      background var(--motion-base) var(--motion-ease);
  }

  tbody tr {
    transition: background var(--motion-base) var(--motion-ease);
  }

  .status-badge,
  .badge,
  .status-chip,
  .metric-trend,
  .currency-breakdown-token,
  .currency-share-item {
    transition:
      transform var(--motion-fast) var(--motion-spring),
      background var(--motion-base) var(--motion-ease),
      color var(--motion-base) var(--motion-ease);
  }

  .status-badge:hover,
  .badge:hover,
  .status-chip:hover,
  .metric-trend:hover,
  .currency-breakdown-token:hover,
  .currency-share-item:hover {
    transform: scale(1.035);
  }
}

@keyframes motion-page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motion-surface-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell > .hero,
  .page-shell > .dashboard-hero,
  .page-shell > .app-page-hero,
  .page-shell > .result-hero,
  .page-shell > .system-status-hero,
  .page-shell > h1,
  .dashboard-panel,
  .data-panel,
  .workspace-form,
  .upload-side-panel,
  .ledger-toolbar,
  .card,
  .metric-card,
  .compact-metric,
  .result-summary-grid > *,
  .health-card,
  .system-config-grid > *,
  body > .page-shell > ul,
  table {
    animation: none !important;
  }
}