/* Shared popup entrances. Animate only opacity and transform, then release the
   transform so fixed-position calendars and dropdowns keep viewport coordinates. */
:root{
  --popup-ease:cubic-bezier(.16,1,.3,1);
  --popup-duration:380ms;
  --popup-backdrop-duration:240ms;
  --popup-menu-duration:220ms;
  --dropdown-duration:300ms;
  --dropdown-ease:cubic-bezier(.22,1,.36,1);
}

@keyframes popup-backdrop-in{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes popup-panel-in{
  from{opacity:0;transform:translateY(14px) scale(.985);}
  to{opacity:1;transform:none;}
}
@keyframes popup-menu-in{
  from{opacity:0;transform:translateY(var(--popup-menu-offset,-5px)) scale(.985);}
  to{opacity:1;transform:none;}
}
@keyframes dropdown-menu-in{
  from{opacity:0;transform:translateY(var(--popup-menu-offset,-7px)) scale(.975);}
  to{opacity:1;transform:none;}
}

/* Existing show/hidden states remain responsible for visibility and interaction. */
.overlay.show,
.settings-modal-overlay:not(.hidden),
.admin-dialog[open]::backdrop{
  animation:popup-backdrop-in var(--popup-backdrop-duration) var(--popup-ease) backwards;
}
.overlay.show > :is(.modal,.subscription-modal),
.settings-modal-overlay:not(.hidden) > .settings-modal,
.admin-dialog[open]{
  transform-origin:50% 20%;
  animation:popup-panel-in var(--popup-duration) var(--popup-ease) backwards;
}

/* Retain the Add Trade dialog's existing soft dismissal. */
#tradeOverlay{
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease-in,visibility 0s linear 200ms;
}
#tradeOverlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:none;
}
#tradeOverlay > .modal{transition:opacity 180ms ease-in,transform 200ms ease-in;}
#tradeOverlay:not(.show) > .modal{opacity:0;transform:translateY(8px) scale(.99);}

/* Compact menus settle a little faster and emerge from their trigger edge. */
.app-select-menu,
.date-picker-calendar:not([hidden]),
.account-menu:not([hidden]),
.settings-tools-menu:not(.hidden),
.settings-action-menu:not(.hidden){
  transform-origin:var(--popup-menu-origin,top center);
  animation:dropdown-menu-in var(--dropdown-duration) var(--dropdown-ease) backwards;
}
.pretrade-prompt:not([hidden]) > .pretrade-prompt-panel:not([hidden]),
.admin-toast:not([hidden]){
  transform-origin:var(--popup-menu-origin,top center);
  animation:popup-menu-in var(--popup-menu-duration) var(--popup-ease) backwards;
}
.app-select-menu.opens-up{
  --popup-menu-offset:5px;
  --popup-menu-origin:bottom center;
}
.settings-tools-menu,
.settings-action-menu{--popup-menu-origin:top right;}
.settings-strategy-list > .settings-strategy-row:last-child .settings-action-menu{
  --popup-menu-offset:5px;
  --popup-menu-origin:bottom right;
}
.account-menu{
  --popup-menu-offset:5px;
  --popup-menu-origin:bottom left;
}
.pretrade-prompt-panel,
.admin-toast{
  --popup-menu-offset:6px;
  --popup-menu-origin:bottom right;
}

.screenshot-preview-overlay{
  transition:opacity var(--popup-backdrop-duration) var(--popup-ease);
}
.screenshot-preview-overlay.open > img{
  animation:popup-panel-in var(--popup-duration) var(--popup-ease) backwards;
}

/* Keep small validation and calendar hints quiet and readable. */
.field-validation-bubble.is-visible,
.cal-tooltip.show,
.trade-export-upgrade-hint:not([hidden]),
.market-currency-info:hover + .market-currency-tooltip,
.market-currency-info:focus + .market-currency-tooltip{
  animation:popup-backdrop-in var(--popup-menu-duration) var(--popup-ease) backwards;
}

@media(prefers-reduced-motion:reduce){
  .overlay.show,
  .settings-modal-overlay:not(.hidden),
  .admin-dialog[open]::backdrop,
  .overlay.show > :is(.modal,.subscription-modal),
  .settings-modal-overlay:not(.hidden) > .settings-modal,
  .admin-dialog[open],
  .app-select-menu,
  .date-picker-calendar:not([hidden]),
  .account-menu:not([hidden]),
  .settings-tools-menu:not(.hidden),
  .settings-action-menu:not(.hidden),
  .pretrade-prompt:not([hidden]) > .pretrade-prompt-panel:not([hidden]),
  .admin-toast:not([hidden]),
  .screenshot-preview-overlay.open > img,
  .field-validation-bubble.is-visible,
  .cal-tooltip.show,
  .trade-export-upgrade-hint:not([hidden]),
  .market-currency-info:hover + .market-currency-tooltip,
  .market-currency-info:focus + .market-currency-tooltip{animation:none;}
  #tradeOverlay,
  #tradeOverlay > .modal,
  .screenshot-preview-overlay,
  .field-validation-bubble,
  .cal-tooltip{transition:none;}
}