/* ===========================================
   OPTIMIZACIONES DE RENDIMIENTO - SECCIÓN INTEGRANTES
   =========================================== */

/* Activar aceleración por hardware */
.artist-card,
.artist-card img,
.card-glow {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Optimización de hover effects usando transform3d */
.artist-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

.artist-card:hover {
  transform: translate3d(0, -12px, 0) scale3d(1.02, 1.02, 1) !important;
  border-color: rgba(95,164,255,0.4) !important;
  /* Sombra simplificada para mejor performance */
  box-shadow: 0 20px 40px rgba(95,164,255,0.2) !important;
}

/* Optimización de imagen con transform3d */
.artist-card img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-card:hover img {
  transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1);
}

/* Optimización de gradientes - usar pseudo-elementos para mejor performance */
.card-glow {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* Reducir blur para mejor performance */
  filter: blur(8px);
}

.artist-card:hover .card-glow {
  opacity: 0.6;
}

/* Contenement para prevenir layout shifts */
.team-section-working {
  contain: layout style paint;
}

.artist-card {
  contain: layout style paint;
  /* Optimización del repaint */
  isolation: isolate;
}

/* Optimizar animaciones usando composite layers */
.artist-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.artist-card:hover::before {
  opacity: 1;
  background: rgba(95, 164, 255, 0.05);
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
  .artist-card {
    /* Reducir efectos en móvil para mejor performance */
    will-change: auto;
  }
  
  .artist-card:hover {
    transform: translate3d(0, -8px, 0) !important;
    box-shadow: 0 12px 24px rgba(95,164,255,0.15) !important;
  }
  
  .artist-card:hover img {
    transform: translate3d(0, 0, 0) scale3d(1.05, 1.05, 1);
  }
}

/* Optimización para dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
  .artist-card,
  .artist-card img,
  .card-glow {
    transition: none !important;
    animation: none !important;
  }
  
  .artist-card:hover {
    transform: none !important;
  }
}

/* Lazy loading optimizations */
.artist-card img {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* Optimización de z-index layers */
.artist-card {
  z-index: 1;
}

.artist-card:hover {
  z-index: 2;
}

/* Performance hint para el navegador */
.team-container {
  /* Hint al navegador sobre el contenido */
  content-visibility: auto;
}

/* Throttling de hover effects para mejor UX */
.artist-card {
  pointer-events: auto;
}

.artist-card.processing-hover {
  pointer-events: none;
}

/* ===== OPTIMIZACIONES CRÍTICAS PARA HERO SECTION ===== */

/* Desactivar animaciones costosas en el hero */
.hero-product-title {
  /* ELIMINAR: animation: heroTitleGlow 4s ease-in-out infinite alternate, heroFloat 6s ease-in-out infinite !important; */
  animation: none !important;
  /* Mantener el efecto visual pero estático */
  text-shadow: 0 0 30px rgba(95, 164, 255, 0.8) !important;
  font-size: 5.5rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
}

/* Simplificar gradient animado - MANTENER ESTÁTICO */
.company-text {
  background: linear-gradient(135deg, #5fa4ff, #4fd1c5) !important;
  /* ELIMINAR: background-size: 300% 300% !important; */
  /* ELIMINAR: animation: gradientShift 3s ease-in-out infinite alternate !important; */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

/* Optimizar subtitle - ELIMINAR ANIMACIÓN */
.hero-product-subtitle {
  /* ELIMINAR: animation: subtitlePulse 4s ease-in-out infinite alternate !important; */
  animation: none !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.05em !important;
  line-height: 1.3 !important;
}

/* ELIMINAR animación de respiración costosa */
.hero-auricular-container {
  /* ELIMINAR: animation: breathe 12s ease-in-out infinite; */
  animation: none !important;
  will-change: auto;
  transform: translateZ(0);
}

/* Optimizar hover del auricular - REDUCIR ESCALA */
.hero-auricular-main:hover {
  /* CAMBIAR de 1.55 a 1.1 para menos costo */
  transform: scale(1.1) !important;
  /* SIMPLIFICAR drop-shadow */
  filter: drop-shadow(0 0 20px rgba(95, 164, 255, 0.6)) !important;
  animation-play-state: paused !important;
  transition: all 0.3s ease !important;
}

/* ELIMINAR animación slow-pan del background */
.hero-background-image {
  /* ELIMINAR: animation: slow-pan 30s ease-in-out infinite alternate; */
  animation: none !important;
  will-change: auto;
  transform: scale(1.02);
}

/* OPTIMIZACIONES DE PERFORMANCE GENERALES */
.video-hero-section {
  /* Mejorar rendering */
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.hero-main-content {
  will-change: auto;
  transform: translateZ(0);
}

/* ELIMINAR KEYFRAMES COSTOSOS */
@keyframes heroTitleGlow {
  /* ELIMINAR COMPLETAMENTE */
}

@keyframes heroFloat {
  /* ELIMINAR COMPLETAMENTE */
}

@keyframes gradientShift {
  /* ELIMINAR COMPLETAMENTE */
}

@keyframes subtitlePulse {
  /* ELIMINAR COMPLETAMENTE */
}

@keyframes breathe {
  /* ELIMINAR COMPLETAMENTE */
}

@keyframes slow-pan {
  /* ELIMINAR COMPLETAMENTE */
}

/* SOLO hover effects ligeros para interactividad */
.hero-product-title:hover {
  text-shadow: 0 0 40px rgba(95, 164, 255, 1) !important;
  transition: text-shadow 0.3s ease !important;
}

/* Performance boost para mobile */
@media (max-width: 768px) {
  .hero-product-title {
    font-size: 3.5rem !important;
    will-change: auto;
  }
  
  .hero-auricular-main:hover {
    transform: scale(1.05) !important;
  }
}

@media (max-width: 480px) {
  .hero-product-title {
    font-size: 2.5rem !important;
  }
  
  .hero-auricular-main:hover {
    transform: none !important;
  }
  
  /* Eliminar effects costosos en mobile */
  .hero-product-title:hover {
    text-shadow: 0 0 20px rgba(95, 164, 255, 0.6) !important;
  }
}