@keyframes float {
  0%, 100% {
    transform: translateY(0) rotateX(5deg) rotateY(-5deg);
  }
  50% {
    transform: translateY(-20px) rotateX(10deg) rotateY(5deg);
  }
}

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

.floating-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

.hero-visual-container {
  perspective: 1000px;
}

.transition {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-scale:hover {
  transform: scale(1.05);
}

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

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}