/* ==========================================================================
   La primera página del libro, en el paso entre el índice y el libreto
   (ver tests/primera.test.mjs). El índice acaba en ella, a pantalla llena (la
   .tesela-primera de css/entrada.css, abierta), y el libreto empieza cubierto
   de ella, idéntica: con su título y en el mismo sitio. Al volver, al revés.
   Antes era papel liso, y el título desaparecía de golpe: un instante de
   página en blanco.
   ========================================================================== */

:root {
  /* El alto de la pantalla, el que se ve (en el iPhone, sin las barras) */
  --alto-pantalla: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --alto-pantalla: 100dvh;
  }
}

/* Lo que llena la pantalla, más un 8 % (como la deja el índice: la cámara se
   mete en ella hasta cubrirla), centrada, en la proporción de la página */
.primera {
  --proporcion: 0.651162;
  --ancho: calc(max(100vw, var(--alto-pantalla) * var(--proporcion)) * 1.08);
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1000;
  width: var(--ancho);
  height: calc(var(--ancho) / var(--proporcion));
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(circle at 55% 45%, #fbf8f1 10%, #ece5d6 90%);
  color: #2f3742;
  font-family: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  text-align: center;
  pointer-events: none;
}

.primera p {
  margin: 0;
}

/* Las medidas de .tesela-primera, en anchos de la página */
.primera-titulo {
  margin-top: 36% !important;
  padding: 0 8%;
  font-size: calc(var(--ancho) * 0.08);
  line-height: 1.05;
}

.primera-poeta {
  margin-top: 4% !important;
  font-size: calc(var(--ancho) * 0.032);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.primera-disco {
  margin-top: auto !important;
  margin-bottom: 9% !important;
  font-size: calc(var(--ancho) * 0.03);
  font-style: italic;
  opacity: 0.55;
}

/* El libreto: viniendo del índice, empieza bajo ella y la desvanece cuando
   está listo (lo dice js/paneles.js); al volver al índice, se cubre de ella
   antes de irse */
.desde-papel .primera,
.hacia-papel .primera {
  display: flex;
}

.desde-papel .primera {
  animation: papel-fuera 0.7s ease both;
  animation-play-state: paused;
}

.desde-papel.papel-listo .primera {
  animation-play-state: running;
}

.hacia-papel .primera {
  animation: papel-dentro 0.35s ease both;
}

/* El índice: volviendo del libreto, empieza bajo ella hasta montar la suya,
   abierta, y cerrarla (lo dice js/rejilla.js) */
.con-papel .primera {
  display: flex;
}

@keyframes papel-fuera {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes papel-dentro {
  from {
    opacity: 0;
  }
}