/* Flash Notifications */
@layer components {
  /* Subtle entrance animation from bottom */
  @keyframes slideInFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Shimmer animation for loading states */
  @keyframes shimmer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }

  .animate-shimmer {
    animation: shimmer 2s infinite;
  }

  /* Flash container responsive positioning */
  #flash-container {
    @apply w-full sm:w-auto;
  }

  /* Flash message styling */
  .flash-message {
    animation: slideInFromBottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    @apply w-full;
  }

  /* Progress bar smooth animation */
  .flash-progress-bar {
    @apply origin-left;
  }

  /* Hover effects */
  .flash-message:hover .flash-progress-bar {
    animation-play-state: paused;
  }

    /* Mobile responsiveness */
  @media (max-width: 640px) {
    .flash-message {
      animation: slideInFromBottom 0.3s ease-out;
    }
  }
}