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

@layer components {
  /* Image loading animation */
  .image-loaded {
    animation: fadeIn 0.5s ease-out;
  }

  /* File Upload Styles */
  .upload-drop-zone {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  .upload-drop-zone.active {
    background-color: rgba(30, 41, 59, 0.9);
    border-color: rgba(78, 70, 239, 0.5);
  }

  /* Drag and drop animation */
  .dropzone-active {
    transform: scale(1.01);
    border-color: rgba(78, 70, 239, 0.7) !important;
    background-color: rgba(78, 70, 239, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(78, 70, 239, 0.3);
  }

  /* Button press animation */
  .scale-95 {
    transform: scale(0.95);
    transition: transform 0.15s ease;
  }

  /* Submit button with loading spinner */
  .form-button-loading {
    pointer-events: none;
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}