the-tip-top-frontend/app/globals.css

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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }

  h1 {
    @apply text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-semibold;
  }

  h3 {
    @apply text-2xl font-semibold;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-secondary-500 text-white hover:bg-secondary-600 focus:ring-secondary-400;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 hover:bg-primary-50 focus:ring-primary-500;
  }

  .input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }

  .card {
    @apply bg-white rounded-xl shadow-md p-6;
  }
}

@layer utilities {
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeIn {
    animation: fadeIn 0.2s ease-out;
  }

  /* Animations pour le Hero Section */
  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-15px) rotate(3deg); }
  }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-30px) translateX(10px) rotate(10deg); }
    66% { transform: translateY(-15px) translateX(-10px) rotate(-10deg); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.05); }
  }

  @keyframes steam {
    0% { opacity: 0.6; transform: translateY(0px) translateX(0px) scale(1); }
    50% { opacity: 0.3; transform: translateY(-30px) translateX(10px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-60px) translateX(-10px) scale(1.5); }
  }

  .float-animation {
    animation: float 6s ease-in-out infinite;
  }

  .float-slow {
    animation: floatSlow 8s ease-in-out infinite;
  }

  .pulse-animation {
    animation: pulse 4s ease-in-out infinite;
  }

  .steam-1 {
    animation: steam 3s ease-out infinite;
    animation-delay: 0s;
  }

  .steam-2 {
    animation: steam 3s ease-out infinite;
    animation-delay: 1s;
  }

  .steam-3 {
    animation: steam 3s ease-out infinite;
    animation-delay: 2s;
  }

  /* Animation de descente douce du haut vers le bas sans rotation */
  @keyframes fallDown {
    0% {
      transform: translateY(-100vh) translateX(0px);
      opacity: 0.5;
    }
    20% {
      transform: translateY(-60vh) translateX(15px);
      opacity: 0.5;
    }
    40% {
      transform: translateY(-20vh) translateX(-10px);
      opacity: 0.5;
    }
    60% {
      transform: translateY(20vh) translateX(20px);
      opacity: 0.5;
    }
    80% {
      transform: translateY(60vh) translateX(-15px);
      opacity: 0.5;
    }
    95% {
      opacity: 0.5;
    }
    100% {
      transform: translateY(100vh) translateX(0px);
      opacity: 0;
    }
  }

  .animate-float-gentle {
    animation: fallDown 15s linear infinite;
    opacity: 0;
    animation-fill-mode: forwards;
  }
}