/* Pre-animation state */
.pre-animation {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Animation Variations */
@keyframes fadeUpSmooth {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* Optimized animation classes */
.anim-1 {
  animation: fadeUpSmooth 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.anim-2 {
  animation: fadeScaleIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.anim-3 {
  animation: slideRightFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-4 {
  animation: fadeUpSmooth 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center bottom;
}

.anim-5 {
  animation: fadeScaleIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: left center;
}

.anim-6 {
  animation: slideRightFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center;
}

@keyframes fadeRotate {
  from {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.anim-7 {
  animation: fadeRotate 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center;
}

/* Performance optimizations */
.will-animate {
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pre-animation {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .anim-1, .anim-2, .anim-3, .anim-4, .anim-5, .anim-6, .anim-7 {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
}