:root {
  --motion-fast: 160ms;
  --motion-medium: 280ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: moeenPageIn 420ms var(--motion-ease) both;
  }

  .card,
  .opp-card,
  .table-wrap,
  .profile-view,
  .form,
  .headline,
  .hero,
  .panel {
    animation: moeenLiftIn 440ms var(--motion-ease) both;
  }

  tbody tr,
  .profile-item,
  .view-item {
    animation: moeenRowIn 360ms var(--motion-ease) both;
  }

  tbody tr:nth-child(2) { animation-delay: 45ms; }
  tbody tr:nth-child(3) { animation-delay: 90ms; }
  tbody tr:nth-child(4) { animation-delay: 135ms; }
  tbody tr:nth-child(5) { animation-delay: 180ms; }
  .opp-card:nth-child(2) { animation-delay: 45ms; }
  .opp-card:nth-child(3) { animation-delay: 90ms; }
  .opp-card:nth-child(4) { animation-delay: 135ms; }
  .opp-card:nth-child(5) { animation-delay: 180ms; }

  .btn,
  .tab,
  .chip,
  .filter-chip,
  .provider-btn,
  .fallback-btn,
  .nav-link,
  .link-btn,
  .applicant-trigger,
  .company-trigger,
  button,
  a {
    transition:
      transform var(--motion-fast) var(--motion-ease),
      box-shadow var(--motion-fast) var(--motion-ease),
      border-color var(--motion-fast) var(--motion-ease),
      background-color var(--motion-fast) var(--motion-ease),
      color var(--motion-fast) var(--motion-ease),
      opacity var(--motion-fast) var(--motion-ease);
  }

  .btn:hover,
  .tab:hover,
  .chip:hover,
  .filter-chip:hover,
  .provider-btn:hover,
  .fallback-btn:hover,
  .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(18, 18, 18, 0.12);
  }

  .btn:active,
  .tab:active,
  .chip:active,
  .filter-chip:active,
  .provider-btn:active,
  .fallback-btn:active,
  .nav-link:active {
    transform: translateY(0) scale(0.98);
  }

  .tag,
  .application-status,
  .status.show {
    animation: moeenSoftPulse 520ms var(--motion-ease) both;
  }

  .modal-backdrop {
    transition: opacity var(--motion-medium) var(--motion-ease), visibility var(--motion-medium) var(--motion-ease);
  }

  .modal-backdrop .modal-card {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity var(--motion-medium) var(--motion-ease), transform var(--motion-medium) var(--motion-ease);
  }

  .modal-backdrop.show .modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes moeenPageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes moeenLiftIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moeenRowIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moeenSoftPulse {
  0% { transform: scale(0.98); }
  55% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

html.moeen-motion-off *,
html.moeen-motion-off *::before,
html.moeen-motion-off *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}