/* style.css */

/* General font setup */
body {
  font-family: 'Poppins', sans-serif;
}

/* Animated gradient background */
.animated-bg {
  background: linear-gradient(-45deg, #e0f7fa, #c3dafe, #e0f2f1, #fce4ec);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}

/* Gradient animation keyframes */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Dark mode fix for background */
.dark body {
  background-color: #0f172a;
}

/* Custom transition for notes hover */
.note-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.note-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Smooth fade for new notes */
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: loader bar animation */
#progressFill {
  transition: width 0.3s ease-in-out;
}

/* For focus states (optional enhancement if not using Tailwind focus ring) */
input:focus,
textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}