/* ⚠ **La puerta NO sigue el tema del sitio.** Es una pantalla a sangre sobre
   vídeo, igual que la portada y que el visor de la obra: aquí la tipografía es
   clara y el fondo lo oscurece el velo, da igual que el resto de la web sea
   papel.

   Al pasar el sitio a claro esto se rompió entero y **no dio ningún error**:
   `--tinta` dejó de ser hueso y pasó a ser tinta oscura, así que el lema «Del
   plano a la realidad» se quedó en negro sobre unas nubes oscuras y el botón
   ENTRAR en negro sobre negro. Los elementos estaban ahí, con su tamaño y su
   sitio, del color del fondo.

   Por eso los colores de este archivo van escritos y no por variable de tema.
   Si alguna vez se vuelve a cambiar la paleta del sitio, esta hoja no se toca.
*/
/* ==========================================================================
   LA PUERTA — pantalla de entrada
   --------------------------------------------------------------------------
   Dos actos sobre el mismo paisaje: primero la barra de carga con el
   porcentaje en display serif; después, el logo, la frase y un solo botón.

   La regla de esta pantalla es que no haya nada más. Un menú, tres enlaces y
   un aviso de galletas convertirían una puerta en un vestíbulo, y un vestíbulo
   no impresiona a nadie.
   ========================================================================== */

.puerta{
  position:fixed; inset:0; z-index:1000;
  display:grid; align-items:center; justify-items:center;
  background:#1B2A3C;
  transition:opacity 1.5s var(--e-salida), visibility 1.5s;
}
.puerta.fuera{ opacity:0; visibility:hidden; pointer-events:none; }
.puerta.sin-paisaje{ background:#14120F; }   /* respaldo oscuro, no el papel del sitio */

#cordillera{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ==========================================================================
   EL PAISAJE EN METRAJE
   --------------------------------------------------------------------------
   Ocupa lo mismo que ocupaba el lienzo de la cordillera y va en la misma capa,
   así que el velo, la trama y el texto siguen encima sin tocar una línea.

   `object-fit:cover` no es opcional: un vídeo es 16:9 y una pantalla es lo que
   sea. Sin él, en un monitor ancho salen dos franjas negras y en un móvil
   vertical el paisaje se estira. Con él siempre se llena la pantalla y lo que
   sobra se recorta por los lados, que en un mar de nubes no le importa a nadie.

   `object-position` un poco por encima del centro: la cordillera está en el
   tercio superior del encuadre y al recortar en vertical es lo primero que se
   pierde. Es la única parte de la imagen que no se puede sacrificar — sin
   montañas esto son nubes y ya está. */
.puerta__cine{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 38%;
  /* El punto desde el que crece al volar: hacia el horizonte, no hacia el
     centro geométrico de la pantalla. Se entra por donde está la luz. */
  transform-origin:50% 40%;
  will-change:transform, filter;
  background:#1B2A3C;      /* mientras no hay ni cartel */
}

/* Cuando el vídeo no ha podido arrancar queda su cartel, que es el primer
   fotograma. Se le da una deriva muy lenta para que la puerta no se quede del
   todo quieta: no es el vídeo, pero tampoco es una postal clavada. */
.puerta__cine--fija{ animation:derivaCartel 42s linear infinite alternate; }
@keyframes derivaCartel{
  from{ transform:scale(1.06) translate3d(-1%, 0, 0); }
  to  { transform:scale(1.12) translate3d( 1%, -1%, 0); }
}

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

/* Un velo cálido: separa el texto del paisaje sin taparlo.
   El elipse del centro no estaba en el primer intento y hacía falta: el logo
   caía justo sobre la banda de nubes iluminada y la parte clara de la marca
   se perdía. Un texto ilegible sobre un fondo precioso sigue siendo un texto
   ilegible. */
/* ⚠ **Recalibrado para el metraje.**

   Estos valores estaban ajustados para la cordillera dibujada, que era un
   amanecer de tonos apagados. El vídeo es un mar de nubes a mediodía: mucho más
   claro, y sobre todo claro **justo donde va el texto**. En la primera captura
   el logotipo desaparecía — la parte blanca de «Construxions» se fundía con las
   nubes y sólo se leía «TERRA», que va en rojo.

   Lo que cambia es dónde pesa el velo, no cuánto. Antes bajaba en diagonal
   porque la obra vivía en el tercio derecho; aquí no hay nada que proteger a la
   derecha —son nubes en todas partes— así que se carga la esquina de abajo a la
   izquierda, que es el bloque de logo, frase y botón, y se deja limpio el
   horizonte con la cordillera, que es lo que hay que enseñar. */
.puerta__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* 1 · la columna del texto: abajo a la izquierda, y con fuerza */
    radial-gradient(78% 62% at 12% 84%, rgba(19,18,15,.94) 0%,
                                        rgba(19,18,15,.72) 42%, transparent 76%),
    /* 2 · el peso lateral de siempre, más suave que antes */
    linear-gradient(100deg, rgba(19,18,15,.72) 0%, rgba(19,18,15,.46) 38%,
                            rgba(19,18,15,.10) 68%, rgba(19,18,15,.02) 100%),
    /* 3 · el pie, para el rótulo de abajo */
    radial-gradient(120% 70% at 50% 114%, rgba(19,18,15,.86), transparent 56%),
    /* 4 · y una sombra alta que asienta la cordillera contra el cielo */
    linear-gradient(to bottom, rgba(19,18,15,.52) 0%, rgba(19,18,15,.06) 30%);
}

/* La retícula de la referencia: líneas finas al veinte por ciento. Aquí se
   quedan en el ocho, porque sobre un cielo claro el veinte grita. */
.puerta__trama{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:12.5vw 12.5vw;
  mask-image:radial-gradient(130% 100% at 50% 50%, #000 30%, transparent 88%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 50%, #000 30%, transparent 88%);
}

/* ------------------------------------------------------------- acto 1 */
.puerta__carga{
  position:relative; z-index:2; width:min(540px, 74vw); text-align:center;
  transition:opacity .9s var(--e-cine), transform .9s var(--e-cine);
}
.puerta__carga.fuera{ opacity:0; transform:translateY(-10px); pointer-events:none; }

.puerta__pct{
  font-family:var(--f-display);
  font-size:clamp(62px, 11vw, 132px); font-weight:400; line-height:1;
  color:#EFE9DC; letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(24,18,17,.5);
  font-variant-numeric:tabular-nums;
}
.puerta__pct span{ font-size:.42em; margin-left:.08em; opacity:.62; }

.puerta__linea{
  margin-top:22px; height:1px; background:rgba(255,255,255,.26);
  position:relative; overflow:hidden;
}
.puerta__linea i{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  background:#EFE9DC;
}

/* ------------------------------------------------------------- acto 2 */
.puerta__centro{
  position:relative; z-index:2; text-align:left;
  width:min(620px, 84vw);
  justify-self:start; margin-left:clamp(22px, 7vw, 120px);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.6s var(--e-salida), transform 1.6s var(--e-salida);
  pointer-events:none;
}
.puerta.abierta .puerta__centro{ opacity:1; transform:none; pointer-events:auto; }
/* Al arrancar el vuelo el texto se va rápido y hacia arriba: se queda atrás,
   como todo lo demás. */
.puerta.volando .puerta__centro{
  opacity:0; transform:translateY(-26px) scale(1.04);
  transition:opacity .42s ease-in, transform .9s var(--e-cine);
}
.puerta.volando .puerta__pie,
.puerta.volando .puerta__trama,
.puerta.volando .puerta__velo{ opacity:0; transition:opacity .5s ease-in; }

.puerta__logo{
  display:block; width:min(300px, 56vw); height:auto; margin:0 0 30px;
  filter:drop-shadow(0 6px 34px rgba(24,18,17,.55));
}

.puerta__lema{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px, 5.6vw, 68px); line-height:1.05;
  color:#EFE9DC; margin:0 0 18px;
  text-shadow:0 4px 38px rgba(24,18,17,.55);
}
.puerta__lema em{ font-style:italic; color:#E4CBA4; }

.puerta__nota{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(239,233,220,.72);
  margin:0 0 34px;
  text-shadow:0 2px 20px rgba(24,18,17,.7);
}

.puerta__btn{
  font-family:var(--f-cota); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; cursor:pointer;
  padding:15px 40px; color:#EFE9DC;
  background:rgba(24,18,17,.72); border:1px solid rgba(233,224,206,.28);
  border-radius:var(--r-0);
  transition:background .5s var(--e-cine), border-color .5s, letter-spacing .5s, color .5s;
}
.puerta__btn:hover{
  background:#EFE9DC; color:#14120F;
  border-color:#EFE9DC; letter-spacing:.32em;
}
.puerta__btn:focus-visible{ outline:1px solid #EFE9DC; outline-offset:5px; }

.puerta__pie{
  position:absolute; bottom:26px; left:0; right:0; z-index:2;
  text-align:center; font-size:9px; letter-spacing:.24em;
  color:rgba(239,233,220,.45);
  opacity:0; transition:opacity 1.6s var(--e-cine) .5s;
}
.puerta.abierta .puerta__pie{ opacity:1; }

@media (max-width: 720px){
  .puerta__trama{ background-size:25vw 25vw; }
  .puerta__logo{ margin-bottom:22px; }
  .puerta__centro{ text-align:center; justify-self:center; margin-left:0; }
  .puerta__logo{ margin-left:auto; margin-right:auto; }
  .puerta__velo{ background:
      linear-gradient(180deg, rgba(19,18,15,.55) 0%, rgba(19,18,15,.28) 38%,
                              rgba(19,18,15,.86) 82%, rgba(19,18,15,.95) 100%); }
}
@media (prefers-reduced-motion: reduce){
  .puerta, .puerta__centro, .puerta__carga, .puerta__pie{ transition-duration:.3s; }
}


/* --------------------------------------------------------------- fogonazo */
/* La luz del amanecer al salir por encima de las nubes. Además de ser bonita
   hace un trabajo sucio: tapa el instante en que se quita la puerta y aparece
   el sitio. Un corte escondido en un destello no se ve; un corte a pelo, sí. */
.fogonazo{
  position:fixed; inset:0; z-index:1001; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, #FFF6E4 0%, #FBE7C4 42%, #E9CFA6 100%);
  opacity:0;
}
.fogonazo.entra{ transition:opacity .5s ease-out; opacity:1; }
.fogonazo.sale{ transition:opacity 1.1s var(--e-salida); opacity:0; }

@media (prefers-reduced-motion: reduce){
  .fogonazo.entra, .fogonazo.sale{ transition-duration:.25s; }
}