/* ===================================================================
   EXPERIENCE — capa cinematográfica automática.
   Vive fuera de #detalle-pelicula, montada sobre document.body (mismo
   patrón que .lightbox-overlay), así hereda --acento/--acento-suave
   del tema activo (Movies/Series/K-Dramas/Videogames) sin lógica extra.
   =================================================================== */

.experience-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease;
  overflow: hidden;
}

.experience-overlay.exp-activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== Fondo: dos capas en crossfade + capa de video (Best Scene) ===== */
.exp-fondo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--acento-rgb), 0.16), #000 75%);
}

.exp-capa-fondo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.2s ease;
  overflow: hidden;
}
.exp-capa-fondo.exp-capa-activa { opacity: 1; }

.exp-capa-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.exp-capa-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.exp-capa-video.exp-capa-activa { opacity: 1; }
.exp-capa-video-host,
.exp-capa-video-host iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.exp-fondo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: background-color 1.8s ease;
  pointer-events: none;
}

@keyframes exp-panzoom {
  from { transform: scale(var(--exp-z0, 1)) translate(var(--exp-x0, 0), var(--exp-y0, 0)); }
  to   { transform: scale(var(--exp-z1, 1.06)) translate(var(--exp-x1, 0), var(--exp-y1, 0)); }
}
.exp-panzoom { animation: exp-panzoom var(--exp-dur, 9s) linear forwards; }

@media (prefers-reduced-motion: reduce) {
  .exp-panzoom { animation: none; }
}

/* ===== Zonas fijas — la posición de cada TIPO de dato nunca cambia ===== */
.exp-zona {
  position: absolute;
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s ease;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.45);
  color: #fff;
}
.exp-zona.exp-zona-visible { opacity: 1; }

.exp-zona-titulo {
  left: 50%;
  top: 40%;
  max-width: min(90vw, 720px);
  text-align: center;
  transform: translate(-50%, 8px);
}
.exp-zona-titulo.exp-zona-visible { transform: translate(-50%, 0); }
.exp-titulo-texto {
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.exp-titulo-quote {
  margin-top: 0.6rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
}

.exp-estrella { font-size: 1.5rem; color: rgba(255, 255, 255, 0.25); }
.exp-estrella-llena { color: #ffd54a; } /* amarillo fijo — nunca el acento del tema */

/* ===== Columna lateral: SOLO Genre, Fecha(s) y Rating — fijos en el
   lado izquierdo, aparecen uno por uno y quedan visibles para siempre,
   con margen prudente arriba/abajo/entre ellos que aprovecha toda la
   pantalla (space-evenly reparte ese margen por igual en los bordes y
   entre elementos). ===== */
.exp-zona-lateral {
  position: absolute;
  left: 2rem;
  top: 3rem;
  bottom: 3rem;
  max-width: min(40vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  pointer-events: none;
}

.exp-lateral-item {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
  /* Contraste reforzado: el texto es blanco y debe seguir siendo
     legible incluso sobre imágenes o frames de video claros. */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.exp-lateral-item.exp-lateral-visible { opacity: 1; transform: translateX(0); }

.exp-lateral-etiqueta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.3rem;
}
.exp-lateral-valor {
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ===== UI auto-oculta: barra superior + botón de tráiler ===== */
.exp-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.exp-barra-controles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* Se revela al mover el mouse (Windows) o tocar la pantalla (tablet) —
   ver mostrarControlesTemporal()/_revelarControlesTemporalmente() en
   js/experience.js, que agregan/quitan esta clase; esta regla es la que
   realmente la vuelve visible/interactiva (se había perdido sin querer
   junto con el botón de tráiler bajo demanda, que sí se quitó a
   propósito y no se restaura aquí). */
.experience-overlay.exp-ui-visible .exp-barra-controles {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.exp-boton-back, .exp-boton-details {
  background: rgba(10, 14, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  backdrop-filter: blur(6px);
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.exp-boton-back:hover, .exp-boton-details:hover {
  background: rgba(var(--acento-rgb), 0.35);
  border-color: var(--acento-suave);
}

.exp-controles-derecha { display: flex; gap: 0.6rem; }

/* ===== Botón "Experience" en la topbar de las páginas de detalle ===== */
.boton-experience-topbar.oculto { display: none; }

/* ===== Selector Details/Experience en los catálogos ===== */
.selector-modo-vista {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
  background: var(--superficie);
  flex: 0 0 auto;
}
.selector-modo-vista button {
  border: none;
  background: transparent;
  color: var(--texto-tenue);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.selector-modo-vista button.activo {
  background: var(--acento);
  color: #fff;
}

/* ===== Responsive: tablet ===== */
@media (max-width: 960px) {
  .exp-zona-titulo { top: 36%; }
}

/* ===== Responsive: móvil ===== */
@media (max-width: 640px) {
  .exp-zona-lateral { left: 1.2rem; top: 1.2rem; bottom: 1.2rem; max-width: 66vw; }
  .exp-lateral-valor { font-size: 1rem; }
  .exp-titulo-texto { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  .exp-barra-controles { padding: 0.8rem 1rem; }
}