/* ===================== TRANSICIONES HACIA ATRÁS UNIFICADAS ===================== */
/* Este archivo controla todas las transiciones hacia atrás (de izquierda a derecha) */
/* para todos los entornos: Shared SPA, Yo Nunca SPA, Bingo React, Pasapalabra React */

/* ===================== CONFIGURACIÓN BASE ===================== */
:root {
  --transition-duration: 0.5s;
  --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-backward-duration: 0.5s;
}

/* ===================== TRANSICIONES PARA SPAs VANILLA (Shared y Yo Nunca) ===================== */

/* Vista saliendo hacia la derecha (transición hacia atrás) */
.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 var(--transition-backward-duration) var(--transition-timing),
              transform var(--transition-backward-duration) var(--transition-timing),
              visibility 0s linear var(--transition-backward-duration) !important;
  will-change: opacity, transform !important;
}

/* Vista entrando desde la izquierda (transición hacia atrás) */
.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 var(--transition-backward-duration) var(--transition-timing),
              transform var(--transition-backward-duration) var(--transition-timing),
              visibility 0s linear 0s !important;
  content-visibility: visible !important;
  will-change: opacity, transform !important;
}

/* Asegurar que la vista entrante esté posicionada correctamente antes de la animación */
.spa-view.entering-backward::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100vw;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Optimización: Hardware acceleration para transiciones hacia atrás */
.spa-view.exiting-backward,
.spa-view.entering-backward {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
  -webkit-perspective: 1000px !important;
  contain: layout style paint !important;
}

/* Asegurar que los elementos internos también usen hardware acceleration */
.spa-view.exiting-backward *,
.spa-view.entering-backward * {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* ===================== TRANSICIONES PARA APPS REACT ===================== */
/* Clases para aplicar en contenedores React cuando se navega hacia atrás */

.react-app-backward-exit {
  opacity: 0 !important;
  transform: translateX(100vw) translateZ(0) !important;
  transition: opacity var(--transition-backward-duration) var(--transition-timing),
              transform var(--transition-backward-duration) var(--transition-timing) !important;
  pointer-events: none !important;
  will-change: opacity, transform !important;
}

.react-app-backward-enter {
  opacity: 1 !important;
  transform: translateX(0) translateZ(0) !important;
  transition: opacity var(--transition-backward-duration) var(--transition-timing),
              transform var(--transition-backward-duration) var(--transition-timing) !important;
  will-change: opacity, transform !important;
}

/* Contenedor base para apps React */
.react-app-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* NOTA: Las transiciones entre entornos diferentes (SPAs) se han eliminado */
/* Solo se mantienen transiciones dentro del mismo SPA (shared_spa, yonunca_spa) */
/* La navegación entre entornos diferentes usa window.location normal (sin transiciones) */

/* ===================== OPTIMIZACIONES ESPECÍFICAS ===================== */

/* Asegurar que las vistas ocultas no interfieran */
.spa-view:not(.active):not(.entering):not(.entering-backward):not(.exiting):not(.exiting-backward) {
  transform: translateX(100vw) translateZ(0) !important;
}

/* Mejorar visibilidad de elementos durante transiciones hacia atrás */
.spa-view.entering-backward .container,
.spa-view.entering-backward .core-container,
.spa-view.entering-backward [class*="logo"],
.spa-view.entering-backward [class*="logo-container"],
.spa-view.entering-backward h1,
.spa-view.entering-backward h2,
.spa-view.entering-backward h3 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevenir parpadeos durante transiciones */
.spa-view.entering-backward,
.spa-view.exiting-backward {
  contain: layout style paint !important;
}

/* ===================== MEDIA QUERIES PARA RENDIMIENTO ===================== */

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
  .spa-view.exiting-backward,
  .spa-view.entering-backward,
  .react-app-backward-exit,
  .react-app-backward-enter {
    transition-duration: 0.2s !important;
  }
}

/* Optimización para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .spa-view.exiting-backward,
  .spa-view.entering-backward {
    transform: translateX(100vw) translateZ(0) scale(1);
  }
  
  .spa-view.entering-backward {
    transform: translateX(0) translateZ(0) scale(1);
  }
}