/* Système de blur graduel cosmique - Optimisé pour les performances */

.cosmic-blur-container {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.3s ease-out;
  contain: layout paint;
  will-change: opacity;
  isolation: isolate;
}

/* Blur graduel pour le bas de la page */
.cosmic-blur-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.9) 0%,
    rgba(10, 10, 10, 0.7) 20%,
    rgba(10, 10, 10, 0.5) 40%,
    rgba(10, 10, 10, 0.3) 60%,
    rgba(10, 10, 10, 0.1) 80%,
    transparent 100%
  );
}

.cosmic-blur-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  mask-image: linear-gradient(
    to top,
    black 0%,
    black 20%,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    black 0%,
    black 20%,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
  animation: cosmicBlurPulse 4s ease-in-out infinite;
}

/* Blur graduel pour le haut de la page */
.cosmic-blur-top {
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.8) 0%,
    rgba(10, 10, 10, 0.6) 30%,
    rgba(10, 10, 10, 0.4) 60%,
    rgba(10, 10, 10, 0.2) 80%,
    transparent 100%
  );
}

.cosmic-blur-top::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
}

/* Animation de pulsation cosmique */
@keyframes cosmicBlurPulse {
  0%, 100% {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  50% {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Variantes de force de blur */
.cosmic-blur-subtle::before {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.cosmic-blur-strong::before {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* États de visibilité basés sur le scroll */
.cosmic-blur-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.cosmic-blur-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optimisations pour les appareils avec performances limitées */
@media (prefers-reduced-motion: reduce) {
  .cosmic-blur-container::before {
    animation: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* Fallback pour les navigateurs ne supportant pas backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .cosmic-blur-container::before {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cosmic-blur-bottom::before {
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.8) 0%,
      rgba(10, 10, 10, 0.6) 30%,
      rgba(10, 10, 10, 0.4) 60%,
      rgba(10, 10, 10, 0.2) 80%,
      transparent 100%
    );
  }

  .cosmic-blur-top::before {
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.7) 0%,
      rgba(10, 10, 10, 0.5) 30%,
      rgba(10, 10, 10, 0.3) 60%,
      rgba(10, 10, 10, 0.1) 80%,
      transparent 100%
    );
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .cosmic-blur-bottom {
    height: 80px;
  }

  .cosmic-blur-top {
    height: 70px;
  }

  .cosmic-blur-container::before {
    animation-duration: 6s; /* Plus lent sur mobile pour économiser la batterie */
  }
}

/* Optimisation pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .cosmic-blur-container {
    transform: translateZ(0); /* Force l'accélération matérielle */
  }
}

/* Optimisations de performance supplémentaires */
.cosmic-blur-container {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Support amélioré pour Safari */
@supports (-webkit-backdrop-filter: blur(1px)) {
  .cosmic-blur-container::before {
    -webkit-backdrop-filter: inherit;
  }
}

/* Support pour Firefox (limité) */
@-moz-document url-prefix() {
  .cosmic-blur-container::before {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Masquage automatique en mode plein écran */
@media (display-mode: fullscreen) {
  .cosmic-blur-container {
    display: none;
  }
}