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

@layer utilities {
  /* ── Animations (uniquement celles utilisées dans le projet) ── */

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(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 glowPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(20,184,166,0.35)); }
    50% { filter: drop-shadow(0 0 16px rgba(20,184,166,0.55)); }
  }

  @keyframes particleFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    60% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
  }

  /* Classes d'animation */
  .animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }
  .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
  .animate-scaleIn { animation: scaleIn 0.6s ease-out forwards; }
  .animate-bounceIn { animation: bounceIn 0.8s ease-out forwards; }
  .animate-glowPulse { animation: glowPulse 2s ease-in-out infinite; }
  .animate-particleFloat { animation: particleFloat 1.6s ease-out infinite; }

  /* Optimisation will-change (libéré après animation) */
  .animate-fadeIn,
  .animate-fadeInUp,
  .animate-scaleIn,
  .animate-bounceIn { will-change: transform, opacity; }

  .animate-fadeIn.animation-complete,
  .animate-fadeInUp.animation-complete,
  .animate-scaleIn.animation-complete,
  .animate-bounceIn.animation-complete { will-change: auto; }

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

  /* ── Scroll-triggered animations (CSS transitions pures, JS IntersectionObserver uniquement) ── */

  .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 pour sections hors écran */
  .content-visibility-auto { content-visibility: auto; contain-intrinsic-size: 0 500px; }
}