/* Optimizaciones de rendimiento para el carousel */

#carousel-viewport {
  overflow: hidden;
  position: relative;
  /* Habilitar GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

#carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: contents;
  contain: layout style paint;
}

#carousel-track > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
  
  /* Optimización de imágenes de fondo */
  background-attachment: local;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
  /* GPU acceleration para las transiciones */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Bullets del carousel */
#bullets {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}

#bullets button {
  pointer-events: auto;
  cursor: pointer;
}

/* Prefetch de imágenes cercanas */
#carousel-track > div[data-loaded="false"] {
  background-image: none !important;
}

/* Media queries para optimización móvil */
@media (max-width: 768px) {
  #carousel-viewport {
    height: 90vh;
  }
  
  /* En móvil, reducir calidad visual ligeramente para mejor rendimiento */
  #carousel-track > div {
    background-size: cover;
  }
}

@media (min-width: 769px) {
  #carousel-viewport {
    height: 75vh;
  }
}

/* Animación suave sin jank */
@media (prefers-reduced-motion: no-preference) {
  #carousel-track > div {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #carousel-track > div {
    transition: none;
  }
}