/* Motion confirms occasional state changes without moving the data being read. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

@keyframes workspace-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes workspace-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes workspace-popover-in {
  from { opacity: 0; scale: .97; }
  to { opacity: 1; scale: 1; }
}

@keyframes workspace-tooltip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Dialogs are occasional; full-screen image and editor surfaces stay still. */
.user-modal-backdrop:not([hidden]):not(.fullscreen-editor-backdrop):not(.evidence-preview-backdrop),
.template-modal-backdrop:not([hidden]):not(.evidence-preview-backdrop) {
  animation: workspace-backdrop-in 250ms var(--ease-out) both;
}

.user-modal-backdrop:not([hidden]):not(.fullscreen-editor-backdrop):not(.evidence-preview-backdrop) > :is(.user-modal, .data-center-account-modal, .data-center-thirty-modal),
.template-modal-backdrop:not([hidden]):not(.evidence-preview-backdrop) > :is(.template-modal, .day-detail-modal) {
  animation: workspace-modal-in 250ms var(--ease-out) both;
}

/* Menus appear near their trigger; the existing horizontal positioning is preserved. */
.data-range-popover:not([hidden]),
.notification-panel:not([hidden]),
.okr-person-dropdown[open] .okr-person-dropdown-menu {
  transform-origin: top center;
  animation: workspace-popover-in 180ms var(--ease-out) both;
}

.data-center-trend-tooltip:not([hidden]),
.data-center-chart-tooltip:not([hidden]) {
  animation: workspace-tooltip-in 125ms var(--ease-out) both;
}

/* Frequent tab changes only get a quick, contained state cue. */
.data-center-period-switch button,
#employeeOkrPanel .okr-workspace-switch > button {
  position: relative;
}

.data-center-period-switch button::after,
#employeeOkrPanel .okr-workspace-switch > button::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 4px;
  left: 18%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.5);
  transition: opacity 160ms var(--ease-in-out), transform 160ms var(--ease-in-out);
  pointer-events: none;
}

.data-center-period-switch button.active::after,
#employeeOkrPanel .okr-workspace-switch > button.active::after {
  opacity: .8;
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .data-center-account-trend-button,
  .data-center-mini-actions > button,
  #employeeOkrPanel .okr-person-switch button {
    transition: transform 140ms var(--ease-out);
  }

  .data-center-account-trend-button:hover,
  .data-center-mini-actions > button:hover,
  #employeeOkrPanel .okr-person-switch button:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-modal-backdrop:not([hidden]):not(.fullscreen-editor-backdrop):not(.evidence-preview-backdrop),
  .template-modal-backdrop:not([hidden]):not(.evidence-preview-backdrop),
  .user-modal-backdrop:not([hidden]):not(.fullscreen-editor-backdrop):not(.evidence-preview-backdrop) > :is(.user-modal, .data-center-account-modal, .data-center-thirty-modal),
  .template-modal-backdrop:not([hidden]):not(.evidence-preview-backdrop) > :is(.template-modal, .day-detail-modal),
  .data-range-popover:not([hidden]),
  .notification-panel:not([hidden]),
  .okr-person-dropdown[open] .okr-person-dropdown-menu {
    animation: workspace-tooltip-in 125ms var(--ease-out) both;
  }

  .data-center-period-switch button::after,
  #employeeOkrPanel .okr-workspace-switch > button::after {
    transition: opacity 125ms var(--ease-out);
    transform: none;
  }

  .data-center-account-trend-button,
  .data-center-mini-actions > button,
  #employeeOkrPanel .okr-person-switch button {
    transition: none;
  }

  .data-center-account-trend-button:hover,
  .data-center-mini-actions > button:hover,
  #employeeOkrPanel .okr-person-switch button:hover {
    transform: none;
  }
}