/* ─────────────────────────────────────────────────────────────
   PANTALLA DE ENTRADA (js/entrada.js)
   Tapa la invitación mientras carga y pide un toque para abrirla:
   ese toque es el que Safari necesita para reproducir los videos.
   ───────────────────────────────────────────────────────────── */

/* Mientras está la entrada: sin scroll y la portada espera para animarse */
html.cargando,
html.cargando body {
  overflow: hidden;
}

html.cargando .portada,
html.cargando .portada * {
  animation-play-state: paused !important;
}

/* El panel no lleva entrada */
html.sin-entrada .entrada {
  display: none;
}

.entrada {
  position: fixed;
  margin-top: 0px;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  text-align: center;
  color: var(--sobre-video);
  /* Deja ver un poco la foto de fondo, oscurecida */
  background: rgba(28, 17, 12, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .9s var(--suave), visibility .9s;
}

.entrada.abriendo {
  opacity: 0;
  visibility: hidden;
}

.entrada-contenido {
  display: grid;
  justify-items: center;
  gap: 14px;
  transition: transform .9s var(--suave);
}

.entrada.abriendo .entrada-contenido {
  transform: scale(1.04);
}

.entrada-flor {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  animation: girar-lento 6s linear infinite;
}

.entrada.lista .entrada-flor {
  animation-duration: 40s;
}

.entrada-nombres {
  font: 400 clamp(38px, 10vw, 60px)/1.05 var(--letra-titulos);
  font-style: italic;
}

.entrada-estado {
  font: 500 12.5px/1.3 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
  min-height: 1.3em;
}

.entrada-boton {
  margin-top: 10px;
  min-height: 48px;
  padding: 0 30px;
  border: 1px solid rgba(255, 250, 240, .7);
  border-radius: 999px;
  background: transparent;
  color: var(--sobre-video);
  font: 600 13px/1 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--suave), transform .8s var(--suave), background .3s, color .3s;
}

.entrada.lista .entrada-boton {
  opacity: 1;
  transform: none;
}

.entrada-boton:hover,
.entrada-boton:active {
  background: var(--sobre-video);
  color: var(--noche);
}

.entrada-boton:disabled {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {

  .entrada,
  .entrada-contenido,
  .entrada-boton {
    transition-duration: .2s;
  }

  .entrada-flor {
    animation: none;
  }
}