/**
 * 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,
.animate-on-scroll,
.pricing-card {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

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

/* Particules décoratives (séparateurs) */
.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;
}

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

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

:root {
  --scroll-reveal-duration: 800ms;
  --scroll-reveal-distance: 30px;
  --scroll-reveal-easing-opacity: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --scroll-reveal-easing-transform: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/*
 * Canonical scroll-reveal contract. JavaScript only prepares elements and
 * toggles .is-visible/.is-animated; every visual token lives in this sheet.
 */
.animate-on-scroll {
  --animation-duration: var(--scroll-reveal-duration);
  --animation-delay: 0ms;
  --scroll-reveal-extra-transitions: visibility 0s;
  transition:
    opacity var(--animation-duration) var(--scroll-reveal-easing-opacity) var(--animation-delay),
    transform var(--animation-duration) var(--scroll-reveal-easing-transform) var(--animation-delay),
    var(--scroll-reveal-extra-transitions);
}

.animate-on-scroll.scroll-observer-prepared:not(.is-visible) {
  opacity: 0;
}

/* Preparation must be instantaneous: until an element is "armed" (one frame
   after its first IntersectionObserver callback), the hidden state carries no
   transition, so above-the-fold content resolves straight to its revealed
   state on reload without animating up from hidden. Once armed, the base
   transition applies again — so scrolling an element back out of view animates
   it out (exit), not just in. */
.animate-on-scroll.scroll-observer-prepared:not(.scroll-observer-armed):not(.is-visible) {
  transition: none;
}

/* Variantes d'animations */
.animate-on-scroll.scroll-observer-prepared.fade-up:not(.is-visible) {
  transform: translateY(var(--scroll-reveal-distance));
}

.animate-on-scroll.scroll-observer-prepared.fade-left:not(.is-visible) {
  transform: translateX(var(--scroll-reveal-distance));
}

.animate-on-scroll.scroll-observer-prepared.fade-right:not(.is-visible) {
  transform: translateX(calc(-1 * var(--scroll-reveal-distance)));
}

.animate-on-scroll.scroll-observer-prepared.fade-zoom:not(.is-visible) {
  transform: scale(0.8);
}

.animate-on-scroll.scroll-observer-prepared.is-visible {
  opacity: 1;
  transform: none;
}

.animate-on-scroll.is-animated {
  will-change: auto;
}

/* Interactive reveal compositions. Components only change their interaction
   properties; the entrance transition itself remains defined once above. */
.animate-on-scroll.sol-benefit-card {
  --scroll-reveal-extra-transitions:
    translate 260ms cubic-bezier(0.25, 0.1, 0.25, 1), scale 260ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 260ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 260ms ease;
}

.sectors-page .animate-on-scroll.sec-engine__block {
  --scroll-reveal-extra-transitions:
    translate 0.28s var(--transition-curve-elegant, ease), box-shadow 0.3s ease,
    background 0.3s ease;
}

.sectors-page .animate-on-scroll.sec-card {
  --scroll-reveal-extra-transitions:
    translate 0.3s var(--transition-curve-elegant, ease), box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.animate-on-scroll.sec-spot {
  --scroll-reveal-extra-transitions: background 0.35s ease;
}

.animate-on-scroll.sol-feature-link {
  --scroll-reveal-extra-transitions:
    translate 180ms ease, border-color 180ms ease, background 180ms ease;
}

.animate-on-scroll.shared-faq-item {
  --scroll-reveal-extra-transitions:
    grid-template-rows 500ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 300ms ease-out,
    border-color 300ms ease-out;
}

.animate-on-scroll.sol-proof-card {
  --scroll-reveal-extra-transitions:
    translate 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 320ms ease;
}

.animate-on-scroll.sol-proof-shell {
  --scroll-reveal-extra-transitions:
    translate 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 260ms ease;
}

.animate-on-scroll.sol-proof-pillar {
  --scroll-reveal-extra-transitions:
    translate 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, background 220ms ease,
    box-shadow 220ms ease;
}

.animate-on-scroll.featured-card {
  --scroll-reveal-extra-transitions: translate 300ms ease, box-shadow 300ms ease;
}

.animate-on-scroll.blog-card {
  --scroll-reveal-extra-transitions: translate 300ms ease;
}

.animate-on-scroll[data-home-card-graph] {
  --scroll-reveal-extra-transitions:
    translate 500ms cubic-bezier(0.22, 1, 0.36, 1), scale 500ms cubic-bezier(0.22, 1, 0.36, 1),
    rotate 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms ease, background 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

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

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

/* Containment pour cartes génériques */
.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'] {
  will-change: transform;
  transform: translateZ(0);
}

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

/* Backdrop filter optimisé (sauf composant liquid glass) */
[style*='backdrop-filter']:not(.lg-card) {
  will-change: backdrop-filter;
  transform: translateZ(0);
}

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

@media (max-width: 768px) {
  /* Réduire les will-change sur mobile */
  .liquid-glass-button,
  .animate-on-scroll {
    will-change: auto;
  }

  /* Particules moins coûteuses sur mobile */
  .particle {
    will-change: auto;
  }
}

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

/* 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;
}

/* =================================================================
   LAYOUT STABILITY (CLS OPTIMIZATION)
   Strictly reserve space for dynamic containers before JS loads
   ================================================================= */

/* --- HomePage --- */
body.home-page #hero-container {
  min-height: 680px;
  /* Matches Hero HTML styling */
}

body.home-page #pricing-container {
  min-height: 600px;
}

/* --- BlogPage --- */
body.blog-page #hero-container {
  min-height: 55vh;
  /* Matches Hero CSS */
}

@media (max-width: 768px) {
  body.blog-page #hero-container {
    min-height: 60vh;
  }
}

body.blog-page #list-container {
  min-height: 800px;
  /* Prevents footer jump */
}

/* --- BlogArticlePage --- */
body.blog-article-page #article-container {
  min-height: 100vh;
  /* Article content will fill screen */
}

/* --- BloomAiVoipPage --- */
body.bloom-ai-page #hero-container {
  min-height: 100vh;
  /* Hero is full screen height usually */
}

body.bloom-ai-page #story-section-container {
  min-height: 100vh;
}

/* --- Shared Containers --- */
#header-container {
  min-height: 80px;
  /* Standard header height */
  /* Note: Ne PAS utiliser contain: layout ici car le header a position: fixed */
}

#footer-container {
  min-height: 400px;
  /* Approximate footer height */
  contain: layout;
}