/* ─────────────────────────────────────────────────────────────
   La presentación: lo que ve la primera vez que abre la app.

   Va aparte de styles.css porque es una pieza cerrada, se usa una
   vez y no comparte nada con el resto. Y a diferencia de la app,
   esto no sigue el tema del móvil: es de noche siempre, porque las
   estrellas necesitan un cielo oscuro para verse.
   ───────────────────────────────────────────────────────────── */

.presentacion{
  position:fixed;inset:0;z-index:200;
  background:radial-gradient(120% 90% at 50% 34%, #2A1620 0%, #170E14 55%, #0E080B 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .9s ease;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
.presentacion.dentro{opacity:1}
.presentacion.fuera{opacity:0;transition:opacity .7s ease}

.pres-cielo{position:absolute;inset:0;width:100%;height:100%;display:block}

.pres-escena{
  position:relative;z-index:2;
  width:min(100%, 34rem);
  padding:0 30px calc(env(safe-area-inset-bottom) + 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:100%;
}

/* Cada bloque entra desde abajo, muy poco: lo justo para que se note
   que llega y no que aparece de golpe. */
.pres-bloque{
  position:absolute;left:0;right:0;
  padding:0 30px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  opacity:0;transform:translateY(14px);
  animation:pres-entra 1.2s cubic-bezier(.22,.8,.28,1) forwards;
}
.pres-bloque.abajo{top:62%}
/* La frase del cierre va por debajo del pico del corazón. El nombre y
   la dedicatoria no llevan clase: los coloca el código con las medidas
   del corazón que hay dibujado, que es más fiable que un porcentaje. */
.pres-bloque.bajo-el-corazon{top:64%}
.pres-bloque.suelto{animation:none;opacity:1;transform:none}

/* El texto que va dentro del corazón: más pequeño y más apretado, que
   ahí dentro no sobra sitio. */
.pres-en-hueco{
  font-size:clamp(15px, 4.2vw, 19px);
  line-height:1.36;
}

/* ── el texto se escribe, no aparece ──────────────────────────
   Cada palabra entra por su turno, subiendo un poco y saliendo de un
   desenfoque. Leído seguido, da la sensación de que alguien lo está
   diciendo en vez de que un cartel se ha encendido. */
.pres-palabra{
  display:inline-block;
  opacity:0;
  transform:translateY(9px);
  filter:blur(5px);
  will-change:opacity, transform, filter;
}
.dentro .pres-palabra{
  animation:pres-palabra .66s cubic-bezier(.22,.8,.28,1) both;
  animation-delay:calc(var(--i) * 62ms);
}
@keyframes pres-palabra{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.pres-bloque.fuera{animation:pres-sale .9s ease forwards}

@keyframes pres-entra{to{opacity:1;transform:translateY(0)}}
@keyframes pres-chispazo{
  0%{opacity:0;transform:scale(.4) rotate(-40deg)}
  60%{opacity:1;transform:scale(1.35) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes pres-sale{to{opacity:0;transform:translateY(-12px)}}

.pres-grande{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(21px, 5.6vw, 30px);
  font-style:italic;
  line-height:1.42;
  color:#FFF1F4;
  letter-spacing:-.01em;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(217,85,126,.35);
}

.pres-titulo{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:clamp(19px, 4.8vw, 25px);
  font-style:italic;
  color:#FFD9E2;
  text-wrap:balance;
}

.pres-lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
  width:100%;
}
.pres-lista li{
  display:flex;gap:11px;align-items:flex-start;
  text-align:left;
  font-size:clamp(15px, 4.1vw, 18px);
  line-height:1.5;
  color:#F6E4E9;
  text-wrap:pretty;
}
/* La estrella se enciende primero y las palabras salen detrás. */
.pres-lista li .pres-estrella{
  opacity:0;
  animation:pres-chispazo .7s ease forwards;
}
.pres-lista li.dentro .pres-estrella{animation-play-state:running}

.pres-estrella{
  color:var(--rose);
  font-size:13px;line-height:1.7;
  flex:none;
  text-shadow:0 0 14px rgba(217,85,126,.9);
}

.pres-nombre{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px, 10vw, 56px);
  color:#fff;
  letter-spacing:-.02em;
  text-shadow:0 2px 40px rgba(217,85,126,.55);
}

/* El icono de la app, para que la última imagen antes de entrar sea
   justo la que va a tener en la pantalla de inicio. */
.pres-marca{
  width:78px;height:78px;border-radius:23px;
  background:var(--rose);
  display:grid;place-items:center;
  box-shadow:0 12px 44px rgba(217,85,126,.45);
}
.pres-marca span{
  font-family:var(--font-display);font-style:italic;font-size:42px;
  color:#fff;line-height:1;margin-top:-2px;
}
.pres-app{
  margin:0;
  font-family:var(--font-display);
  font-size:26px;color:#FFF1F4;letter-spacing:-.01em;
}

.pres-saltar{
  position:absolute;z-index:3;
  right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  color:#F3D9E1;
  border-radius:999px;padding:9px 17px;
  font-size:13.5px;font-weight:600;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:pres-entra .8s ease forwards;
}
.pres-saltar:active{transform:scale(.96)}

.sin-scroll{overflow:hidden}

/* Quien pide menos movimiento tiene la misma presentación, más corta
   y sin cosas volando. El corazón se sigue dibujando: es el regalo. */
@media (prefers-reduced-motion: reduce){
  .pres-bloque{animation-duration:.5s}
  .pres-palabra{filter:none;transform:none}
  .dentro .pres-palabra{animation-duration:.3s;animation-delay:calc(var(--i) * 18ms)}
  .pres-lista li .pres-estrella{animation-duration:.3s}
}