/**
 * OPTIMISATIONS DE PERFORMANCE CENTRALISÉES
 * Consolidation de tous les CSS d'optimisation performance
 * Remplace: Performance.css, performance-optimizations.css, coaching-section-optimizations.css
 */

/* =================================================================
   GPU ACCELERATION & WILL-CHANGE - RÈGLES PRIORITAIRES
   ================================================================= */

/* Éléments avec animations principales */
.liquid-glass-button,
#hero-background-canvas,
.hero-layer,
.animate-on-scroll,
.stat-card,
.pricing-card,
.feature-card:not(.liquid-glass-card) {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* AI Device Screen Glass - Optimisations séparées */
.ai-device-screen-glass {
  will-change: opacity;
  /* Ne pas appliquer transform: translateZ(0) car l'élément a déjà translate(-50%, -50%) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Éléments avec animations spécifiques optimisées */
.liquid-glass-button {
  will-change: transform, opacity, backdrop-filter;
}

/* AI Device Frame - Optimisations séparées pour préserver le positionnement */
.ai-device-frame {
  will-change: border-color, box-shadow;
  /* Ne pas appliquer transform: translateZ(0) car cela interfère avec translate(-50%, -50%) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Particules et animations neural network */
.ai-hero-bubble,
#organic-bubble,
.net-line,
.net-node,
.particle,
.neural-particle {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Canvas optimisations */
canvas {
  will-change: transform;
  transform: translateZ(0);
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
}

/* =================================================================
   PROTECTION DES LIQUID GLASS CARDS
   ================================================================= */

/* PROTECTION ABSOLUE : Annuler les optimisations qui interfèrent avec liquid glass */
.liquid-glass-card,
.neural-card-inner,
.lg-card,
.lg-card__ring,
.lg-card__innerband, 
.lg-card__innerfeather {
  contain: unset !important;
  will-change: auto !important;
  transform: unset !important;
  backface-visibility: unset !important;
  -webkit-backface-visibility: unset !important;
}

/* Protection spécifique pour les cartes liquid glass dans les conteneurs - Desktop seulement */
@media (min-width: 769px) {
  .feature-card-container .lg-card,
  [class*="feature-section"] .lg-card,
  .feature-card-container::before,
  .feature-card-container::after {
    contain: unset !important;
    will-change: auto !important;
    transform: unset !important;
  }
}

/* Protection des conteneurs de feature sections - Desktop seulement */
@media (min-width: 769px) {
  [id*="feature-section-"],
  [class*="feature-section"],
  .feature-card-container {
    contain: none !important;
    will-change: auto !important;
    transform: unset !important;
    isolation: unset !important;
  }
}

/* =================================================================
   EFFETS HOVER PERFORMANTS POUR LES CARTES
   ================================================================= */

/* Stats Cards - 3D hover avec perspective */
.stat-card-3d-hover {
  perspective: 1000px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s ease,
              background 0.3s ease;
  transform-style: preserve-3d;
}

.stat-card-3d-hover:hover {
  transform: perspective(1000px) rotateY(2deg) rotateX(-2deg) scale3d(1.03, 1.03, 1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 
              0 10px 20px rgba(138, 99, 252, 0.15);
  background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, rgba(138, 99, 252, 0.05) 100%);
}

/* Pricing Cards - 3D hover avec perspective */
.pricing-card-3d-hover {
  perspective: 1000px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.pricing-card-3d-hover:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale3d(1.02, 1.02, 1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 
              0 8px 15px rgba(138, 99, 252, 0.1);
}

/* Feature Cards - Effets génériques (mais pas liquid glass) */
.feature-card:not(.liquid-glass-card) {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:not(.liquid-glass-card):hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Optimisation des hover states génériques */
.btn:hover,
.button:hover,
.card:not(.liquid-glass-card):not(.feature-card):hover {
  will-change: transform, box-shadow;
}

/* =================================================================
   ANIMATIONS DE SCROLL - PILOTÉES PAR SCROLL OBSERVER
   ================================================================= */

/* Classes de base pour les animations de scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Variantes d'animations */
.animate-on-scroll.fade-up {
  transform: translateY(30px);
}

.animate-on-scroll.fade-down {
  transform: translateY(-30px);
}

.animate-on-scroll.fade-left {
  transform: translateX(30px);
}

.animate-on-scroll.fade-right {
  transform: translateX(-30px);
}

.animate-on-scroll.fade-zoom {
  transform: scale(0.8);
}

.animate-on-scroll.fade-zoom.animate-in {
  transform: scale(1) !important;
}

.animate-on-scroll.fade-flip {
  transform: rotateY(90deg);
  transform-origin: center;
}

.animate-on-scroll.fade-flip.animate-in {
  transform: rotateY(0deg) !important;
}

/* Délais d'animation en cascade */
.animate-on-scroll[data-delay="100"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="200"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="300"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="400"] { transition-delay: 400ms; }
.animate-on-scroll[data-delay="500"] { transition-delay: 500ms; }

/* Vitesses d'animation variables */
.animate-on-scroll.fast { transition-duration: 400ms; }
.animate-on-scroll.slow { transition-duration: 800ms; }

/* =================================================================
   OPTIMISATIONS COACHING SECTION (ex coaching-section-optimizations)
   ================================================================= */

/* GPU acceleration pour éléments coaching critiques */
#feature-section-1 .inner-circle-bubble,
#feature-section-1 .ai-bubble,
#feature-section-1 .coaching-aura-container {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  contain: layout style;
}

/* Optimisation transitions coaching */
.transitioning-to-coaching #feature-section-1 .inner-circle-bubble,
.transitioning-to-coaching #feature-section-1 .ai-bubble {
  animation-play-state: paused;
}

/* =================================================================
   CONTAINMENT OPTIMIZATIONS
   ================================================================= */

/* Containment pour les sections principales */
.hero-section,
.stats-section,
.pricing-section {
  contain: layout style paint;
}

.feature-section {
  contain: layout;
  /* Ne pas utiliser "paint" containment pour préserver les effets de flou */
}

/* Containment pour cartes génériques (pas liquid glass) */
.card:not(.liquid-glass-card):not(.feature-card) {
  will-change: transform;
  transform: translateZ(0);
}

/* Éléments fixes optimisés */
.fixed,
[style*="position: fixed"],
.sticky,
[style*="position: sticky"] {
  will-change: auto;
  transform: translateZ(0);
}

/* SVG animés */
svg.animated,
svg[class*="animate"],
.svg-animation {
  will-change: transform;
  transform: translateZ(0);
}

/* Éléments scrollables */
.scroll-container,
[style*="overflow: auto"],
[style*="overflow: scroll"] {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* Backdrop filter optimisé (sauf liquid glass) */
[style*="backdrop-filter"]:not(.liquid-glass-card):not(.lg-card):not(.neural-card-inner),
.glass-effect:not(.liquid-glass-card):not(.lg-card),
.blur-effect:not(.liquid-glass-card):not(.lg-card) {
  will-change: backdrop-filter;
  transform: translateZ(0);
}

/* =================================================================
   OPTIMISATIONS MOBILE & RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  /* Désactiver les animations 3D coûteuses sur mobile */
  .mobile-no-hover,
  .stat-card-3d-hover,
  .pricing-card-3d-hover {
    transform: none !important;
    perspective: none !important;
    will-change: auto;
  }
  
  .mobile-no-hover:hover,
  .stat-card-3d-hover:hover,
  .pricing-card-3d-hover:hover {
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
  }
  
  /* Réduire les will-change sur mobile */
  .liquid-glass-button,
  .animate-on-scroll,
  .feature-card:not(.liquid-glass-card) {
    will-change: auto;
  }
  
  /* Particules moins coûteuses sur mobile */
  .particle,
  .neural-particle {
    will-change: auto;
  }
  
  /* Coaching section optimisations mobile */
  #feature-section-1 .inner-circle-bubble {
    filter: drop-shadow(0 0 20px rgba(255, 122, 0, 0.2)) !important;
    animation-duration: 60s !important;
  }
  
  #feature-section-1 .ai-bubble {
    box-shadow: 0 0 20px rgba(255, 122, 0, 0.15) !important;
    animation-duration: 40s !important;
  }
  
  #feature-section-1 .ai-bubble::before,
  #feature-section-1 .ai-bubble::after {
    animation-duration: 30s !important;
  }
}

/* Optimisation pour appareils plus faibles */
@media (max-width: 768px) and (max-height: 800px) {
  #feature-section-1 .inner-circle-bubble,
  #feature-section-1 .ai-bubble {
    animation: none !important;
  }
  
  #feature-section-1 .inner-circle-bubble {
    background: radial-gradient(circle at center, rgba(255, 122, 0, 0.6), rgba(255, 45, 85, 0.4)) !important;
    filter: drop-shadow(0 0 30px rgba(255, 122, 0, 0.3)) !important;
  }
}

/* Mode performance pour interactions tactiles */
@media (hover: none) {
  #feature-section-1 .feature-card-container:hover::before,
  #feature-section-1 .glass-chip:hover {
    transform: none !important;
    filter: none !important;
  }
}

/* =================================================================
   ÉTATS SPÉCIALISÉS POUR COMPOSANTS
   ================================================================= */

/* Canvas Hero - Optimisations GPU */
#hero-background-canvas {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Liquid Glass Button - États optimisés */
.liquid-glass-button.is-bubbling-up,
.liquid-glass-button.is-settling,
.liquid-glass-button.liquid-glass-active {
  will-change: transform, opacity, backdrop-filter;
}

/* Device Frame - Animations optimisées */
.ai-device-frame.pulsating-illumination {
  will-change: border-color, box-shadow;
}

/* Forcer les éléments animés sur leur propre layer GPU (sauf liquid glass) */
.stat-card-3d-hover,
.pricing-card-3d-hover,
.feature-card:not(.liquid-glass-card) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimisations pour les transitions fréquentes */
.stat-card-3d-hover,
.pricing-card-3d-hover {
  contain: layout style paint;
}

/* =================================================================
   BATCH DOM OPERATIONS
   ================================================================= */

.measure-first {
  contain: layout;
}

.write-second {
  contain: paint;
}