/* Motion: one set of timings for the whole Hub (Rami, 22 October 2026: "yes start the animation pass"; the rules are in
   .claude/skills/ui-animation). Loaded last, so these win over the older one-off timings.
   - Things that appear come out of what opened them, quickly, on the enter curve; they leave faster than they came.
   - Only transform and opacity move (colour may fade); nothing animates on its own, nothing moves for keyboard actions.
   - Frequent actions stay near-instant (a button press, a menu); rare ones may take their time.
   - Under "reduce motion" on the device, nothing moves (the last block). */
:root{
  --ease-enter:cubic-bezier(.22,1,.36,1);  /* what appears, and hover lifts */
  --ease-move:cubic-bezier(.25,1,.5,1);    /* what slides across the screen */
  --ease-drawer:cubic-bezier(.32,.72,0,1); /* side panels and sheets */
  --ease-out:var(--ease-enter);            /* Cadence's own token follows */
  --dur-press:120ms;--dur-pop:170ms;--dur-pop-out:120ms;--dur-panel-in:320ms;--dur-panel-out:200ms;--dur-fade:200ms;
}

/* Press: every button gives under the finger (Cadence already does it for .btn-s / .btn; these are the other pressable ones) */
html body :is(.hc-ch>a,.pf-play,.ps-pi-b,.mk-btn,.ml-x):not(#_){transition:transform var(--dur-press) var(--ease-enter),background-color var(--dur-fade) ease,color var(--dur-fade) ease}
html body :is(.hc-ch>a,.pf-play,.ps-pi-b,.mk-btn,.ml-x):not(#_):active{transform:scale(.97)}

/* Menus come out of the ⋯ that opened them (top right; top left in Arabic), and pickers out of their field */
@keyframes mo-pop{from{opacity:0;transform:translateY(-4px) scale(.95)}}
@keyframes mo-up{from{opacity:0;transform:translateY(16px)}}
html body .ip-more[open]>.ip-menu:not(#_),html body .ps-pmore[open]>.ps-pmenu:not(#_){transform-origin:top right;animation:mo-pop var(--dur-pop) var(--ease-enter)}
[dir=rtl] .ip-more[open]>.ip-menu,[dir=rtl] .ps-pmore[open]>.ps-pmenu{transform-origin:top left}
html body .pk:not(#_){transform-origin:top center;animation:mo-pop var(--dur-pop) var(--ease-enter)}
@media (max-width:860px){ /* on a phone the ⋯ menu is a sheet at the bottom: it rises */
  html body .ip-more[open]>.ip-menu:not(#_):not(#_):not(#_){animation:mo-up var(--dur-panel-out) var(--ease-drawer)}
}

/* Side panels (and Kasper beside the page): in on the drawer curve, out faster. Not while the panel is placed at once (.now): Kasper's
   shape grows into it then, and a sheet still sliding up under it made him land far too low on a phone, then jump up (23 October 2026) */
html body .sp:not(.sp-rise):not(.now):not(#_){transition:transform var(--dur-panel-out) var(--ease-move)}
html body .sp.in:not(.sp-rise):not(.now):not(#_){transition-duration:var(--dur-panel-in);transition-timing-function:var(--ease-drawer)}

/* Status pills fade to their new colour; tabs' underline glides on the enter curve */
html body .wk-tag:not(#_){transition:background-color var(--dur-fade) ease,color var(--dur-fade) ease}
html body .bk-tabs.wk-sbar>button:not(#_)::after{transition:transform var(--dur-fade) var(--ease-enter)}

/* The undo bar: up on the enter curve, away faster */
.un-toast{transition:opacity var(--dur-fade) var(--ease-enter),transform 260ms var(--ease-enter)}
.un-toast:not(.on){transition-duration:var(--dur-pop-out)}

/* An email card put away folds out; one brought back settles in (public/mailjobs.js) */
@keyframes mo-in{from{opacity:0;transform:translateY(6px)}}
.ml-card.ml-out{opacity:0;transform:translateY(-4px) scale(.98);transition:opacity 160ms var(--ease-enter),transform 160ms var(--ease-enter);pointer-events:none}
.ml-card.ml-in{animation:mo-in 240ms var(--ease-enter)}

/* The spotlight of a tour moves between buttons: only what it needs, not "all" */
.tour-spot,.tr-hole{transition-property:top,left,width,height,border-radius,box-shadow}

/* Hover lifts only with a mouse: a finger on a phone doesn't leave things lifted */
@media (hover:none){html body .hm-card:not(#_):hover{transform:none}}

/* Reduce motion (the device's setting): nothing slides or grows; colour still changes */
@media (prefers-reduced-motion:reduce){
  html body *:not(#_),html body *:not(#_)::before,html body *:not(#_)::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}