/**
 * Radio Vibra — capa de rendimiento (Main Thread / Paint)
 * Solo refuerza selectores existentes. Sin cambios visuales ni de estructura.
 */

/* ─── Compositor: animaciones de fondo aisladas del documento ─── */
#wave-background,
#equalizer-background {
  pointer-events: none;
  isolation: isolate;
}

#wave-background svg {
  backface-visibility: hidden;
}

#equalizer-background .bar {
  backface-visibility: hidden;
}

/* ─── Containment: reproductor y metadatos (sin propagar repaints) ─── */
/* No usar contain:paint en .vibra-player: bloquea el repintado del vinilo giratorio */
.player-box,
.vibra-player-meta,
.vibra-player-volume-wrap,
.img-container,
.info-container .info {
  contain: layout paint;
}

#dj-avatar {
  contain: paint;
}

/* ─── Widgets de terceros: Discord + X (Twitter) ─── */
.bottom-container {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

.twitter-timeline-container,
.discord-widget-container,
#twitter-widget-slot {
  contain: layout style;
}

.discord-widget-container iframe,
.discord-widget-frame {
  contain: strict;
}

/* ─── Below the fold dentro de Inicio ─── */
#inicioSection .request-timeline-container {
  contain: layout style;
}

#inicioSection .song-request {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

#inicioSection .chat-container {
  contain: layout style;
}

/* ─── Secciones de pestañas (no visibles al cargar) ─── */
#nosotrosSection,
#equipoSection,
#vacantesSection,
#alianzasSection,
#legalSection {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
  contain: layout paint;
}

/* ─── Carrusel: solo transform en GPU ─── */
.carousel-container {
  contain: layout paint;
  overflow: hidden;
}

.carousel {
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s ease;
  backface-visibility: hidden;
}

/* ─── Chat: aislar repintados del bloque en vivo ─── */
.chat-container,
#chat-interface,
#chat-box {
  contain: layout style;
}

.chat-live-title {
  contain: paint;
  isolation: isolate;
}

.chat-trivia-live,
.chat-trivia-sticky {
  contain: layout paint;
}

.chat-trivia-live__pulse {
  will-change: transform;
  backface-visibility: hidden;
}

/* ─── Animaciones existentes: solo propiedades compositables ─── */
.vibra-vinyl-rotor {
  backface-visibility: hidden;
}

.vibra-live-dot {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.vibra-play-ring {
  transition: transform 0.2s ease;
}

.vibra-player-btn {
  transition: box-shadow 0.2s ease;
}

.vibra-player-mute {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.v-hv-b {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.notification::after {
  will-change: transform;
  backface-visibility: hidden;
}

/* Evitar transiciones genéricas que disparen layout en hover */
.alianza-rep-avatar {
  transition: transform 0.2s ease;
}

/* Modales fuera del flujo principal */
.modal {
  contain: layout paint;
}

/* Accesibilidad: ralentizar, no congelar (las reglas detalladas están en animations.css / styles.css) */
@media (prefers-reduced-motion: reduce) {
  .vibra-live-dot,
  .chat-live-title,
  .chat-trivia-live__pulse {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}