/* app/static/css/animations.css */

/* Floating mesh blobs in background */
@keyframes float-blob-1 {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float-blob-2 {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-40px, 40px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob-1 {
  animation: float-blob-1 18s infinite ease-in-out;
}

.animate-blob-2 {
  animation: float-blob-2 15s infinite ease-in-out;
}

/* Grid lines background style */
.grid-bg-lines {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(120, 119, 198, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 119, 198, 0.05) 1px, transparent 1px);
}

.dark .grid-bg-lines {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Page Loader Overlay */
#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0B1220; /* Default to primary dark theme */
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-logo-ring {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-top-color: #6366F1;
  border-right-color: #8B5CF6;
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Floating widgets dashboard micro animations */
@keyframes dashboard-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.dashboard-float-widget {
  animation: dashboard-float 6s infinite ease-in-out;
}

/* Custom fade in fallback */
.reveal-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}