/* Codex Phase 2.2: smooth motion polish
   Loaded after typography to make interactions feel calmer and less jumpy. */

:root {
  --cv-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cv-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --cv-duration-fast: 120ms;
  --cv-duration-normal: 190ms;
  --cv-duration-slow: 280ms;
  --cv-hover-lift: -1px;
}

html {
  scroll-behavior: smooth;
}

.app-root {
  animation: cv-app-enter var(--cv-duration-slow) var(--cv-ease-soft) both;
}

.cv-main > .cv-topbar,
.cv-main > .stack,
.login-card,
.login-hero,
.card,
.overview-hero-card {
  animation: cv-content-enter var(--cv-duration-slow) var(--cv-ease-soft) both;
}

.cv-main > .stack {
  animation-delay: 35ms;
}

.button,
.cv-nav-item,
.metric-card,
.entity-row,
.login-highlight-grid > div,
.site-tab,
.theme-toggle button,
.badge,
.table-wrap,
.field input,
.field select,
.form input,
.form select,
.input,
.stack > input[type="search"] {
  transition-property: background-color, border-color, box-shadow, color, filter, opacity, transform;
  transition-duration: var(--cv-duration-normal);
  transition-timing-function: var(--cv-ease-standard);
  will-change: transform;
}

.button:hover,
.metric-card:hover,
.entity-row:hover,
.login-highlight-grid > div:hover,
.site-tab:hover {
  transform: translateY(var(--cv-hover-lift));
}

.cv-nav-item:hover {
  transform: translateX(2px);
}

.button:active,
.cv-nav-item:active,
.site-tab:active,
.theme-toggle button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--cv-duration-fast);
}

.cv-nav-item:active {
  transform: translateX(1px) scale(0.99);
}

.button:hover {
  box-shadow: 0 14px 28px rgba(29, 78, 216, 0.16);
}

.button.ghost:hover,
.button.secondary:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .button.ghost:hover,
[data-theme="dark"] .button.secondary:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.metric-card:hover,
.entity-row:hover,
.login-highlight-grid > div:hover {
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .entity-row:hover,
[data-theme="dark"] .login-highlight-grid > div:hover {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.cv-topbar,
.cv-sidebar,
.card,
.overview-hero-card,
.metric-card,
.table-wrap,
.entity-row,
.empty-state,
.setup-box,
.site-tabs {
  transition: background-color var(--cv-duration-normal) var(--cv-ease-standard),
    border-color var(--cv-duration-normal) var(--cv-ease-standard),
    box-shadow var(--cv-duration-normal) var(--cv-ease-standard),
    transform var(--cv-duration-normal) var(--cv-ease-standard);
}

.data-table tbody tr {
  transition: background-color var(--cv-duration-fast) var(--cv-ease-standard),
    color var(--cv-duration-fast) var(--cv-ease-standard);
}

.badge.success,
.badge.warning,
.badge.danger {
  transition-duration: var(--cv-duration-normal);
}

.theme-toggle button[aria-pressed="true"] {
  transition-duration: var(--cv-duration-normal);
}

:focus-visible {
  transition: outline-color var(--cv-duration-fast) var(--cv-ease-standard),
    box-shadow var(--cv-duration-fast) var(--cv-ease-standard);
}

@keyframes cv-app-enter {
  from {
    opacity: 0.96;
  }
  to {
    opacity: 1;
  }
}

@keyframes cv-content-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 920px) {
  :root {
    --cv-hover-lift: 0px;
  }

  .cv-nav-item:hover {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app-root,
  .cv-main > .cv-topbar,
  .cv-main > .stack,
  .login-card,
  .login-hero,
  .card,
  .overview-hero-card {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .button:hover,
  .cv-nav-item:hover,
  .metric-card:hover,
  .entity-row:hover,
  .login-highlight-grid > div:hover,
  .site-tab:hover,
  .button:active,
  .cv-nav-item:active,
  .site-tab:active,
  .theme-toggle button:active {
    transform: none !important;
  }
}