@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideIn {
  animation: slideIn 0.3s ease-out;
}

@layer utilities {
  .fade-left {
    @apply opacity-0 -translate-x-6 transition-all duration-700 ease-out;
  }

  .fade-left.show {
    @apply opacity-100 translate-x-0;
  }

  /* 3D Utilities for Immersion */
  .preserve-3d {
    transform-style: preserve-3d;
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }
}