/* ============================================================================
   motion.css — chirurgische motion-laag voor backoffice v2 (additief, los van
   theme.css/style.css zodat het makkelijk te reviewen/terugdraaien is).
   Past de aanbevolen patronen uit voorstel-motion.html toe op de ECHTE classes:
     P01 btn-press · P21 choice-select (slot/baan-pop) · P22 stepper-bump
   (P05 tile-lift bestond al in index.html; daar is alleen de entree-animatie van
    fill-mode 'both' → 'backwards' gezet zodat die eigen hover-lift weer werkt.)
   Alleen transform/opacity. Volledig prefers-reduced-motion-geguard (onderaan).
   Raakt bestaande :hover/:focus-visible/launchpad-entree NIET aan.
   ========================================================================== */
:root{
  --mo-e-out: cubic-bezier(.2,.7,.3,1);
}

/* ---- P01 btn-press: tactiele klik-feedback (er was wel :hover, geen :active) ---- */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-link,
.btn-rent, .bkf-step, .beheer-row-btn{
  transition: transform .14s var(--mo-e-out), background-color .14s var(--mo-e-out),
              box-shadow .14s var(--mo-e-out);
}
.btn:active:not(:disabled), .btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled), .btn-ghost:active:not(:disabled),
.btn-danger:active:not(:disabled), .btn-rent:active:not(:disabled),
.beheer-row-btn:active:not(:disabled){ transform: scale(.97); }
.bkf-step:active:not(:disabled){ transform: scale(.92); }

/* ---- P21 choice-select: pop bij het kiezen van een tijdslot / baan ---- */
.tl-slot.is-selected, .bkf-baan-chip.is-on, .bp-baan-chip.is-on{
  animation: moPop .18s var(--mo-e-out);
}
@keyframes moPop{ 40%{ transform: scale(1.05); } }

/* ---- P22 stepper-bump: cijfer bumpt bij +/- (klasse via motion.js) ---- */
.bkf-stepper input.mo-bump{ animation: moBump .16s var(--mo-e-out); }
@keyframes moBump{ 40%{ transform: translateY(-3px) scale(1.12); } }

/* ---- P07 modal-in: zachte scale-in van de dialoog bij openen (desktop had geen
        entree). Sluit .modal-slide (eigen mobiele animatie) expliciet uit. ---- */
.modal:not([hidden]) .modal-inner:not(.modal-slide),
.modal:not([hidden]) .gb-overlay-inner{
  animation: moModalIn .2s var(--mo-e-out);
}
@keyframes moModalIn{ from{ opacity:0; transform: scale(.98); } }

/* ---- P11 row-stagger: getrapte entree van rijen in een .mo-stagger-container.
        Eénmalig, aangestuurd door motion.js zodra de lijst zichtbaar wordt. ---- */
@keyframes moRowIn{ from{ opacity:0; transform: translateY(6px); } }

/* ============================================================================
   prefers-reduced-motion — verplicht: alle hierboven toegevoegde motion uit.
   (focus-ring en de launchpad-entree zitten in theme.css/index.html en hebben
    daar hun eigen reduced-motion-guard — die raken we niet aan)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-link,
  .btn-rent, .bkf-step, .beheer-row-btn{ transition: none !important; }
  .btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active,
  .btn-danger:active, .btn-rent:active, .beheer-row-btn:active,
  .bkf-step:active{ transform: none !important; }
  .tl-slot.is-selected, .bkf-baan-chip.is-on, .bp-baan-chip.is-on,
  .bkf-stepper input.mo-bump,
  .modal:not([hidden]) .modal-inner, .modal:not([hidden]) .gb-overlay-inner,
  .mo-stagger > *{ animation: none !important; }
}