:root {
  --erp-motion-fast: 180ms;
  --erp-motion-base: 240ms;
  --erp-motion-slow: 320ms;
  --erp-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --erp-motion-ease-out: cubic-bezier(.2, .7, .3, 1);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: erp-page-leave var(--erp-motion-base) var(--erp-motion-ease) both;
}

::view-transition-new(root) {
  animation: erp-page-enter var(--erp-motion-slow) var(--erp-motion-ease-out) both;
}

@keyframes erp-page-enter {
  from { opacity: .88; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

@keyframes erp-page-leave {
  from { opacity: 1; }
  to { opacity: .96; }
}

@keyframes erp-reveal {
  from { opacity: .72; transform: translateY(4px) scale(.998); }
  to { opacity: 1; transform: none; }
}

@keyframes erp-dialog-enter {
  from { opacity: .35; transform: translateY(4px) scale(.995); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  html.erp-motion-ready body.erp-page > .app,
  html.erp-motion-ready body.erp-page > .portal,
  html.erp-motion-ready body.erp-page > .management-shell,
  html.erp-motion-ready body.erp-page > .admin-center,
  html.erp-motion-ready body.erp-page > .account-shell {
    animation: erp-page-enter var(--erp-motion-slow) var(--erp-motion-ease-out) both;
  }

  .erp-page .erp-motion-reveal {
    animation: erp-reveal var(--erp-motion-base) var(--erp-motion-ease-out) both;
  }

  .erp-page dialog[open] {
    animation: erp-dialog-enter var(--erp-motion-slow) var(--erp-motion-ease-out) both;
  }

  .erp-page dialog[open]::backdrop {
    animation: erp-page-leave var(--erp-motion-base) ease-out reverse both;
  }
}

.erp-page :where(a, button, [role="button"], input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

.erp-page :where(a, button, [role="button"], summary):not(:disabled) {
  transition:
    color var(--erp-motion-fast) ease,
    background-color var(--erp-motion-fast) ease,
    border-color var(--erp-motion-fast) ease,
    box-shadow var(--erp-motion-base) ease,
    opacity var(--erp-motion-fast) ease,
    transform var(--erp-motion-fast) var(--erp-motion-ease);
}

.erp-page :where(input, select, textarea) {
  transition:
    border-color var(--erp-motion-fast) ease,
    box-shadow var(--erp-motion-fast) ease,
    background-color var(--erp-motion-fast) ease;
}

.erp-page :where(.nav-item, .management-tabs button, .view-switch button):active,
.erp-page :where(.primary, .btn-primary, .quick-add, .account-card button):active {
  transform: scale(.99);
}

.erp-page :where(.lead-card, .case-card, .task-card, .column, .module-card, .admin-card, .account-card, .workday-item, .birthday-person) {
  transition:
    border-color var(--erp-motion-fast) ease,
    box-shadow var(--erp-motion-base) ease,
    opacity var(--erp-motion-fast) ease,
    transform var(--erp-motion-base) var(--erp-motion-ease);
}

.erp-page :where(.lead-card, .case-card, .task-card, .module-card, .admin-card, .workday-item, .birthday-person):hover {
  transform: translateY(-1px);
}

.erp-page :where(.notice, .admin-toast, .toast) {
  transition:
    opacity var(--erp-motion-base) ease,
    transform var(--erp-motion-base) var(--erp-motion-ease-out);
}

.erp-page :where(.sidebar, .portal-header, .management-header) {
  transition:
    box-shadow var(--erp-motion-base) ease,
    background-color var(--erp-motion-base) ease;
}

.erp-page :focus-visible {
  transition: outline-offset var(--erp-motion-fast) ease;
  outline-offset: 3px;
}

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

  ::view-transition-old(root),
  ::view-transition-new(root),
  .erp-page *,
  .erp-page *::before,
  .erp-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}