// Variables
$animation-duration: 12s;
$blob-duration: 7s;
$gradient-duration: 3s;

// Mixins pour les animations
@mixin animation-delay($delay) {
  animation-delay: $delay;
  opacity: 0;
  animation-fill-mode: forwards;
}

// Animation du gradient de fond
@keyframes gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

// Animation des blobs de fond
@keyframes blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(20px, -50px) scale(1.1);
  }
  50% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  75% {
    transform: translate(50px, 50px) scale(1.05);
  }
}

// Animations d'entrée
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Animation des mots qui défilent
@keyframes wordSlide {
  0%,
  20% {
    transform: translateY(0);
  }
  25%,
  45% {
    transform: translateY(-100%);
  }
  50%,
  70% {
    transform: translateY(-200%);
  }
  75%,
  95% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(-400%);
  }
}

// Classes d'animation
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient $gradient-duration ease infinite;
}

.animate-blob {
  animation: blob $blob-duration infinite;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
}

// Délais d'animation
.animation-delay-200 {
  @include animation-delay(0.2s);
}

.animation-delay-300 {
  @include animation-delay(0.3s);
}

.animation-delay-400 {
  @include animation-delay(0.4s);
}

.animation-delay-500 {
  @include animation-delay(0.5s);
}

.animation-delay-600 {
  @include animation-delay(0.6s);
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

// Section des mots animés
.word-animation {
  position: relative;
  overflow: hidden;

  .word-container {
    display: flex;
    flex-direction: column;
    animation: wordSlide $animation-duration infinite;
  }

  .word {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: capitalize;

    // Tailles responsive
    font-size: 2.5rem;
    height: 3rem;

    @media (min-width: 640px) {
      font-size: 3rem;
      height: 3.5rem;
    }

    @media (min-width: 768px) {
      font-size: 3.5rem;
      height: 4rem;
    }

    @media (min-width: 1024px) {
      font-size: 4rem;
      height: 5rem;
    }

    // Variantes de couleur (avec support dark mode)
    &.red {
      @apply text-red-500 dark:text-red-400;
    }

    &.orange {
      @apply text-orange-500 dark:text-orange-400;
    }

    &.blue {
      @apply text-blue-500 dark:text-blue-400;
    }

    &.green {
      @apply text-green-500 dark:text-green-400;
    }
  }
}

// Shadow custom
.shadow-3xl {
  box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
}

// Effet de hover sur les cards de statistiques
.stat-card {
  @apply bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg;
  @apply transition-all duration-300 transform;

  &:hover {
    @apply shadow-xl -translate-y-1;

    .icon-container {
      @apply scale-110;
    }
  }
}

// Amélioration de l'accessibilité
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Support pour les écrans très larges
@media (min-width: 1536px) {
  .word {
    font-size: 4.5rem !important;
    height: 5.5rem !important;
  }
}
