/* ===================================================================
   ANIMATIONS.CSS
=================================================================== */

@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.animate-fade-in { animation: fade-in var(--transition-base) both; }
.animate-slide-up { animation: slide-up var(--transition-base) both; }
.animate-pop { animation: pop 260ms cubic-bezier(.34,1.56,.64,1) both; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
.spinner-dark { border-color: var(--border-strong); border-top-color: var(--accent); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 0px, var(--border-subtle) 40px, var(--bg-sunken) 80px);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

.autosave-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.autosave-dot.is-saving { animation: pulse-dot 900ms ease-in-out infinite; }

.entry-card, .toast, .modal { will-change: transform, opacity; }

/* Section transition when switching sidebar item */
.form-section-enter { animation: slide-up 220ms cubic-bezier(.4,0,.2,1) both; }