/* ============================================================
   Recorrido cinematográfico — escenario fijo que se recorre con
   el scroll. Adaptado del motor de scroll narrativo de MotionSites
   a las fotos reales de las dos sedes: el plano de Francisco
   Alcayde se abre en dos como unas puertas y detrás aparece
   Benisanó, luego la sala grande y por último las tarjetas.
   ============================================================ */

.cine {
  position: relative;
  height: calc(100svh + 3600px);
}

.cine-escena {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
  color: #fff;
}

.cine-mundo { position: absolute; inset: 0; overflow: hidden; }

.cine-img,
.cine-mitad {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

/* --- capa 1: la sede de Benisanó, al fondo, que se revela --- */
.cine-fondo {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--fondo-x, 0px), var(--fondo-y, 0px), 0) scale(var(--fondo-escala, 1.16));
  filter: blur(var(--fondo-blur, 0px)) brightness(var(--fondo-brillo, 1));
}

/* --- capa 2: la sala grande, que entra después --- */
.cine-sala {
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(118vw, 2000px);
  height: auto;
  opacity: var(--sala-op, 0);
  transform: translate3d(-50%, -50%, 0) scale(var(--sala-escala, 1.08));
}

/* --- capa 3: el plano de Alcayde, partido en dos hojas --- */
.cine-mitad {
  inset: 0;
  z-index: 5;
  overflow: hidden;
}
.cine-mitad img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cine-mitad-izq {
  clip-path: inset(0 50% 0 0);
  transform: translate3d(var(--hoja-izq-x, 0px), var(--hoja-y, 0px), 0) scale(var(--hoja-escala, 1));
  transform-origin: 20% 50%;
}
.cine-mitad-der {
  clip-path: inset(0 0 0 50%);
  transform: translate3d(var(--hoja-der-x, 0px), var(--hoja-y, 0px), 0) scale(var(--hoja-escala, 1));
  transform-origin: 80% 50%;
}
/* la juntura: una línea de luz mientras están cerradas */
.cine-mitad-izq::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: #ffffff40;
  opacity: var(--juntura, 0);
}

.cine-velo {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(180deg, #17130f99 0%, #17130f00 34%),
    linear-gradient(0deg, #17130fdb 0%, #17130f4d 30%, #17130f00 62%);
}
/* Oscurecido general: sin esto el texto blanco de los paneles cae sobre las
   paredes blancas de las fotos y no se lee nada. */
.cine-velo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 50% 46%, #17130ff5 0%, #17130fd1 52%, #17130f96 100%),
    #17130f80;
  opacity: var(--oscuro, 0);
}

/* --- rótulo --- */
.cine-titulo {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: clamp(15vh, 20vh, 24vh);
  width: min(94vw, 1500px);
  margin: 0;
  text-align: center;
  line-height: .82;
  letter-spacing: -.045em;
  transform: translate3d(-50%, var(--titulo-y, 0px), 0) scale(var(--titulo-escala, 1));
  opacity: var(--titulo-op, 1);
  text-shadow: 0 8px 60px #17130f66;
}
.cine-titulo b {
  display: block;
  font-size: clamp(3rem, 11.5vw, 11rem);
  font-weight: 800;
}
.cine-titulo em {
  display: block;
  margin-top: .12em;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-style: normal;
  font-size: clamp(1.4rem, 4.6vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: #ffffffe0;
}

.cine-intro {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(3.5rem, 12vh, 9rem);
  width: min(640px, calc(100vw - 2.5rem));
  text-align: center;
  transform: translate3d(-50%, var(--intro-y, 0px), 0);
  opacity: var(--intro-op, 1);
}
.cine-intro p {
  margin: 0 auto 1.4rem;
  font-size: var(--t-l);
  color: #ffffffe0;
  text-shadow: 0 2px 20px #17130f80;
}
.cine-pastillas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.cine-pastillas span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.15rem;
  border-radius: 100px;
  background: #ffffffed;
  color: var(--tinta);
  font-size: var(--t-s);
  font-weight: 600;
  box-shadow: 0 12px 30px #17130f2e;
}

/* --- paneles de texto que entran con cada plano --- */
.cine-panel {
  position: absolute;
  z-index: 9;
  left: 50%;
  width: min(720px, calc(100vw - 2.5rem));
  text-align: center;
  pointer-events: none;
}
.cine-panel h2 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.03em;
  text-shadow: 0 16px 44px #17130f8c;
}
.cine-panel p {
  width: min(500px, 100%);
  margin: 1.4rem auto 0;
  color: #fffffff0;
  font-size: var(--t-l);
  text-shadow: 0 2px 20px #17130f99;
}
.cine-panel-2 {
  top: 52%;
  opacity: var(--panel2-op, 0);
  transform: translate3d(-50%, var(--panel2-y, -50%), 0);
}
.cine-panel-3 {
  top: 34%;
  opacity: var(--panel3-op, 0);
  transform: translate3d(-50%, var(--panel3-y, -50%), 0);
}

.cine-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 4.5rem);
  width: min(460px, 100%);
  margin: clamp(2rem, 5vh, 3.4rem) auto 0;
}
.cine-datos dt {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  text-shadow: 0 14px 34px #17130f80;
}
.cine-datos dd {
  margin: .7rem 0 0;
  font-size: var(--t-s);
  color: #ffffffd6;
  text-shadow: 0 2px 18px #17130f99;
}

/* --- carrusel de espacios que entra volando --- */
.cine-tarjetas {
  position: absolute;
  z-index: 10;
  left: 0; right: 0;
  top: var(--tarj-top, 22vh);
  visibility: var(--tarj-vis, hidden);
  transform: translate3d(var(--tarj-x, 420vw), 0, 0);
  transform-origin: 0 0;
  pointer-events: auto;
  will-change: transform;
}
.cine-pista {
  display: flex;
  align-items: stretch;
  gap: clamp(.8rem, 1.2vw, 1.4rem);
  transform: translate3d(calc(var(--pista-x, 0px) - 16vw), 0, 0);
  transition: transform .64s var(--curva);
  will-change: transform;
}
.cine-pista.saltando { transition: none; }

.espacio {
  position: relative;
  flex: 0 0 clamp(280px, 21vw, 380px);
  min-height: 232px;
  padding: 1.5rem;
  border: 1px solid #ffffff5c;
  border-radius: 24px;
  background: var(--papel);
  color: var(--tinta);
  text-align: left;
  box-shadow: 0 18px 52px #17130f2e;
  cursor: pointer;
  user-select: none;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.espacio:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.espacio-tipo {
  display: block;
  margin-bottom: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rojo);
}
.espacio h3 {
  margin: 0 0 .5rem;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.espacio p {
  margin: 0;
  font-size: var(--t-s);
  color: var(--humo);
  line-height: 1.5;
}
.espacio-precio {
  position: absolute;
  left: 1.5rem;
  bottom: 1.4rem;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.espacio-precio small { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 500; color: var(--humo); }
.espacio-sede {
  position: absolute;
  right: 1.4rem;
  bottom: 1.6rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--humo);
}
.espacio p { margin-bottom: 3.4rem; }

.cine-mandos {
  position: absolute;
  z-index: 11;
  left: clamp(1.25rem, 4vw, 3rem);
  top: var(--mandos-top, calc(22vh + 252px));
  display: flex;
  gap: .8rem;
  opacity: var(--mandos-op, 0);
  pointer-events: none;
}
.cine-mandos.listo { pointer-events: auto; }
.cine-mando {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100px;
  background: #fffffff0;
  color: var(--tinta);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 18px 36px #17130f33;
  transition: background .3s var(--curva-suave), transform .4s var(--curva);
}
.cine-mando:hover { background: var(--rojo); color: #fff; transform: translateY(-2px); }

/* aviso de que hay que bajar */
.cine-bajar {
  position: absolute;
  z-index: 12;
  left: 50%; bottom: 1.2rem;
  translate: -50% 0;
  width: 1px; height: 42px;
  background: linear-gradient(#fff0, #fffc);
  opacity: var(--intro-op, 1);
}

@media (max-width: 900px) {
  .cine { height: calc(100svh + 2100px); }
  .cine-panel-2 { top: 50%; }
  .cine-panel-3 { top: 30%; }
  .espacio { flex-basis: min(78vw, 320px); }
  .cine-mandos { top: var(--mandos-top, calc(20vh + 252px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cine { height: auto; }
  .cine-escena { position: relative; height: 84svh; }
  .cine-mitad-izq, .cine-mitad-der { clip-path: none; }
  .cine-mitad-der, .cine-sala, .cine-panel, .cine-tarjetas, .cine-mandos { display: none; }
  .cine-pista { transition: none; }
}