/**
 * Page Transitions & Smooth Loading
 * Système pour éviter les sauts de contenu et rendre les transitions fluides
 */

/* ========================================
   1. PRÉVENTION DES SAUTS AU CHARGEMENT
   ======================================== */

/* Masquer le contenu jusqu'au chargement complet */
body {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Afficher progressivement une fois prêt */
body.loaded {
  opacity: 1;
}

/* Éviter les sauts de layout pendant le chargement */
body:not(.loaded) {
  overflow: hidden;
}

/* ========================================
   2. TRANSITIONS FLUIDES ENTRE PAGES
   ======================================== */

/* Effet de fade-out lors du clic sur un lien */
body.page-transitioning {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* ========================================
   3. OPTIMISATION DES ANIMATIONS
   ======================================== */

/* Accélération GPU pour toutes les animations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimisation des transformations */
a, button, .btn, .card, .elevate-hover {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Transitions fluides pour les liens */
a {
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Transitions fluides pour les boutons */
button, .btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover, .btn:hover {
  transform: translateY(-2px) translateZ(0);
}

button:active, .btn:active {
  transform: translateY(0) translateZ(0);
  transition-duration: 0.1s;
}

/* ========================================
   4. PRÉVENTION DES SACCADES D'IMAGES
   ======================================== */

/* Charger les images sans saccades */
img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

/* Éviter le saut lors du chargement d'image */
img:not([src]) {
  visibility: hidden;
}

/* Animation d'apparition des images */
img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.loaded {
  opacity: 1;
}

/* ========================================
   5. SCROLL FLUIDE GLOBAL
   ======================================== */

/* Amélioration du scroll */
html {
  scroll-behavior: smooth;
}

/* Désactiver le scroll-behavior smooth pour les animations JS */
html.no-smooth-scroll {
  scroll-behavior: auto;
}

/* ========================================
   6. CARTES ET ÉLÉMENTS INTERACTIFS
   ======================================== */

/* Transitions fluides pour les cards */
.card, .ccard, .commitment-item, .bot-advantage-card, .elevate-hover {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   7. NAVIGATION FLUIDE
   ======================================== */

/* Transitions pour la navigation */
nav, header, .navbar, .nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Menu items */
nav a, .nav-menu a {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* ========================================
   8. OPTIMISATIONS PERFORMANCE
   ======================================== */

/* Utiliser containment pour isoler les repaints */
.section, section {
  contain: layout style paint;
}

/* Optimiser les animations avec GPU */
@media (prefers-reduced-motion: no-preference) {
  * {
    transform: translateZ(0);
  }
}

/* ========================================
   9. ACCESSIBILITÉ
   ======================================== */

/* Désactiver les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  body {
    opacity: 1 !important;
  }
}

/* ========================================
   10. LOADER MINIMALISTE
   ======================================== */

/* Loader subtil pendant les transitions */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  z-index: 999999;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease;
}

.page-loader.active {
  opacity: 1;
  animation: loading 1s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================
   11. FIXES SPÉCIFIQUES
   ======================================== */

/* Éviter le flash de contenu non stylé (FOUC) */
.no-fouc {
  visibility: hidden;
}

.no-fouc.loaded {
  visibility: visible;
}

/* Prévenir les sauts lors du toggle de classes */
.transitioning {
  pointer-events: none;
}

/* Optimisation pour les grids */
.grid, [class*="grid"] {
  backface-visibility: hidden;
  transform: translateZ(0);
}