/* Shared, short settling motion. Visibility, focus and actions stay native. */
:root { --view-ease: cubic-bezier(.22, .8, .22, 1); }

@keyframes view-forward {
  from { opacity: .35; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes view-back {
  from { opacity: .35; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes panel-reveal {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes menu-reveal {
  from { transform: translateY(-4px); }
  to { transform: none; }
}
@keyframes dialog-content-reveal {
  from { opacity: .45; }
  to { opacity: 1; }
}
@keyframes dialog-reveal {
  from { opacity: 1; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}


/* These persistent surfaces animate only when revealed, never on polling. */
#project-detail:not([hidden]),
#crew-activity:not([hidden]) { animation: view-forward 260ms var(--view-ease); }
#portfolio-view:not([hidden]),
#crew-houses-panel:not([hidden]) { animation: view-back 260ms var(--view-ease); }
#list-search-region:not([hidden]),
#crew-view-form:not([hidden]) { animation: panel-reveal 200ms var(--view-ease); }
.punch-more-menu:not([hidden]),
.detail-more-menu:not([hidden]) {
  transform-origin: top right;
  animation: menu-reveal 160ms var(--view-ease);
}
.punch-more-menu:not([hidden]) > *,
.detail-more-menu:not([hidden]) > * { animation: dialog-content-reveal 160ms ease-out; }
.list-filter button, .trade-filter button, .mode-switch button, .crew-tabs button {
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.document-summary-chevron { transition: transform 180ms var(--view-ease); }
.document-details[data-motion-expanded="false"] > .document-summary > .document-summary-chevron { transform: none; }
.list-section-chevron { transition: transform 180ms var(--view-ease); }

/* CSS-only fallback for surfaces without a source control. */
dialog[open] { animation: dialog-reveal 240ms var(--view-ease); }
dialog[open]:is(.markup-dialog, .document-viewer) { animation: dialog-content-reveal 180ms ease-out; }
dialog:not([open]), dialog:not([open])::backdrop { pointer-events: none; }

/* The surface expands from the initiating control; Safari does not need
   discrete display/overlay transitions to animate native dialogs. */
dialog[data-motion-dialog] { animation: none !important; transition: none; transform-origin: top left; }
dialog[data-motion-dialog][open] { opacity: 1; transform: none; }
dialog[data-motion-dialog] > * { animation: none !important; }
dialog[data-motion-dialog]::backdrop { transition: none; }
.punch-more-menu:not([hidden]), .detail-more-menu:not([hidden]),
.punch-more-menu:not([hidden]) > *, .detail-more-menu:not([hidden]) > * { animation: none; }
@media (max-width: 650px), (pointer: coarse) and (max-height: 650px) {
  /* Cover the area below a keyboard-sized sheet, including translucent iOS
     keyboard chrome. Reveal the list only while entering or leaving. */
  dialog:is(.add-dialog, .detail-dialog)::backdrop { background: var(--card); backdrop-filter: none; }
  dialog:is(.add-dialog, .detail-dialog)[data-motion-dialog]::backdrop { animation: sheet-backdrop-in 320ms var(--view-ease) both; }
  dialog:is(.add-dialog, .detail-dialog)[data-motion-closing]::backdrop { animation: sheet-backdrop-out 220ms var(--view-ease) both; }
}
@keyframes sheet-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

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