/* La puerta. Pantalla partida: el resto es la pared de ladrillo de su carta,
   el hostal es el crema del sitio. Las dos mitades son claras, así que lo que
   las separa es la textura y el filo de un pixel entre ellas, no el tono.
   Las dos mitades son enlaces de verdad, así que esto funciona sin JavaScript;
   js/portal.js solo agrega la entrada y el vuelo de salida.

   Acá los colores van escritos a mano y no por token, a propósito: esta es la
   única página que muestra las dos paletas al mismo tiempo, y un token tiene un
   solo valor por página. Son los mismos valores que css/base.css y css/resto.css,
   y la prueba de contraste los cubre desde allá. */

.portal {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;

  /* La pared de ladrillo del resto, el mismo SVG que css/resto.css. Va como
     variable y no pegado al fondo de la mitad porque el vuelo de salida la
     necesita: la manta que crece hasta tapar la pantalla tiene que llevar la
     misma textura o el cambio de página se nota como un salto de material. */
  --pared: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='84'%3E%3Cg fill='none' stroke='%23fffaf4' stroke-opacity='.40'%3E%3Cpath d='M0 .5h240M0 42.5h240M.5 0v42M120.5 0v42M60.5 42v42M180.5 42v42'/%3E%3C/g%3E%3Cg fill='none' stroke='%23231d19' stroke-opacity='.038'%3E%3Cpath d='M0 1.5h240M0 43.5h240'/%3E%3C/g%3E%3C/svg%3E");
}

.portal__marca {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3; text-align: center; font-size: 26px; color: var(--fondo);
  mix-blend-mode: difference; pointer-events: none;
}
.portal__marca span {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Flex y no grid: la mitad que se mira crece y la otra cede, y eso es un
   flex-basis que se transiciona. Con grid habría que animar el
   grid-template, que no interpola parejo entre navegadores. */
.puertas {
  flex: 1; display: flex; flex-direction: column;
  gap: 1px; background: rgb(33 28 25 / 0.18);
}

.puerta {
  position: relative; z-index: 1;
  flex: 1 1 50%;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 56px 26px; text-decoration: none;
  border: 0;
  animation: latido 2.4s ease-in-out infinite;
}

/* El resto es la pared de su carta. */
.puerta--resto {
  background-color: #eaddd3; color: #211c19; animation-delay: 0s;
  background-image: var(--pared);
}
.puerta--resto .etiqueta, .puerta--resto .puerta__texto { color: rgb(33 28 25 / 0.76); }
.puerta--resto .puerta__pie { color: #98411f; }

/* El hostal es de día */
.puerta--hostal { background: #f3efe8; color: #191512; animation-delay: 1.2s; }
.puerta--hostal .etiqueta, .puerta--hostal .puerta__texto { color: rgb(25 21 18 / 0.62); }
.puerta--hostal .puerta__pie { color: #c2542f; }

.puerta__nombre {
  display: inline-block; align-self: flex-start;
  font-family: var(--serif); font-size: clamp(46px, 13vw, 96px); line-height: 1;
}
.puerta__texto { max-width: 34ch; font-size: 16px; }
/* Siempre visible, nunca solo en hover: con el latido apagado es lo único
   que dice que esto se puede clickear. */
.puerta__pie {
  align-self: flex-start;
  font-family: var(--mono); font-size: 13px; margin-top: 8px;
}

/* Respiración. Las dos mitades van desfasadas 1.2s para que no pulsen juntas. */
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* —— El hover de la portada ————————————————————————————————————————————————
   La que se mira crece hasta el 56% y baja el color de la otra. Vale igual
   para el mouse y para el teclado: cada :hover viene con su :focus-visible.
   Todo esto usa los tokens de css/movimiento.css. */
@media (prefers-reduced-motion: no-preference) {
  .puerta {
    transition: flex-basis var(--m-dur-panel) var(--m-ease-out),
                opacity var(--m-dur-panel) var(--m-ease-out),
                filter var(--m-dur-panel) var(--m-ease-out);
  }
  .puertas:hover .puerta:not(:hover):not(:focus-visible),
  .puertas:focus-within .puerta:not(:hover):not(:focus-visible) {
    filter: saturate(0.7); opacity: 0.75; flex-basis: 44%;
  }
  .puertas .puerta:hover, .puertas .puerta:focus-visible { flex-basis: 56%; }

  /* El nombre se despega un poco y respira. No es scale: el scale del latido
     ya está usando el transform del panel, y dos animaciones peleando por la
     misma propiedad tiemblan. */
  .puerta__nombre {
    transition: transform var(--m-dur-panel) var(--m-ease-out),
                letter-spacing var(--m-dur-panel) var(--m-ease-out);
  }
  .puerta:hover .puerta__nombre, .puerta:focus-visible .puerta__nombre {
    transform: translateY(-6px); letter-spacing: 0.01em;
  }

  /* El pie se subraya de izquierda a derecha y la flecha se corre. */
  .puerta__pie { position: relative; }
  .puerta__pie::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform var(--m-dur-micro) var(--m-ease-micro);
  }
  .puerta:hover .puerta__pie::after,
  .puerta:focus-visible .puerta__pie::after { transform: scaleX(1); }
  .puerta:hover .m-flecha, .puerta:focus-visible .m-flecha { transform: translateX(4px); }
}

/* La capa donde vuelan la marca y el nombre del mundo camino al header de la
   página siguiente. Encima de todo y sin recibir clics: es una película, no
   una interfaz. La arma js/portal.js. */
.portal__morph {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
}

/* Mientras dura la salida no se puede volver a clickear ni se ve la costura
   entre las dos mitades: lo que queda es un solo color creciendo. */
.portal[data-saliendo="true"] .puertas { background: transparent; }
.portal[data-saliendo="true"] { pointer-events: none; }

.portal__pie {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-family: var(--mono); font-size: 11px; text-align: center;
  color: var(--fondo); mix-blend-mode: difference; pointer-events: none;
}

@media (min-width: 720px) {
  .puertas { flex-direction: row; }
  .puerta { padding: 0 clamp(28px, 5vw, 64px); }
}