/* ============================================================
   EL RECORRIDO · escena.css
   1) Estados iniciales del movimiento (solo con JS y sin "reducir movimiento").
   2) El recorrido pinneado de compu: <html class="escena">, que pone
      recorrido.js solo en pantallas de 900 px o más y con movimiento.
   ============================================================ */

/* ---------- 1. Entrada de la portada y apariciones ---------- */

/* La entrada de la portada es de CSS (antes la hacía GSAP, que ahora se carga recién con el primer gesto):
   la fachada asienta (1,06 → 1), el título entra palabra por palabra con un desenfoque que se resuelve
   (0,7 s cada una, 70 ms entre palabras, desde los 0,3 s) y después la bajada, los botones y los créditos.
   Todo termina a los ~1,4 s: más larga, Google la contaba como página que todavía no terminó de verse.
   Las barras de cine están en portada.css. Cuando llega el motor (main.js), <html class="intro-fin">
   corta la entrada donde esté y deja todo en su lugar para que la escena del scroll tome las riendas. */
@media (prefers-reduced-motion: no-preference) {
  .con-js [data-intro] { opacity: 0; }
  .con-js [data-plano-intro] { animation: plano-asienta 1400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .con-js .pt-pal[data-intro] { animation: pal-entra 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(300ms + var(--k, 0) * 70ms) both; }
  .con-js .pel-texto > [data-intro], .con-js .creditos [data-intro] { animation: resto-entra 600ms cubic-bezier(0.33, 1, 0.68, 1) calc(700ms + var(--k, 0) * 60ms) both; }
  .intro-fin [data-intro], .intro-fin [data-plano-intro] { animation: none !important; }
  .intro-fin [data-intro] { opacity: 1; }
  .con-js.mov [data-rv] { opacity: 0; transform: translateY(22px); }
  .con-js.mov [data-rv].rv-in {
    opacity: 1;
    transform: none;
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: var(--rv-d, 0ms);
  }
}
@keyframes plano-asienta { from { transform: scale(1.06); } to { transform: none; } }
@keyframes pal-entra { from { opacity: 0; filter: blur(8px); transform: translateY(14%); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes resto-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Escena de compu ---------- */

/* La portada (video, vidriera, "Pasá.") está en portada.css */

/* La columna blanca que pasa delante de la cámara y cambia de plano.
   Va del borde de abajo de la barra fija al piso de la pantalla: así el capitel y la base
   se ven enteros en cualquier ancho y nunca quedan tapados por la barra. */
.escena .columna {
  display: block;
  position: absolute;
  top: var(--hdr); left: 0;
  z-index: 4;
  width: var(--col-w, 180px);
  height: calc(100% - var(--hdr));
  transform: translateX(110vw);
}
/* El dibujo de la columna blanca del salón (capitel, fuste y base): uno solo para todo el sitio.
   Lo usan la portada (.columna, de "Pasá." a "Sentate.") y la galería del salón (.salon-columna, secciones.css);
   cada una la ubica y la mueve a su manera. */
.columna-dibujo { will-change: transform; pointer-events: none; }
.columna-capitel, .columna-fuste, .columna-base { position: absolute; left: 0; right: 0; }
.columna-capitel {
  top: 0; height: 10%;
  background:
    linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.14) 62% 64%, transparent 64% 76%, rgba(0,0,0,.12) 76% 78%, transparent 78%),
    linear-gradient(90deg, #d9d7d0, #f6f5f1 30%, #f6f5f1 62%, #cfcdc6);
}
.columna-fuste {
  top: 10%; bottom: 8%;
  left: 11%; right: 11%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.24)),
    repeating-linear-gradient(90deg, #f3f2ee 0 15px, #d8d6cf 15px 18px);
}
.columna-base {
  bottom: 0; height: 8%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0 3%, transparent 3% 30%, rgba(0,0,0,.1) 30% 33%, transparent 33%),
    linear-gradient(90deg, #d4d2cb, #f4f3ef 32%, #f4f3ef 60%, #ccc9c2);
}

.escena .cartel {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  transform: translateX(110vw);
  will-change: transform;
}
.escena .cartel-dentro { position: absolute; inset: 0; will-change: transform; }
.cartel-dentro picture { position: absolute; inset: 0; }
/* los sillones van abajo en la foto: se ancla abajo para que nunca se corten */
.cartel-dentro img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
/* la placa va arriba, sobre la pared amarilla: el sillón queda libre */
.cartel-placa {
  position: absolute;
  left: var(--gut);
  top: calc(var(--hdr) + clamp(16px, 3.5svh, 40px));
  max-width: 560px;
  padding: 26px 30px 28px;
  border-radius: var(--r);
  background: var(--placa);
  display: grid;
  gap: 10px;
}
.cartel-tit {
  font-family: var(--f-disp);
  font-stretch: 74%;
  font-weight: 850;
  font-size: clamp(72px, 8vw, 132px);
  line-height: 0.86;
  text-transform: uppercase;
}
.cartel-tx { font-size: 18px; color: var(--tx-2); max-width: 40ch; }


/* ============ Escena en celular y tablet parada (html.escena.escena-v) ============
   El mismo recorrido que en compu: la puerta, el video vertical a pantalla completa y la columna.
   Las placas de texto dejan lugar al botón de WhatsApp de abajo. */
:root { --cel-h: calc(84px + env(safe-area-inset-bottom)); } /* lugar del botón de WhatsApp */

.escena-v .cartel-dentro img { object-position: 50% 100%; }
.escena-v .cartel-placa { left: var(--gut); right: var(--gut); top: calc(var(--hdr) + 12px); padding: 18px 20px 20px; max-width: 520px; }
.escena-v .cartel-tit { font-size: clamp(60px, 18vw, 96px); }
.escena-v .cartel-tx { font-size: 16px; }

@media (min-width: 900px) { :root { --cel-h: 0px; } }