/* ════════════════════════════════════════════════
   Motion: small, quick animations that make the app
   feel smooth without slowing anyone down.
   - a page fades in when you open it, its cards rise
     into place one after another, table rows follow
   - dialogs fade and pop in
   - a sidebar section slides open
   - the sign-in card rises in
   Only opacity and transform are animated (cheap on
   phones). Re-drawing a page with fresh data does not
   replay anything: the entrance runs only while the
   page carries .page-enter, set by js/69-motion.js for
   a moment after you open it.
   Nothing moves when the device asks for reduced motion.
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @keyframes mFade{from{opacity:0}to{opacity:1}}
  @keyframes mRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes mRow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @keyframes mPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes mSlide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

  /* page entrance */
  .page.page-enter{animation:mFade .2s ease-out both}
  .page-enter .card,.page-enter .stat,.page-enter .intro,.page-enter .notice{animation:mRise .36s cubic-bezier(.22,.61,.36,1) both}
  .page-enter :is(.card,.stat):nth-child(2){animation-delay:.04s}
  .page-enter :is(.card,.stat):nth-child(3){animation-delay:.08s}
  .page-enter :is(.card,.stat):nth-child(4){animation-delay:.12s}
  .page-enter :is(.card,.stat):nth-child(5){animation-delay:.16s}
  .page-enter :is(.card,.stat):nth-child(n+6){animation-delay:.2s}
  .page-enter tbody tr:nth-child(-n+14){animation:mRow .3s ease-out both}
  .page-enter tbody tr:nth-child(2){animation-delay:.12s}
  .page-enter tbody tr:nth-child(3){animation-delay:.14s}
  .page-enter tbody tr:nth-child(4){animation-delay:.16s}
  .page-enter tbody tr:nth-child(5){animation-delay:.18s}
  .page-enter tbody tr:nth-child(6){animation-delay:.2s}
  .page-enter tbody tr:nth-child(7){animation-delay:.22s}
  .page-enter tbody tr:nth-child(8){animation-delay:.24s}
  .page-enter tbody tr:nth-child(9){animation-delay:.26s}
  .page-enter tbody tr:nth-child(n+10):nth-child(-n+14){animation-delay:.28s}
  .page-enter tbody tr:nth-child(1){animation-delay:.1s}

  /* dialogs */
  .scrim-modal:not([hidden]){animation:mFade .16s ease-out}
  .scrim-modal:not([hidden]) > .modal{animation:mPop .22s cubic-bezier(.2,.8,.3,1.08)}

  /* sidebar section opening (set on click by js/69-motion.js) */
  .nav-sec.is-opening .nav-sec-items .nav-item{animation:mSlide .22s ease-out both}
  .nav-sec.is-opening .nav-sec-items .nav-item:nth-child(2){animation-delay:.03s}
  .nav-sec.is-opening .nav-sec-items .nav-item:nth-child(3){animation-delay:.06s}
  .nav-sec.is-opening .nav-sec-items .nav-item:nth-child(4){animation-delay:.09s}
  .nav-sec.is-opening .nav-sec-items .nav-item:nth-child(n+5){animation-delay:.12s}

  /* sign-in */
  .auth-card{animation:mRise .5s .05s cubic-bezier(.22,.61,.36,1) both}

  /* buttons and icons: a touch more feedback */
  .btn--primary:hover{box-shadow:0 4px 12px rgba(37,99,235,.28)}
  .btn:active{transform:translateY(1px) scale(.985)}
  .stat .stat-icon{transition:transform .2s ease}
  .stat:hover .stat-icon{transform:scale(1.08) rotate(-4deg)}
  .top-back svg{transition:transform .15s ease}
  .top-back:hover svg{transform:translateX(-2px)}
}