/* Shared motion rhythm. Only presentation changes; actions never wait for animation. */
:root{
  --ws-motion-press:110ms;
  --ws-motion-fast:160ms;
  --ws-motion-page:200ms;
  --ws-motion-panel:240ms;
  --ws-ease-out:cubic-bezier(.22,1,.36,1);
  --ws-ease-state:cubic-bezier(.2,0,0,1);
}

@media(prefers-reduced-motion:no-preference){
  /* One animation per navigation, not per row or background refresh. No retained transform. */
  body.ws .page.active{animation:ws-page-in var(--ws-motion-page) var(--ws-ease-out)}

  body.ws :is(.header-icon-button,.secondary,#nav button,.ws-sidebar button,
    .daily-mode-tabs button,.daily-week-strip button,.daily-site-card,.ws-module-group button,
    .actions button,.status-button,.kebab,.m2-actions button,.drawer-close,
    .more-drawer-menu button,.invoice-quick-filters button,.worker-filter-chips button){
    transition:transform var(--ws-motion-press) var(--ws-ease-out),
      background-color var(--ws-motion-fast) var(--ws-ease-state),
      border-color var(--ws-motion-fast) var(--ws-ease-state),
      color var(--ws-motion-fast) var(--ws-ease-state);
  }
  body.ws :is(.header-icon-button,.secondary,#nav button,.ws-sidebar button,
    .daily-mode-tabs button,.daily-week-strip button,.daily-site-card,.ws-module-group button,
    .actions button,.status-button,.kebab,.m2-actions button,.drawer-close,
    .more-drawer-menu button,.invoice-quick-filters button,.worker-filter-chips button):active:not(:disabled){
    transform:scale(.975);
    transition-duration:70ms;
  }
  body.ws :is(input,select,textarea,.worker-pick){
    transition:border-color var(--ws-motion-fast) var(--ws-ease-state),
      background-color var(--ws-motion-fast) var(--ws-ease-state);
  }

  body.ws #modal[open]{animation:ws-dialog-in var(--ws-motion-panel) var(--ws-ease-out)}
  body.ws #modal[open]::backdrop{animation:ws-fade-in var(--ws-motion-fast) ease-out}
  body.ws .drawer-backdrop:not([hidden]){animation:ws-fade-in var(--ws-motion-fast) ease-out}
  body.ws .top-drawer{
    opacity:1;transform:translateX(0);
    transition:transform var(--ws-motion-panel) var(--ws-ease-out),
      opacity var(--ws-motion-fast) ease-out,visibility 0s;
  }
  body.ws .top-drawer:not(.open){
    opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none;
    transition:transform var(--ws-motion-fast) var(--ws-ease-state),
      opacity var(--ws-motion-fast) ease-in,visibility 0s linear var(--ws-motion-fast);
  }
  body.ws :is(.row-menu.open,.invoice-menu.open){
    transform-origin:top right;
    animation:ws-menu-in var(--ws-motion-fast) var(--ws-ease-out);
  }
  body.ws .row-menu.open-up{transform-origin:bottom right}
  body.ws #toast{
    pointer-events:none;
    transition:opacity var(--ws-motion-fast) ease-out,
      transform var(--ws-motion-panel) var(--ws-ease-out);
  }

  /* Native top-layer exit support: closed forms stop accepting input immediately.
     Older engines keep the keyframe entrance and the normal synchronous close. */
  @supports (transition-behavior:allow-discrete) and (overlay:auto){
    body.ws #modal{
      opacity:0;transform:translateY(12px) scale(.985);
      transition:opacity var(--ws-motion-fast) ease-out,
        transform var(--ws-motion-panel) var(--ws-ease-out),
        display var(--ws-motion-panel) allow-discrete,
        overlay var(--ws-motion-panel) allow-discrete;
    }
    body.ws #modal[open]{opacity:1;transform:none;animation:none}
    body.ws #modal:not([open]),body.ws #modal:not([open])::backdrop{pointer-events:none}
    body.ws #modal::backdrop{
      opacity:0;
      transition:opacity var(--ws-motion-fast) ease-out,
        display var(--ws-motion-panel) allow-discrete,
        overlay var(--ws-motion-panel) allow-discrete;
    }
    body.ws #modal[open]::backdrop{opacity:1;animation:none}
    body.ws .drawer-backdrop{
      opacity:0;
      transition:opacity var(--ws-motion-fast) ease-out,display var(--ws-motion-fast) allow-discrete;
    }
    body.ws .drawer-backdrop:not([hidden]){opacity:1;animation:none}
    body.ws .drawer-backdrop[hidden]{pointer-events:none}
    @starting-style{
      body.ws #modal[open]{opacity:0;transform:translateY(12px) scale(.985)}
      body.ws #modal[open]::backdrop,body.ws .drawer-backdrop:not([hidden]){opacity:0}
    }
  }
}

@keyframes ws-page-in{from{opacity:.55;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes ws-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ws-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ws-fade-in{from{opacity:0}to{opacity:1}}

/* Include top-layer backdrops, which the existing universal rule does not cover. */
@media(prefers-reduced-motion:reduce){
  body.ws #modal::backdrop{animation:none!important;transition:none!important}
}