/**
 * Optimisations CSS pour améliorer les performances du scroll
 * Particulièrement pour le premier scroll
 */

/* Optimisation globale pour le scroll */
html {
  scroll-behavior: smooth;
  /* Optimisation du rendu pendant le scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * SUPPRIMÉ: Pause des animations pendant le scroll
 * Cette optimisation causait trop de problèmes visuels (animations figées)
 * Les navigateurs modernes gèrent bien les animations pendant le scroll
 */

/* Optimisations pour les sections critiques */
#feature-section-4,
#feature-section-5 {
  /* Isolation du contexte de rendu */
  contain: layout style paint;
  /* Optimisation GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimisation des animations de bulles */
.client-bubble,
.central-bubble,
.task-item {
  will-change: auto; /* Sera activé dynamiquement quand nécessaire */
  contain: layout style;
}

/* Optimisation pour les animations en cours */
.client-bubble.floating {
  will-change: transform;
}

.task-item.visible {
  will-change: opacity, transform;
}

/* Réduire le coût des ombres complexes */
.card-visual {
  /* Utiliser une ombre simple au lieu de multiples */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Optimisation pour les images */
.client-bubble img {
  /* Empêcher le reflow pendant le chargement */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Optimisation du rendu */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Optimiser les transitions */
.task-checkbox,
.task-line {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimisation de la mémoire pour les éléments cachés */
.client-bubble:not(.floating),
.task-item:not(.visible) {
  will-change: auto;
  transform: none;
}

/* Optimisation spécifique pour le premier render */
@media (prefers-reduced-motion: no-preference) {
  /* Précharger les transformations critiques */
  .task-animation-container,
  .generate-animation-container {
    transform: translateZ(0);
  }
}

/* Optimisation pour mobile */
@media (max-width: 768px) {
  /* Réduire la complexité sur mobile */
  .client-bubble,
  .task-item {
    box-shadow: none;
  }
  
  /* Désactiver certaines animations sur mobile */
  .bubble-glow,
  .task-line::after {
    display: none;
  }
}