.bg-ms-gradient {
  background: radial-gradient(circle at 0% 0%, rgba(224, 231, 255, 0.4) 0%, transparent 50%),
              radial-gradient(circle at 100% 100%, rgba(254, 243, 199, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 100% 0%, rgba(238, 242, 255, 0.5) 0%, transparent 60%),
              radial-gradient(circle at 0% 100%, rgba(199, 210, 254, 0.4) 0%, transparent 60%),
              linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

@keyframes float-slow {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) rotate(4deg) scale(1.05); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

@keyframes float-medium {
  0% { transform: translateY(0px) rotate(0deg) scale(1.05); }
  50% { transform: translateY(20px) rotate(-6deg) scale(0.95); }
  100% { transform: translateY(0px) rotate(0deg) scale(1.05); }
}

@keyframes float-other {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(25px, -15px) scale(1.08); }
  66% { transform: translate(-15px, 20px) scale(0.92); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-float-1 {
  animation: float-slow 16s ease-in-out infinite;
}

.animate-float-2 {
  animation: float-medium 12s ease-in-out infinite;
}

.animate-float-3 {
  animation: float-other 20s ease-in-out infinite;
}

/* Animations that were handled by framer motion */
.step-enter {
  animation: slideInRight 0.3s ease-out forwards;
}

.step-exit {
  animation: slideOutLeft 0.3s ease-in forwards;
}

.step-enter-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

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

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-15px); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Loader */
@keyframes progress {
  0% { left: -33%; }
  100% { left: 100%; }
}

.animate-progress {
  animation: progress 1.5s ease-in-out infinite;
}

/* Pulse for processing */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Layout transitions */
.transition-height {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
}
.max-h-0 { max-height: 0; opacity: 0; }
.max-h-screen { max-height: 100vh; opacity: 1; }