/* ==========================================================================
   Nova Studio AI · Micro-Animations & Glow Effects
   ========================================================================== */

@keyframes floatOrb {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-40px) scale(1.1);
  }
  100% {
    transform: translateY(20px) scale(0.95);
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.8), 0 0 10px rgba(6, 182, 212, 0.6);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Skeleton Loading Effect */
.skeleton-box {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

/* Glowing Border Pulse for Generating State */
.generating-active {
  animation: pulseGlow 2.5s infinite;
  border-color: var(--accent-primary) !important;
}

/* Ripple on button clicks */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}