/* Motion for the staff and patient screens.
 *
 * Staff open these screens hundreds of times a day, so nothing here is slow or
 * showy: only opacity and transform move, every duration is under 250 ms, and
 * an effect plays when the SCREEN changes (a tab, a booking step, a sign-in
 * step), never each time a screen redraws itself after an action.
 * prefers-reduced-motion keeps the fades and drops the movement. */
:root{--m-out:cubic-bezier(.23,1,.32,1);}

@keyframes m-panel{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@keyframes m-step {from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes m-notice{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes m-pulse{50%{opacity:.5;}}
@keyframes m-fade{from{opacity:0;}to{opacity:1;}}

/* a tab's panel arrives when its tab is chosen (un-hiding restarts this once) */
[role=tabpanel]:not([hidden]){animation:m-panel 180ms var(--m-out) both;}

/* a booking step arrives when the step changes (book-2.js sets .enter only then) */
#body.enter > *{animation:m-step 240ms var(--m-out) both;}

/* sign-in: the form arrives in order, once per step */
.signin main > *{animation:m-step 260ms var(--m-out) both;}
.signin main > :nth-child(2){animation-delay:40ms;}
.signin main > :nth-child(3){animation-delay:80ms;}
.signin main > :nth-child(4){animation-delay:120ms;}
.signin main > :nth-child(n+5){animation-delay:160ms;}

/* a message that appears says so, instead of snapping in */
.err:not([hidden]),.offline:not([hidden]){animation:m-notice 180ms var(--m-out) both;}

/* waiting is visible */
.loading{animation:m-pulse 1.4s ease-in-out infinite;}

/* dialogs, if a screen opens one */
dialog[open]{animation:m-step 200ms var(--m-out) both;}
dialog::backdrop{animation:m-fade 200ms ease both;}

/* choices respond to a press as they go down, and to a pointer only where one exists */
.choice{transition:transform 120ms var(--m-out),border-color .15s ease,background-color .15s ease,box-shadow .2s ease;}
.choice:active{transform:scale(.985);}
tbody tr{transition:background-color 120ms ease;}
.steps .num{transition:background-color .2s ease,color .2s ease;}
@media (hover:hover) and (pointer:fine){
  .choice:hover{box-shadow:0 6px 18px -10px rgba(11,37,69,.35);}
}

/* reduced motion: still told something changed, without anything travelling */
@media (prefers-reduced-motion:reduce){
  [role=tabpanel]:not([hidden]),#body.enter > *,.signin main > *,dialog[open]{animation:m-fade 120ms linear both;animation-delay:0s!important;}
  .err:not([hidden]),.offline:not([hidden]){animation:m-fade 120ms linear both;}
  .loading{animation:none;}
  .choice:active{transform:none;}
}