/* os-26 · Motion system (KarobarOS finishing package)
   Transform/opacity only, <=300ms, all of it off under reduced motion. */

/* ── Page transition: soft fade + rise on page switch ─────────────── */
#app.kos-enter{animation:kos-page-in .26s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes kos-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── First list items stagger in lightly (page switch only) ───────── */
#app.kos-stagger .panel tbody tr,
#app.kos-stagger .modules>*,
#app.kos-stagger .kos-grid>*{animation:kos-item-in .3s ease-out both}
#app.kos-stagger .panel tbody tr:nth-child(2),#app.kos-stagger .modules>*:nth-child(2),#app.kos-stagger .kos-grid>*:nth-child(2){animation-delay:.04s}
#app.kos-stagger .panel tbody tr:nth-child(3),#app.kos-stagger .modules>*:nth-child(3),#app.kos-stagger .kos-grid>*:nth-child(3){animation-delay:.08s}
#app.kos-stagger .panel tbody tr:nth-child(4),#app.kos-stagger .modules>*:nth-child(4),#app.kos-stagger .kos-grid>*:nth-child(4){animation-delay:.12s}
#app.kos-stagger .panel tbody tr:nth-child(5),#app.kos-stagger .modules>*:nth-child(5),#app.kos-stagger .kos-grid>*:nth-child(5){animation-delay:.16s}
#app.kos-stagger .panel tbody tr:nth-child(n+6),#app.kos-stagger .modules>*:nth-child(n+6),#app.kos-stagger .kos-grid>*:nth-child(n+6){animation-delay:.2s}
@keyframes kos-item-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Modal open: scale/fade in, backdrop fades ────────────────────── */
#modal[open]{animation:kos-modal-in .24s cubic-bezier(.2,.9,.3,1) both}
#modal::backdrop{animation:kos-fade-in .24s ease both}
@keyframes kos-modal-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes kos-fade-in{from{opacity:0}to{opacity:1}}

/* ── Save success: the tick becomes a labelled pill that pops ─────── */
#savedTick{width:auto!important;height:46px;padding:0 18px 0 12px;border-radius:999px;gap:9px;
  font:700 13.5px 'DM Sans',sans-serif;color:#fff;box-shadow:0 10px 30px #c2410c40}
#savedTick::after{content:'Save ho gaya'}
#savedTick.show{animation:kos-tick-pop .34s cubic-bezier(.2,1.35,.4,1) both}
@keyframes kos-tick-pop{0%{opacity:0;transform:scale(.55) translateY(-8px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ── The just-saved row glows once ────────────────────────────────── */
.kos-flash{animation:kos-flash-bg 1.6s ease-out both}
@keyframes kos-flash-bg{0%{background-color:#ffe3d3}100%{background-color:transparent}}

/* ── Button press feedback ────────────────────────────────────────── */
button:not(:disabled):active,.btn:not(:disabled):active{transform:scale(.98)}
button,.btn{transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease}

/* ── Reduced motion: everything still, instantly ──────────────────── */
@media(prefers-reduced-motion:reduce){
  #app.kos-enter,#app.kos-stagger .panel tbody tr,#app.kos-stagger .modules>*,
  #app.kos-stagger .kos-grid>*,#modal[open],#modal::backdrop,.kos-flash,
  #savedTick.show,#savedTick.show path{animation:none!important}
  button,.btn{transition:none}
  button:not(:disabled):active,.btn:not(:disabled):active{transform:none}
}