/* La puerta: intro de cine al abrir la portada (21 sep 2026, idea de Aldo).
   La puerta cerrada con el nombre → se abre y se enciende la luz → la cámara entra por el vano entre
   destellos dorados → se despliega el sitio. Una vez por visita, se salta con un clic y no sale con
   «movimiento reducido». La escena son dos imágenes del generador (herramientas/generador-puerta-fis.html):
   el cuarto a oscuras y el mismo cuarto ya encendido, que se funde encima mientras la puerta se abre
   (sale igual que una capa de luz transparente y pesa 20 veces menos). La hoja es HTML para poder girarla. */

.puerta { display: none; }
.intro-activa { overflow: hidden; }
.intro-activa .puerta {
  display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #050a13; cursor: pointer;
  /* red de seguridad: si el código no llega, la intro se va sola y no bloquea el sitio */
  animation: puertaSeVa .6s ease 8s forwards;
}
.intro-activa.puerta-andando .puerta { animation: none; }
@keyframes puertaSeVa { to { opacity: 0; visibility: hidden; } }

/* El sitio espera detrás: sus animaciones de entrada arrancan cuando la puerta termina */
.intro-activa .portada h1 .linea, .intro-activa .muro, .intro-activa .muro-col { animation-play-state: paused !important; }

/* La escena cubre la pantalla como un «cover» y se acerca hacia el centro del vano */
.puerta-escena {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, calc(100vh * 16 / 9)); height: max(100vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%) scale(var(--z, 1)); transform-origin: 50% 43.75%;
  opacity: var(--aparece, 0); will-change: transform;
}
.puerta-escena picture, .puerta-escena img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.puerta-luz { opacity: var(--luz, 0); }
/* el vano, en las medidas exactas del generador (formato ancho) */
.puerta-vano {
  position: absolute; left: 44.896%; top: 23.981%; width: 10.208%; height: 39.537%;
  perspective: 900px; perspective-origin: 100% 50%;
  box-shadow: 0 0 calc(18px * var(--fuga, 0)) rgba(244, 237, 223, calc(.55 * var(--fuga, 0)));
}
.puerta-hoja {
  position: absolute; inset: 0; transform-origin: 100% 50%; transform: rotateY(calc(-75deg * var(--abre, 0)));
  background: linear-gradient(90deg, #26344c, #0b1422);
}
/* el canto libre de la hoja atrapa la luz mientras se abre */
.puerta-hoja::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #A88A5C;
  box-shadow: 0 0 calc(14px * var(--abre, 0)) rgba(244, 237, 223, calc(.85 * var(--abre, 0)));
}

.puerta-destellos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.puerta-blanco {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--blanco, 0);
  background: radial-gradient(60% 60% at 50% 50%, #fbf6ea 0%, #f4edde 45%, #d9c7a2 100%);
}

.puerta-nombre {
  position: absolute; left: 0; right: 0; bottom: 11vh; text-align: center; pointer-events: none;
  opacity: var(--nombre, 0); transform: translateY(calc((1 - var(--nombre, 0)) * 10px));
}
.puerta-nombre b { display: block; font: 500 clamp(30px, 3.6vw, 56px)/1.1 "Cormorant Garamond", serif; letter-spacing: .08em; color: rgba(244, 237, 223, .95); }
.puerta-nombre span { display: block; margin-top: 12px; font: 400 clamp(11px, 1.05vw, 15px)/1.4 "Italiana", serif; letter-spacing: .42em; color: #A88A5C; }

.puerta-saltar {
  position: absolute; right: 20px; bottom: 20px; z-index: 2; appearance: none; cursor: pointer;
  font: 500 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244, 237, 223, .7); background: rgba(5, 10, 19, .5); border: 1px solid rgba(168, 138, 92, .45);
  border-radius: 999px; padding: 10px 16px; opacity: var(--nombre, 0);
}
.puerta-saltar:focus-visible { outline: 2px solid #A88A5C; outline-offset: 3px; }

/* En vertical, las capas y las medidas del formato vertical del generador */
@media (orientation: portrait) {
  .puerta-escena { width: max(100vw, calc(100vh * 9 / 16)); height: max(100vh, calc(100vw * 16 / 9)); transform-origin: 50% 45%; }
  .puerta-vano { left: 37.778%; top: 30%; width: 24.537%; height: 30%; }
  .puerta-nombre { bottom: 13vh; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-activa { overflow: auto; }
  .intro-activa .puerta { display: none; }
}