/* Shared motion rhythm. Never animate page geometry or scroll positions. */
:root {
 --motion-fast: 150ms;
 --motion-normal: 240ms;
 --motion-reveal: 280ms;
 --motion-ease: cubic-bezier(.22, .61, .36, 1);
}

@keyframes workspace-fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes workspace-popup-in {
 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }
}

/* The overview starts its fade after synchronous card/chart rendering finishes,
   with a first painted frame before its data reveal. */
html #dashboard.view:not([hidden]) { animation: none; }

/* Fading a view must not make it a containing block for fixed controls. */
.view:not([hidden]), .settings-page:not([hidden]) {
 animation: workspace-fade-in var(--motion-reveal) var(--motion-ease);
}
.cards > .card, .bonus-summary-card, #chart .trend-lanes {
 animation: none;
}
html button:not(#workspacePinnedMenu), html a, html summary {
 transition: background-color var(--motion-fast) ease,
  color var(--motion-fast) ease, border-color var(--motion-fast) ease,
  box-shadow var(--motion-fast) ease;
}
html :is(.primary, .secondary):active:not(:disabled) { transform: none; }
html :is(input, select, textarea) {
 transition: border-color var(--motion-fast) ease,
  box-shadow var(--motion-fast) ease, background-color var(--motion-normal) ease,
  color var(--motion-normal) ease;
}
html :is(.panel, .card, .bonus-office-card, .bonus-person-card, .filters) {
 transition: background-color var(--motion-normal) ease,
  border-color var(--motion-normal) ease, color var(--motion-normal) ease,
  box-shadow var(--motion-normal) ease;
}
html :is(.clickable, .bonus-office-table tr, .bonus-table tr, .operation-legend-item) {
 transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
html main {
 transition: opacity var(--motion-reveal) var(--motion-ease),
  background-color var(--motion-normal) ease, color var(--motion-normal) ease;
}
html dialog[open]:not(#quickScopeDialog):not(#workspaceMonthDialog) {
 animation: workspace-popup-in var(--motion-normal) var(--motion-ease);
}
html dialog[open]::backdrop {
 animation: workspace-fade-in var(--motion-fast) ease;
}
/* Notice owns its entrance and collapse so content below moves smoothly too. */
html #notice:not([hidden]) { animation: none; }

/* Anchored and touch dialogs retain their exact coordinates and measured size. */
html #workspaceMonthDialog[open] {
 animation: workspace-fade-in var(--motion-fast) ease;
}
html :is(.hierarchy-suggestions, .column-filter-popup, .excel-filter-popup):not([hidden]) {
 animation: workspace-fade-in var(--motion-fast) ease;
}
html :is(#notice, .bonus-nop-warning, #bonusEditor, .bonus-summary-notice, .report-update-banner):not([hidden]) {
 animation: workspace-fade-in var(--motion-normal) ease;
}
html details[open] > :not(summary) {
 animation: workspace-fade-in var(--motion-normal) ease;
}

/* Native details animate in both directions where intrinsic sizing is supported.
   Older browsers retain immediate native toggling and the content fade above. */
@supports (interpolate-size: allow-keywords) and (content-visibility: hidden) {
 html details { interpolate-size: allow-keywords; }
 html details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition: block-size var(--motion-reveal) var(--motion-ease),
   opacity var(--motion-normal) ease,
   content-visibility var(--motion-reveal) allow-discrete;
 }
 html details[open]::details-content { block-size: auto; opacity: 1; }
 html details[open] > :not(summary) { animation: none; }
}

@media (max-width: 1000px) {
 html .sidebar {
  transition: transform var(--motion-reveal) var(--motion-ease),
   visibility var(--motion-reveal), background-color var(--motion-normal) ease,
   color var(--motion-normal) ease;
 }
}

/* This sheet must never override the iOS filter's stable viewport layout. */
@media (max-width: 700px), (pointer: coarse) {
 html #quickScopeDialog[open] { animation: none; transform: none; }
}

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