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

/* Contenedor principal SPA */
#spa-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}

/* Vista base - todas las vistas están superpuestas */
.spa-view {
  position: absolute;
  top: 0;
  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;
  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;
  contain: layout style paint;
  content-visibility: auto;
}

/* Vista activa - visible */
.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;
  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;
  content-visibility: visible;
}

/* Vista saliendo (hacia derecha) - transición hacia atrás (retroceso) */
.spa-view.exiting-backward {
  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 izquierda) - transición hacia atrás (retroceso) */
.spa-view.entering-backward {
  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;
  content-visibility: visible;
}

/* Contenedor único de partículas */
#particles-js-spa {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

#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;
}

/* Contenedores dentro de las vistas */
.spa-view .container,
.spa-view .core-container {
  position: relative;
  z-index: 1;
}

/* Vistas ocultas */
.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;
}

/* ===================== VISIBILIDAD DE ELEMENTOS ===================== */

/* Cuando una vista está activa, todos sus elementos deben ser visibles */
.spa-view.active .container,
.spa-view.active .core-container,
.spa-view.active .logo,
.spa-view.active .logo-container,
.spa-view.active .main-heading,
.spa-view.active .login-form,
.spa-view.active .game-list,
.spa-view.entering .container,
.spa-view.entering .core-container,
.spa-view.entering .logo,
.spa-view.entering .logo-container,
.spa-view.entering .main-heading,
.spa-view.entering .login-form,
.spa-view.entering .game-list {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hardware acceleration para elementos internos */
.spa-view .container,
.spa-view .core-container,
.spa-view .logo,
.spa-view .main-heading,
.spa-view h1,
.spa-view h2 {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

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