/* ==========================================================================
   Ostemio · Motion
   Le durate e gli easing sono quelli definiti nelle brand guidelines
   (vedi tokens.css). Niente librerie esterne: transizioni e keyframe CSS.
   ========================================================================== */

/* ── messaggi chat: entrano dal basso, leggero "pop" ── */
@keyframes ost-msg-in{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.ost-msg{animation:ost-msg-in var(--dur-slow) var(--ease-out)}

/* ── indicatore "sta scrivendo" ── */
@keyframes ost-typing-dot{
  0%,60%,100%{transform:translateY(0);opacity:.35}
  30%{transform:translateY(-5px);opacity:1}
}
.ost-typing{display:inline-flex;align-items:center;gap:2px;padding:9px 11px}
.ost-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--txt3);animation:ost-typing-dot 1.2s var(--ease-smooth) infinite}
.ost-typing-dot:nth-child(2){animation-delay:.2s}
.ost-typing-dot:nth-child(3){animation-delay:.4s}

/* ── card azione Ostèmio: ingresso a molla ── */
@keyframes ost-pop-in{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
.ost-action-card{animation:ost-pop-in var(--dur-medium) var(--ease-spring)}

/* ── cambio view (bottom nav) ── */
@keyframes ost-view-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.ost-view.is-active{animation:ost-view-in var(--dur-fast) var(--ease-out)}

/* ── sheet "aggiungi piatto": entra dal basso ── */
@keyframes ost-sheet-in{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.ost-sheet-overlay.is-open .ost-sheet{animation:ost-sheet-in var(--dur-slow) var(--ease-out)}

/* ── reservation card: rifiuto (stato finale) — dimmerata ma riattivabile ── */
.ost-card-pren.is-rejected{opacity:.4}

/* ── reservation card: conferma — pulse di successo prima del re-render ── */
@keyframes ost-pren-confirm{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.015)}
}
@keyframes ost-pren-confirm-flash{
  0%,100%{background:var(--bg3)}
  40%{background:var(--s-ok-bg)}
}
.ost-card-pren.is-confirm-anim{animation:ost-pren-confirm var(--dur-patient) var(--ease-spring)}
.ost-card-pren.is-confirm-anim .ost-pren-head{animation:ost-pren-confirm-flash var(--dur-patient) var(--ease-smooth)}

/* ── reservation card: rifiuto — uscita laterale prima del re-render ── */
@keyframes ost-pren-reject{
  0%{transform:translateX(0);opacity:1}
  100%{transform:translateX(16px);opacity:0}
}
.ost-card-pren.is-reject-anim{animation:ost-pren-reject var(--dur-slow) var(--ease-smooth) forwards}

/* ── pulsanti: feedback tattile a molla ── */
.ost-btn:active,
.ost-pill:active,
.ost-cat-btn:active,
.ost-quick-btn:active,
.ost-btn-header:active{transform:scale(.96)}
.ost-btn,.ost-pill,.ost-cat-btn,.ost-quick-btn{
  transition:background var(--dur-fast) var(--ease-smooth),
             color var(--dur-fast) var(--ease-smooth),
             border-color var(--dur-fast) var(--ease-smooth),
             transform var(--dur-micro) var(--ease-spring);
}

/* ── badge contatore: pulse quando cambia valore ── */
@keyframes ost-badge-bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
.ost-navbtn-badge.is-bumped{animation:ost-badge-bump var(--dur-medium) var(--ease-spring)}

/* ── rispetta le preferenze utente ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}