/* ============================================
   QBS Enhanced Animations
   Floating animations for background shapes
   ============================================ */

/* ============================================
   FLOATING SHAPES ANIMATION
   Perpetual gentle floating for background shapes
   ============================================ */

@keyframes floatShape {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.02);
  }
}

@keyframes floatShapeSlow {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

/* Apply floating animation to background shapes */
.floating-shape {
  animation: floatShape 6s ease-in-out infinite;
  will-change: transform;
}

.floating-shape-slow {
  animation: floatShapeSlow 8s ease-in-out infinite;
  animation-delay: -2s; /* Offset so shapes don't sync */
  will-change: transform;
}

.floating-shape-alt {
  animation: floatShape 7s ease-in-out infinite;
  animation-delay: -3s;
  will-change: transform;
}

/* ============================================
   REDUCED MOTION SUPPORT
   Respect user preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .floating-shape,
  .floating-shape-slow,
  .floating-shape-alt {
    animation: none;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   Reduced animations on mobile for performance
   ============================================ */

@media (max-width: 768px) {
  .floating-shape,
  .floating-shape-slow,
  .floating-shape-alt {
    animation-duration: 10s; /* Slower on mobile */
  }
}