/* ===================== ESTILOS PARA SPA Y TRANSICIONES ===================== */

/* Contenedor principal SPA */
#spa-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* Por encima de las partículas (z-index: 0) */
  background: transparent;
}

/* Vista base - todas las vistas están superpuestas */
/* IMPORTANTE: Estado inicial oculto - solo se muestra con clase .active */
.spa-view {
  position: absolute;
  margin-top: 0vh;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100vw) translateZ(0);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s;
  will-change: opacity, transform;
  /* Mantener el layout flex del body original */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  /* Pre-renderizar para evitar parpadeos */
  contain: layout style paint;
  content-visibility: auto;
}

/* Vista activa - visible */
/* REGLA PRINCIPAL: Cuando una vista tiene .active, se muestra completamente */
.spa-view.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all;
  transform: translateX(0) translateZ(0);
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
  /* Asegurar que todos los elementos estén listos */
  content-visibility: visible;
}

/* Vista saliendo (hacia izquierda) - transición normal (adelante) */
.spa-view.exiting {
  opacity: 0;
  visibility: visible;
  transform: translateX(-100vw) translateZ(0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s;
}

/* Vista entrando (desde derecha) - transición normal (adelante) */
.spa-view.entering {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateZ(0);
  pointer-events: all;
  z-index: 2;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
  /* Pre-cargar contenido para evitar parpadeos */
  content-visibility: visible;
}

/* Vista saliendo (hacia derecha) - transición hacia atrás (retroceso) */
/* NOTA: Los estilos detallados están en unified_backward_transitions.css */
/* Este archivo mantiene compatibilidad con el sistema anterior */
.spa-view.exiting-backward {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translateX(100vw) translateZ(0) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s !important;
  will-change: opacity, transform !important;
}

/* Vista entrando (desde izquierda) - transición hacia atrás (retroceso) */
.spa-view.entering-backward {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) translateZ(0) !important;
  pointer-events: all !important;
  z-index: 2 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s !important;
  /* Pre-cargar contenido para evitar parpadeos */
  content-visibility: visible !important;
  will-change: opacity, transform !important;
}

/* Contenedor único de partículas (compartido para todas las vistas) */
/* Orden de apilamiento correcto:
   - body background: z-index auto (contexto base)
   - particles-js-spa: z-index 0 (sobre el background, debajo del contenido)
   - spa-container: z-index 1 (sobre las partículas)
*/
#particles-js-spa {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important; /* Sobre el background del body, debajo del contenido (spa-container: z-index 1) */
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Asegurar que el canvas dentro del contenedor de partículas sea visible */
#particles-js-spa canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Asegurar que los contenedores dentro de las vistas funcionen */
.spa-view .container,
.spa-view .core-container {
  position: relative;
  z-index: 1;
}


/* Evitar que las vistas ocultas interfieran - usar visibility en lugar de display para permitir transiciones */
.spa-view:not(.active):not(.entering):not(.entering-backward):not(.exiting):not(.exiting-backward) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100vw) translateZ(0);
  display: flex; /* Mantener display para que las transiciones funcionen */
}

/* ===================== SCROLL SIN BARRA PARA VISTAS DE JUGADOR (MÓVIL) ===================== */
/* Permitir scroll pero ocultar la barra de scroll en las vistas de jugador */
/* Sobreescribir el overflow: hidden de .spa-view para las vistas de jugador */
#view-frase-jugador.spa-view,
#view-espera-frases-jugador.spa-view,
#view-yonunca-jugador.spa-view,
#view-yonunca-final-jugador.spa-view,
#view-frase-jugador.spa-view.active,
#view-espera-frases-jugador.spa-view.active,
#view-yonunca-jugador.spa-view.active,
#view-yonunca-final-jugador.spa-view.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Ocultar scrollbar en Firefox */
  scrollbar-width: none !important;
  /* Ocultar scrollbar en IE y Edge antiguos */
  -ms-overflow-style: none !important;
}

/* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */
#view-frase-jugador.spa-view::-webkit-scrollbar,
#view-espera-frases-jugador.spa-view::-webkit-scrollbar,
#view-yonunca-jugador.spa-view::-webkit-scrollbar,
#view-yonunca-final-jugador.spa-view::-webkit-scrollbar,
#view-frase-jugador.spa-view.active::-webkit-scrollbar,
#view-espera-frases-jugador.spa-view.active::-webkit-scrollbar,
#view-yonunca-jugador.spa-view.active::-webkit-scrollbar,
#view-yonunca-final-jugador.spa-view.active::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ===================== OPTIMIZACIONES DE TRANSICIONES PARA ELEMENTOS ===================== */

/* ===================== REGLAS DE VISIBILIDAD PARA ELEMENTOS INTERNOS ===================== */
/* Cuando una vista está activa (.active), TODOS sus elementos deben ser visibles */
/* Estas reglas tienen alta especificidad para sobrescribir CSS individuales */

/* Logos y contenedores: visibles cuando la vista está activa */
.spa-view.active [class*="logo-container"],
.spa-view.active [class*="logo"],
.spa-view.entering [class*="logo-container"],
.spa-view.entering [class*="logo"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Contenedores principales: visibles cuando la vista está activa */
.spa-view.active .container,
.spa-view.active .core-container,
.spa-view.entering .container,
.spa-view.entering .core-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
}

/* Elementos de texto y frases: visibles cuando la vista está activa */
.spa-view.active [class*="phrase"],
.spa-view.active h1,
.spa-view.active h2,
.spa-view.active h3,
.spa-view.entering [class*="phrase"],
.spa-view.entering h1,
.spa-view.entering h2,
.spa-view.entering h3 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Evitar que logos y elementos se animen durante las transiciones salientes */
.spa-view:not(.active):not(.entering):not(.exiting) [class*="logo-container"],
.spa-view:not(.active):not(.entering):not(.exiting) [class*="logo"] {
  opacity: 0 !important;
  visibility: hidden !important;
  animation-play-state: paused !important;
}

.spa-view.exiting [class*="logo-container"],
.spa-view.exiting [class*="logo"] {
  animation-play-state: paused !important;
}

/* Restaurar animaciones solo cuando la vista está completamente activa */
.spa-view.active [class*="logo"],
.spa-view.active [class*="logo-container"] {
  animation-play-state: running !important;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Aplicar animación moveUpDown explícitamente a logo-containers que la tienen definida */
#view-intro.spa-view.active .logo-container_intro,
#view-intro.spa-view.entering .logo-container_intro,
#view-frase.spa-view.active .logo-container_frase,
#view-frase.spa-view.entering .logo-container_frase,
#view-game.spa-view.active .logo-container_game,
#view-game.spa-view.entering .logo-container_game,
#view-stats.spa-view.active .logo-container_stats,
#view-stats.spa-view.entering .logo-container_stats,
#view-stats-likes.spa-view.active .logo-container_stats_likes,
#view-stats-likes.spa-view.entering .logo-container_stats_likes,
#view-stats-likes.spa-view.active .logo_stats_likes,
#view-stats-likes.spa-view.entering .logo_stats_likes {
  animation: moveUpDown 3s ease-in-out infinite !important;
}

/* Aplicar animación moveUpDown a logo-containers de vistas de jugador */
#view-frase-jugador.spa-view.active .logo-container_frase_jugador,
#view-frase-jugador.spa-view.entering .logo-container_frase_jugador,
#view-espera-frases-jugador.spa-view.active .logo-container_espera_frases_jugador,
#view-espera-frases-jugador.spa-view.entering .logo-container_espera_frases_jugador,
#view-yonunca-jugador.spa-view.active .logo-container_yonunca_jugador,
#view-yonunca-jugador.spa-view.entering .logo-container_yonunca_jugador,
#view-yonunca-final-jugador.spa-view.active .logo-container_yonunca_final_jugador,
#view-yonunca-final-jugador.spa-view.entering .logo-container_yonunca_final_jugador {
  animation: moveUpDown 3s ease-in-out infinite !important;
}

/* Asegurar que los elementos dentro de las vistas usen hardware acceleration */
.spa-view .container,
.spa-view .core-container,
.spa-view [class*="phrase"],
.spa-view h1,
.spa-view h2,
.spa-view h3 {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Logo-containers: permitir animaciones, pero aplicar hardware acceleration sin interferir */
.spa-view [class*="logo-container"] {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  /* No aplicar transform aquí para permitir animaciones moveUpDown */
}

/* FORZAR VISIBILIDAD DE TODOS LOS ELEMENTOS PRINCIPALES EN VISTAS ACTIVAS */
/* Reglas con máxima especificidad para sobrescribir cualquier CSS individual */

/* Intro view */
#view-intro.spa-view.active .logo-container_intro,
#view-intro.spa-view.active .logo_intro,
#view-intro.spa-view.active .container,
#view-intro.spa-view.active .qr-container,
#view-intro.spa-view.active .game-info,
#view-intro.spa-view.entering .logo-container_intro,
#view-intro.spa-view.entering .logo_intro,
#view-intro.spa-view.entering .container,
#view-intro.spa-view.entering .qr-container,
#view-intro.spa-view.entering .game-info {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Frase view */
#view-frase.spa-view.active .logo-container_frase,
#view-frase.spa-view.active .logo_frase,
#view-frase.spa-view.active .phrase,
#view-frase.spa-view.active #lottie-container,
#view-frase.spa-view.entering .logo-container_frase,
#view-frase.spa-view.entering .logo_frase,
#view-frase.spa-view.entering .phrase,
#view-frase.spa-view.entering #lottie-container {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Game view */
#view-game.spa-view.active .logo-container_game,
#view-game.spa-view.active .logo_game,
#view-game.spa-view.active .container,
#view-game.spa-view.active .phrase,
#view-game.spa-view.entering .logo-container_game,
#view-game.spa-view.entering .logo_game,
#view-game.spa-view.entering .container,
#view-game.spa-view.entering .phrase {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Stats-likes view */
#view-stats-likes.spa-view.active .logo-container_stats_likes,
#view-stats-likes.spa-view.active .logo_stats_likes,
#view-stats-likes.spa-view.active h1,
#view-stats-likes.spa-view.active .frase-container,
#view-stats-likes.spa-view.active h2,
#view-stats-likes.spa-view.active .reiniciar,
#view-stats-likes.spa-view.entering .logo-container_stats_likes,
#view-stats-likes.spa-view.entering .logo_stats_likes,
#view-stats-likes.spa-view.entering h1,
#view-stats-likes.spa-view.entering .frase-container,
#view-stats-likes.spa-view.entering h2,
#view-stats-likes.spa-view.entering .reiniciar {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Autor solo visible cuando tiene clase .show (después de que termine la frase) */
#view-stats-likes.spa-view.active h3.show,
#view-stats-likes.spa-view.entering h3.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* NOTA: Las reglas de visibilidad específicas por vista están arriba (líneas 260-300) */
/* Esta sección solo maneja propiedades de hardware acceleration */

/* Evitar parpadeos durante transiciones */
.spa-view.entering *,
.spa-view.active * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimización específica para vistas de jugador */
#view-frase-jugador.spa-view.entering,
#view-espera-frases-jugador.spa-view.entering,
#view-yonunca-jugador.spa-view.entering,
#view-yonunca-final-jugador.spa-view.entering {
  transform: translateX(0) translateZ(0);
}

#view-frase-jugador.spa-view.exiting,
#view-espera-frases-jugador.spa-view.exiting,
#view-yonunca-jugador.spa-view.exiting,
#view-yonunca-final-jugador.spa-view.exiting {
  transform: translateX(-100vw) translateZ(0);
}