/* ============================================================
   LA PELÍCULA · portada.css
   Pantalla completa: la vereda de noche. La fachada HD llena el alto de la pantalla
   (nunca más grande que su tamaño real, 1267 × 1241) y la calle oscura la continúa a los costados.
   Encima, un velo de cine, el título enorme abajo a la izquierda y los créditos en la franja de abajo.
   Al cargar, dos barras negras se abren como el arranque de una película.
   Al bajar (escena, pelicula.js) la cámara empuja la puerta de vidrio y adentro arranca el video: "Pasá.".
   ============================================================ */

.portada {
  --cred-h: 64px;
  --tx-cine: #f2f1ed;
  /* la fachada: alto de la pantalla menos la barra de arriba, con tope en su tamaño real */
  --fh: min(calc(100svh - var(--hdr)), 1241px);
  --fw: calc(var(--fh) * 1267 / 1241);
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* ---------- La escena: la calle de noche ---------- */
.pel-escenario {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* continúa los bordes de la foto: cielo y paredes casi negros, la vereda gris abajo,
     y la luz cálida de la vidriera que se derrama sobre la calle */
  background:
    radial-gradient(ellipse 46% 52% at var(--luz-x, 70%) 62%, rgba(230, 182, 46, 0.16), rgba(230, 182, 46, 0) 70%),
    linear-gradient(180deg, #06070b 0%, #0d0e12 26%, #17171b 58%, #1f1f23 80%, #4a4a4f 91%, #6f6e74 100%);
}

.pel-fachada {
  position: absolute;
  z-index: 0;
  top: max(var(--hdr), calc(50% - var(--fh) / 2 + var(--hdr) / 2));
  /* apaisada: corrida a la derecha, el título queda sobre la calle */
  left: max(calc(50% - var(--fw) / 2), calc(100% - var(--fw) - clamp(0px, 4vw, 80px)));
  width: var(--fw);
  height: var(--fh);
  margin: 0;
  /* los costados se funden con la calle */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 84%, transparent 100%);
}
.pel-fachada img { width: 100%; height: 100%; max-width: none; }
/* parada (celular, tablet): la fachada cubre la pantalla y se recortan los costados, la puerta al centro */
/* parada (celular, tablet): afiche de cine. La fachada entera de ancho (el cartel se lee completo),
   arriba, y su vereda se funde con la calle oscura donde va el título */
@media (orientation: portrait) {
  .portada { --fw: min(108vw, 1267px); --fh: calc(var(--fw) * 1241 / 1267); }
  .pel-fachada {
    left: calc(50% - var(--fw) / 2);
    top: var(--hdr);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  }
  .pel-escenario {
    background:
      radial-gradient(ellipse 80% 34% at 50% calc(var(--hdr) + var(--fh) * 0.86), rgba(230, 182, 46, 0.22), rgba(230, 182, 46, 0) 70%),
      linear-gradient(180deg, #06070b 0%, #0d0e12 40%, #141417 70%, #1b1b1f 100%);
  }
}

/* Del otro lado del vidrio: el video (solo en la escena) */
.entrada {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transform-origin: 0 0;
  background: #0d0d0e;
}
.entrada-dentro { position: absolute; inset: 0; transform-origin: 0 0; }
.entrada-poster img,
.entrada-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
/* el video aparece recién cuando ya corre: debajo está su primer cuadro, igual, así que no se nota el cambio */
.entrada-video { opacity: 0; transition: opacity 400ms ease; }
.entrada-video.listo { opacity: 1; }

/* El velo: oscuro abajo y a la izquierda, donde va el texto, con una viñeta de lente en las esquinas */
.velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.72) 24%, rgba(8, 8, 10, 0.3) 50%, rgba(8, 8, 10, 0) 68%),
    linear-gradient(90deg, rgba(8, 8, 10, 0.78) 0%, rgba(8, 8, 10, 0.45) 30%, rgba(8, 8, 10, 0) 60%),
    radial-gradient(ellipse 120% 100% at 60% 45%, rgba(8, 8, 10, 0) 55%, rgba(8, 8, 10, 0.5) 100%);
}

/* ---------- Las barras de proporción (se abren al cargar) ---------- */
.cine-barra {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 50.5%;
  background: #0b0b0c;
  transform: scaleY(0);
  pointer-events: none;
  will-change: transform;
}
.cine-arriba { top: 0; transform-origin: 50% 0; }
.cine-abajo { bottom: 0; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* cerradas hasta que corre la entrada; si el JS no llega, se abren solas */
  .con-js .cine-barra { transform: scaleY(1); animation: abrir-barra 0.5s 2.4s var(--ease-io) forwards; }
}
@keyframes abrir-barra { to { transform: scaleY(0); } }

/* ---------- El texto sobre el video ---------- */
.pel-texto {
  position: absolute;
  z-index: 4;
  left: var(--gut);
  right: var(--gut);
  bottom: calc(var(--cred-h) + clamp(22px, 4.6svh, 56px));
  display: grid;
  justify-items: start;
  gap: clamp(14px, 2.2svh, 24px);
  color: var(--tx-cine);
}

.portada-tit {
  font-family: var(--f-disp);
  font-size: clamp(44px, min(13vw, 15.6svh), 212px);
  font-stretch: 64%;
  font-weight: 880;
  line-height: 0.95;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  text-wrap: nowrap;
  color: var(--tx-cine);
}
.pt-linea { display: block; }
.pt-pal { display: inline-block; }
.portada-tit .pt-em {
  display: inline-block;
  margin-top: 0.08em;
  font-size: 0.4em;
  font-stretch: 100%;
  font-weight: 760;
  text-transform: none;
  line-height: 1.05;
  letter-spacing: 0;
}

.portada-bajada {
  max-width: 34ch;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.45;
  color: rgba(242, 241, 237, 0.9);
  text-wrap: pretty;
}
.portada-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* el secundario va sobre el video: aro claro, en los dos temas */
.btn-cine {
  background: rgba(11, 11, 12, 0.28);
  color: var(--tx-cine);
  box-shadow: inset 0 0 0 1.5px rgba(242, 241, 237, 0.62);
}
@media (hover: hover) and (pointer: fine) {
  .btn-cine:hover { background: rgba(11, 11, 12, 0.5); box-shadow: inset 0 0 0 1.5px var(--tx-cine); }
}

/* ---------- Los créditos: la franja de abajo ---------- */
.creditos {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cred-h);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--gut);
  background: var(--bg);
  color: var(--tx);
  font-size: 14.5px;
  line-height: 1.2;
}
.cred { display: flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; }
.cred-et {
  font-family: var(--f-disp);
  font-stretch: 118%;
  font-weight: 650;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.cred-estado { display: inline-flex; align-items: center; gap: 9px; }
.creditos .google { min-height: 44px; color: var(--tx-2); gap: 6px; }
.creditos .google b { font-size: 17px; }
.cred:last-child { margin-left: auto; }

/* "Pasá.": aparece cuando la cámara cruza la puerta */
.entrada-texto {
  display: none;
  position: absolute;
  z-index: 5;
  left: var(--gut);
  bottom: calc(var(--cel-h, 0px) + clamp(28px, 6svh, 64px));
  margin: 0;
  font-family: var(--f-disp);
  font-stretch: 64%;
  font-weight: 880;
  font-size: clamp(84px, min(16vw, 24svh), 230px);
  line-height: 0.84;
  text-transform: uppercase;
  color: var(--tx-cine);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ---------- Celular y tablet parada ---------- */
@media (max-width: 699.98px) {
  .portada { --cred-h: calc(92px + env(safe-area-inset-bottom)); }
  .portada-tit { font-size: clamp(42px, 15.4vw, 76px); }
  .portada-tit .pt-em { font-size: 0.46em; }
  .creditos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 0 16px;
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 14px;
  }
  .cred { min-height: 40px; gap: 10px; }
  .cred:first-child { grid-column: 1; grid-row: 1; min-height: 36px; }
  .cred:first-child .cred-et { display: none; }
  .cred:last-child { grid-column: 2; grid-row: 1; }
  .estado { grid-column: 1 / -1; grid-row: 2; }
  .cred-et { font-size: 10px; letter-spacing: 0.16em; }
  .estado .cred-et { display: none; }
  .cred:last-child { margin-left: 0; }
  .cred:last-child .cred-et { display: none; }
  .velo {
    background:
      linear-gradient(0deg, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.8) 34%, rgba(8, 8, 10, 0.3) 52%, rgba(8, 8, 10, 0) 64%);
  }
}
@media (orientation: portrait) and (min-width: 700px) {
  .portada-tit { font-size: clamp(60px, 14vw, 150px); }
  .velo {
    background:
      linear-gradient(0deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.7) 28%, rgba(11, 11, 12, 0.26) 55%, rgba(11, 11, 12, 0) 72%),
      rgba(11, 11, 12, 0.14);
  }
}
/* pantallas bajas (notebook 1366 × 768 y menos) */
@media (min-width: 700px) and (max-height: 800px) {
  .portada { --cred-h: 58px; }
  .pel-texto { gap: 14px; }
}

/* ---------- La escena (con movimiento): el empujón a la puerta y "Pasá." ---------- */
.escena .pel-fachada { will-change: transform; }
.escena .entrada { display: block; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.escena .entrada-dentro { will-change: transform; }
.escena .entrada-texto { display: block; opacity: 0; visibility: hidden; }
.escena .cartel { z-index: 6; }
.escena .columna { z-index: 7; }

/* la barra de "Pedir turno" del celular no tapa los créditos mientras se ve la portada */
.en-portada .barra-cel { transform: translateY(110%); }

/* celulares angostos: la insignia de Google queda en "4,3 ★" (las reseñas siguen para el lector de pantalla) */
@media (max-width: 380px) {
  .creditos .google span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* tablet: los créditos sin rótulos para que entren en una franja */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .creditos { gap: 24px; }
  .cred-et { display: none; }
}