/**
 * Reveal Animation Framework - Styles CSS
 * Optimisé pour performance avec DOM complexe
 */

/* ============================================
   ÉTAT INITIAL DES ÉLÉMENTS
   ============================================ */

.reveal-left,
.reveal-right {
  /* État initial invisible pour éviter flash */
  opacity: 0;
  
  /* Isolation du contexte de transformation */
  transform: translate3d(0, 0, 0);
  
  /* Accélération hardware pour animations fluides */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Position initiale left (sera override par GSAP) */
.reveal-left {
  transform: translate3d(-60px, 0, 0);
}

/* Position initiale right (sera override par GSAP) */
.reveal-right {
  transform: translate3d(60px, 0, 0);
}


/* ============================================
   OPTIMISATION PERFORMANCE - DOM IMBRIQUÉ
   ============================================ */

/**
 * Conteneurs parents : optimisation du rendering
 * Appliquer ces classes aux conteneurs de vos reveals
 */
.reveal-container {
  /* Crée un nouveau contexte de stacking pour isoler les animations */
  isolation: isolate;
  
  /* Optimise le repaint lors des animations enfants */
  contain: layout style paint;
  
  /* Force accélération GPU si besoin */
  transform: translateZ(0);
}

/**
 * Pour les sections avec beaucoup d'imbrications (5-6 niveaux)
 */
.reveal-section {
  /* Indique au navigateur qu'on va animer transform et opacity */
  will-change: transform;
  
  /* Crée un contexte d'empilement pour limiter les reflows */
  position: relative;
  z-index: 1;
}

/* Wrapper général pour toute la page */
.reveal-wrapper {
  /* Optimise le rendering global */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}


/* ============================================
   UTILITAIRES DE PERFORMANCE
   ============================================ */

/**
 * Classe à ajouter sur les éléments fixes pendant scroll
 * (headers, navs) pour éviter les conflits
 */
.no-reveal-optimize {
  will-change: auto !important;
  transform: none !important;
}

/**
 * Pour désactiver temporairement les animations
 * (utile pendant resize ou traitement lourd)
 */
.reveal-paused * {
  animation-play-state: paused !important;
  transition: none !important;
}


/* ============================================
   ÉTATS INTERMÉDIAIRES (optionnel)
   ============================================ */

/**
 * Classe appliquée pendant l'animation
 * Utile pour le debugging ou effets additionnels
 */
.reveal-animating {
  pointer-events: none; /* Évite les interactions pendant anim */
}

/**
 * État final après animation complète
 */
.reveal-complete {
  will-change: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ============================================
   RESPONSIVE - MOBILE PERFORMANCE
   ============================================ */

@media (max-width: 768px) {
  /* Réduit la distance sur mobile pour éviter débordements */
  .reveal-left {
    transform: translate3d(-30px, 0, 0);
  }
  
  .reveal-right {
    transform: translate3d(30px, 0, 0);
  }
  
  /* Réduit les optimisations sur devices moins puissants */
  .reveal-section {
    will-change: auto;
  }
}

/* Pour devices très lents : désactive animations */
@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================
   DEBUG MODE (décommenter si besoin)
   ============================================ */

/*
.reveal-left,
.reveal-right {
  outline: 2px solid rgba(255, 0, 0, 0.3);
}

.reveal-container {
  outline: 2px solid rgba(0, 255, 0, 0.3);
}

.reveal-section {
  outline: 2px solid rgba(0, 0, 255, 0.3);
}
*/


/* ============================================
   LOADING STATE (avant init GSAP)
   ============================================ */

/**
 * Empêche le flash des éléments avant init GSAP
 */
html:not(.gsap-loaded) .reveal-left,
html:not(.gsap-loaded) .reveal-right {
  visibility: hidden;
}

html.gsap-loaded .reveal-left,
html.gsap-loaded .reveal-right {
  visibility: visible;
}


/* ============================================
   VARIANTES ADDITIONNELLES (optionnel)
   ============================================ */

/* Delays prédéfinis via classes au lieu de data-delay */
.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }
.reveal-delay-5 { animation-delay: 0.5s; }

/* Distances custom */
.reveal-far { /* sera géré par config JS si besoin */ }
.reveal-near { /* sera géré par config JS si besoin */ }