@tailwind base;
@tailwind components;
@tailwind utilities;

/* Enhanced animations */
@layer utilities {
  .animate-slide-in-up {
    animation: slide-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .animate-elegant-entrance {
    animation: slide-up-elegant 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .animate-elegant-exit {
    animation: slide-down-elegant 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  
  .transition-elegant {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Question transition animations */
  .question-enter {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(2px);
  }

  .question-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .question-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  .question-exit-active {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    filter: blur(2px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.6, 1);
  }

  /* Button hover animations */
  .btn-hover-lift {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  /* Input focus animations */
  .input-focus-glow {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .input-focus-glow:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    border-color: rgb(99, 102, 241);
  }
  
  @keyframes slide-in-up {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}