/* App motion layer — docs/superpowers/specs/2026-09-26-app-motion-layer-design.md.
   Loaded after every feature stylesheet. Subtle and fast: shared tokens only. */
@keyframes motion-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
@keyframes motion-leave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes motion-pop{from{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes motion-landed{0%{opacity:0;transform:translateY(6px);box-shadow:0 0 0 3px rgba(0,0,0,.16)}35%{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(0,0,0,.16)}100%{box-shadow:0 0 0 3px rgba(0,0,0,0)}}
@keyframes motion-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes motion-progress{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes motion-subnav{from{opacity:0;max-height:0;transform:translateY(-4px)}to{opacity:1;max-height:480px;transform:none}}

.motion-enter{animation:motion-enter var(--motion-base) var(--ease-out) both}
.motion-leave{animation:motion-leave var(--motion-base) var(--ease-out) both;pointer-events:none}
.motion-pop{animation:motion-pop var(--motion-base) var(--ease-out) both}
.motion-landed{animation:motion-landed 600ms var(--ease-out) both}
.motion-shake{animation:motion-shake 360ms var(--ease-standard) both}

.pruefung-subnav.motion-open{overflow:hidden;animation:motion-subnav var(--motion-base) var(--ease-out) both}
/* The sidebar stays still across navigations: its own entrances (privacy card,
   Arbeitszeit submenu) would otherwise replay on every render. Submenus still
   animate open, once, when they newly appear (motion-open from motion.js). */
#app #aside :is(.aora-sidebar-privacy-link,.worktime-sidebar-subnav){animation:none}
#app #aside :is(.pruefung-subnav,.worktime-sidebar-subnav).motion-open{overflow:hidden;animation:motion-subnav var(--motion-base) var(--ease-out) both}
details[open]>*:not(summary){animation:motion-fade var(--motion-base) var(--ease-out) both}

.progress.is-indeterminate span{width:40%;animation:motion-progress 1.1s var(--ease-standard) infinite}
.empty,.access-empty-state,.kiosk-empty{animation:motion-fade var(--motion-base) var(--ease-out) both}
.compliance-alert,.login-success{animation:motion-enter var(--motion-base) var(--ease-out) both}

/* Background refreshes re-render the whole screen. While a refresh is on screen,
   entrance animations inside #app are neutralised so nothing replays or flickers.
   Popovers, dialogs, spinners, toasts and the motion-* hooks keep animating. */
html[data-motion-quiet] #app *:not(.motion-enter,.motion-leave,.motion-pop,.motion-landed,.motion-shake,.motion-open,.progress.is-indeterminate,.progress.is-indeterminate span,.aora-cal-popover,details[open]>*,.u-spinner,[class*="spinner"],.ui-dt-panel,.ui-select-panel,.location-options,[popover],dialog,.u-dialog-backdrop,.u-dialog,.modal-backdrop,.modal,.toast,[class*="aora-ai"],[class*="docnotice"]):not(:is(dialog,.modal,.u-dialog,.u-dialog-backdrop,.modal-backdrop,[popover]) *){animation:none!important}

@media (prefers-reduced-motion:reduce){
  .motion-enter,.motion-leave,.motion-pop,.motion-landed,.motion-shake,.pruefung-subnav.motion-open,.worktime-sidebar-subnav.motion-open,details[open]>*{animation:none!important}
  .empty,.access-empty-state,.kiosk-empty,.compliance-alert,.login-success{animation:none!important}
  .progress.is-indeterminate span{animation:none!important;width:65%}
}