/* =====================================================================
   animations.css: keyframes and transitions (Section 25).
   Reduced motion and the "Calmer animations" setting (html.calm) turn
   movement into simple fades.
   ===================================================================== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes soft-flash { from { background-color: var(--success-bg); } to { background-color: transparent; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1.12); } }
@keyframes bounce-once { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }

@keyframes dot-fill { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.page-enter { animation: page-in 150ms var(--ease-out-soft) both; }
.bounce-once { animation: bounce-once 420ms ease-out 1; transform-origin: center; }
.hm-cell.done, .hm-cell.pause { animation: dot-fill 200ms var(--ease-out-soft) both; animation-delay: calc(var(--i, 0) * 18ms); }
.easy-out { overflow: hidden; opacity: 0; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; border-width: 0 !important;
  transition: opacity 250ms ease-out, max-height 250ms ease-out, padding 250ms ease-out; }
.flash { animation: soft-flash 600ms ease-out both; }
.welcome-in { animation: fade-in 300ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; }
}
html.calm *, html.calm *::before, html.calm *::after { transition-duration: 1ms !important; }
html.calm .page-enter, html.calm .dialog, html.calm .toast, html.calm .dialog-wrap.is-sheet .dialog { animation-name: fade-in !important; animation-duration: 150ms !important; }
html.calm .skeleton { animation: none; }
html.calm .bounce-once, html.calm .hm-cell.done, html.calm .hm-cell.pause { animation: none; }
html.calm .card:hover { transform: none; }