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

@layer utilities {
  /* Animations modernes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

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

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

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes rotateIn {
    from {
      opacity: 0;
      transform: rotate(-10deg);
    }
    to {
      opacity: 1;
      transform: rotate(0);
    }
  }

  @keyframes blurIn {
    from {
      opacity: 0;
      filter: blur(10px);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Classes d'animation */
  .animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .animate-fadeInDown {
    animation: fadeInDown 0.8s ease-out forwards;
  }

  .animate-slideInLeft {
    animation: slideInLeft 0.8s ease-out forwards;
  }

  .animate-slideInRight {
    animation: slideInRight 0.8s ease-out forwards;
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }

  .animate-bounceIn {
    animation: bounceIn 0.8s ease-out forwards;
  }

  .animate-rotateIn {
    animation: rotateIn 0.6s ease-out forwards;
  }

  .animate-blurIn {
    animation: blurIn 0.8s ease-out forwards;
  }

  /* Optimisation des performances - will-change uniquement pendant l'animation */
  .animate-fadeIn,
  .animate-fadeInUp,
  .animate-fadeInDown,
  .animate-slideInLeft,
  .animate-slideInRight,
  .animate-scaleIn,
  .animate-bounceIn,
  .animate-rotateIn,
  .animate-blurIn {
    will-change: transform, opacity;
  }

  /* Libérer will-change après l'animation */
  .animate-fadeIn.animation-complete,
  .animate-fadeInUp.animation-complete,
  .animate-fadeInDown.animation-complete,
  .animate-slideInLeft.animation-complete,
  .animate-slideInRight.animation-complete,
  .animate-scaleIn.animation-complete,
  .animate-bounceIn.animation-complete,
  .animate-rotateIn.animation-complete,
  .animate-blurIn.animation-complete {
    will-change: auto;
  }

  /* Support prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-fadeIn,
    .animate-fadeInUp,
    .animate-fadeInDown,
    .animate-slideInLeft,
    .animate-slideInRight,
    .animate-scaleIn,
    .animate-bounceIn,
    .animate-rotateIn,
    .animate-blurIn {
      animation: none;
      opacity: 1;
      transform: none;
      filter: none;
    }
  }

  /* Scroll-triggered animations */
  .scroll-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .scroll-hidden.scroll-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .scroll-hidden.scroll-visible.animation-complete {
    will-change: auto;
  }

  .scroll-hidden-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .scroll-hidden-left.scroll-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .scroll-hidden-left.scroll-visible.animation-complete {
    will-change: auto;
  }

  .scroll-hidden-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .scroll-hidden-right.scroll-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .scroll-hidden-right.scroll-visible.animation-complete {
    will-change: auto;
  }

  .scroll-hidden-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .scroll-hidden-scale.scroll-visible {
    opacity: 1;
    transform: scale(1);
  }

  .scroll-hidden-scale.scroll-visible.animation-complete {
    will-change: auto;
  }

  .scroll-hidden-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
  }

  .scroll-hidden-blur.scroll-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .scroll-hidden-blur.scroll-visible.animation-complete {
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-hidden,
    .scroll-hidden-left,
    .scroll-hidden-right,
    .scroll-hidden-scale,
    .scroll-hidden-blur {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
      will-change: auto;
    }
  }

  /* Content-visibility for below-fold sections */
  .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}