/* KARMA — Animations */
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%,100% { opacity: 0.4; transform: translateX(-50%) scale(1); } 50% { opacity: 0.7; transform: translateX(-50%) scale(1.06); } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.7; } }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(245, 158, 11, 0.25);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}

/* Responsive tweaks */
@media (min-width: 640px) {
  .hero-title { font-size: 48px; }
  .app-main { padding: 24px 22px 40px; }
}
@media (max-width: 380px) {
  .hero-title { font-size: 32px; }
  .hero-img { width: 160px; height: 160px; }
  .feature-grid { gap: 10px; }
  .feature-card { padding: 14px 12px; }
}