/* =========================================================
   Invitación de cumpleaños — estilos
   ========================================================= */

/* Fuentes servidas desde el propio sitio (se precargan en el <head>) */
@font-face {
  font-family: "Dancing Script";
  src: url("../fonts/dancing-script.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Mali";
  src: url("../fonts/mali-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Colores reales de los bordes del paisaje (arriba: cielo, abajo: prado).
     Son los que verá el navegador al teñir sus barras. */
  --cielo: #1084e7;
  --prado: #8a9851;
  --rosa: #f4a7b9;
  --rosa-fuerte: #de7590;
  --cafe: #7a5c43;
  --cafe-suave: #9b7b62;
  --ocre: #c4954a;

  --fuente-titulo: "Dancing Script", "Brush Script MT", cursive;
  --fuente-mano: "Caveat", "Segoe Print", cursive;
  --fuente-suave: "Mali", "Quicksand", "Segoe UI", sans-serif;
  --fuente-texto: "Quicksand", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  /* Negro: es el color que toman las barras del navegador. El degradado solo
     se ve un instante, mientras carga el paisaje. */
  background: #000 linear-gradient(var(--cielo), #5fb0ea 55%, var(--prado)) no-repeat;
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--cafe);
  font-family: var(--fuente-texto);
  -webkit-tap-highlight-color: transparent;
}

/* Las <img> llevan width/height reales en el HTML: con height:auto el
   navegador reserva su espacio desde antes de descargarlas. */
img { display: block; max-width: 100%; height: auto; }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Fondo, nubes y pétalos ---------- */

/* El fondo y los pétalos usan la altura "grande" del viewport (lvh): así
   también cubren la zona que queda detrás de las barras del navegador en el
   móvil, que aparecen y desaparecen al desplazarse. */
.fondo,
.petalos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

.fondo {
  z-index: 0;
  background: url("../img/fondo.webp") 40% 50% / cover no-repeat;
  transition: opacity .6s ease;
}

.nube {
  position: absolute;
  left: 0;
  width: clamp(240px, 48vw, 560px);
  opacity: .92;
  animation: deriva var(--dur) linear var(--ret) infinite;
  will-change: transform;
}

.nube--1 { top: 2%;  --dur: 110s; --ret: -30s; }
.nube--2 { top: 16%; --dur: 150s; --ret: -95s; width: clamp(200px, 38vw, 460px); opacity: .85; }
.nube--3 { top: 30%; --dur: 190s; --ret: -60s; width: clamp(260px, 55vw, 620px); opacity: .8; }

@keyframes deriva {
  from { transform: translateX(-70vw); }
  to   { transform: translateX(115vw); }
}

.petalos {
  z-index: 1;
  pointer-events: none;
}

.petalo {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--t);
  height: calc(var(--t) * .72);
  background: var(--c);
  border-radius: 80% 0 80% 0;
  opacity: .85;
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .06);
  animation:
    caer var(--d) linear var(--r) infinite,
    aleteo-petalo 1.7s ease-in-out infinite alternate;
}

@keyframes caer {
  from { transform: translate3d(0, -6vh, 0) rotate(0deg); }
  to   { transform: translate3d(var(--dx), 106vh, 0) rotate(var(--g)); }
}

@keyframes aleteo-petalo {
  from { scale: 1 1; }
  to   { scale: .35 1; }
}

main {
  position: relative;
  z-index: 2;
  /* Lo que sobresale por animaciones (la portada al agrandarse, la tarjeta al
     subir) no debe alargar la página: en escritorio eso hacía aparecer la
     barra de desplazamiento y toda la composición saltaba de lado. */
  overflow: hidden;
  overflow: clip;
}

/* ---------- Carga inicial ----------
   Mientras llegan el fondo, el sobre, el cartel y las fuentes, la escena
   espera oculta y con las animaciones en pausa; al estar todo listo, main.js
   quita la clase y las entradas arrancan desde su primer cuadro. */

.cargando .fondo { opacity: 0; }

.cargando main,
.cargando .petalos { visibility: hidden; }

.cargando *,
.cargando *::before,
.cargando *::after { animation-play-state: paused !important; }

/* =========================================================
   Vista 1 — Portada
   ========================================================= */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11vh 16px max(5vh, env(safe-area-inset-bottom));
  text-align: center;
  overflow: hidden;
  transition: opacity .45s ease, transform .45s ease;
}

.esquina {
  position: absolute;
  z-index: 0;
  width: clamp(130px, 34vw, 300px);
  pointer-events: none;
  animation: aparecer-suave 1.2s ease .1s both;
  transition: opacity .4s ease;
}

.esquina--sup { top: 0; left: 0; }
.esquina--inf { right: 0; bottom: 0; }

.portada__titulo {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(3rem, 14vw, 4.8rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 14px rgba(15, 60, 120, .45), 0 1px 2px rgba(15, 60, 120, .35);
  animation: entrar-arriba 1s cubic-bezier(.2, .8, .3, 1) both;
  transition: opacity .35s ease;
}

.portada--abriendo .portada__titulo,
.portada--abriendo .cartel,
.portada--abriendo .esquina {
  opacity: 0;
}

.portada--salida {
  opacity: 0;
  transform: scale(1.04);
}

@keyframes entrar-arriba {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aparecer-suave {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Sobre (tres capas alineadas: cerrado, interior y bolsillo) ---------- */

.sobre {
  position: relative;
  z-index: 1;
  display: block;
  width: min(88vw, 430px, 48vh);
  /* La caja del botón es solo el sobre cerrado (filas 259–793 del lienzo de
     900×815); el espacio de arriba para la solapa abierta se desborda. */
  aspect-ratio: 900 / 534;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 16px 22px rgba(20, 55, 90, .28));
  animation:
    entrar-sobre .9s cubic-bezier(.2, .8, .3, 1.2) .2s both,
    flotar 3.4s ease-in-out 1.1s infinite alternate;
}

.sobre:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
  border-radius: 12px;
}

.portada--abriendo .sobre {
  animation: none;
  cursor: default;
}

@keyframes entrar-sobre {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes flotar {
  from { transform: translateY(0) rotate(-.8deg); }
  to   { transform: translateY(-8px) rotate(.8deg); }
}

.sobre__lienzo {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(-259 / 534 * 100%);
  height: calc(815 / 534 * 100%);
  display: block;
}

.sobre__cerrado,
.sobre__abierto,
.sobre__interior,
.sobre__bolsillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sobre__abierto {
  display: block;
  opacity: 0;
  transform-origin: 50% 97%;
}

/* La carta vive entre el interior y el bolsillo; se recorta por abajo
   para que nunca asome por debajo del sobre. */
.sobre__carta {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: inset(-300% -20% 4% -20%);
}

.sobre__carta img {
  position: absolute;
  top: 43.5%;
  left: 12%;
  width: 76%;
}

/* ---------- Cartel "Toca para abrir" ---------- */

.cartel {
  position: relative;
  z-index: 1;
  width: min(54vw, 250px, 26vh);
  margin: 1.2rem 0 auto;
  cursor: pointer;
  transform-origin: 50% 0;
  filter: drop-shadow(0 8px 10px rgba(20, 55, 90, .22));
  animation:
    aparecer-suave .8s ease .9s both,
    columpio 2.8s ease-in-out 1.7s infinite alternate;
  transition: opacity .35s ease;
}

@keyframes columpio {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}

/* =========================================================
   Vista 2 — Invitación abierta
   ========================================================= */

.invitacion {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.escena {
  position: relative;
  width: min(100%, 480px);
  min-height: max(100svh, 640px);
  display: grid;
  place-items: center;
  padding: 13vh 0 11vh;
}

.entra {
  animation: aparecer .9s cubic-bezier(.2, .8, .25, 1.15) var(--retraso, 0s) both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(26px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Tarjeta (papel de carta + texto) ---------- */

.tarjeta {
  position: relative;
  z-index: 2;
  width: min(86%, 360px);
  margin: 0;
  filter: drop-shadow(0 14px 20px rgba(40, 60, 40, .28));
}

.tarjeta.entra {
  animation-name: subir;
  animation-duration: 1.1s;
}

@keyframes subir {
  from { opacity: 0; transform: translateY(32vh) scale(.6); }
  45%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

.tarjeta__papel { width: 100%; }

.tarjeta__guirnalda {
  position: absolute;
  top: -11%;
  left: -8%;
  z-index: 1;
  width: 116%;
  max-width: none;
  pointer-events: none;
}

.tarjeta__contenido {
  position: absolute;
  inset: 15% 12% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tarjeta__intro {
  margin: 0 auto .4rem;
  max-width: 14em;
  font-family: var(--fuente-suave);
  font-weight: 500;
  font-size: clamp(.95rem, 4vw, 1.12rem);
  line-height: 1.35;
  text-wrap: balance;
  color: #a0785e;
}

.tarjeta__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(2.3rem, 10.5vw, 3rem);
  line-height: 1;
  color: #8a5a44;
  outline: none;
}

.tarjeta__nombre span {
  display: block;
  margin-top: .12em;
  font-size: .62em;
  color: var(--rosa-fuerte);
}

.tarjeta__divisor {
  display: block;
  width: 58%;
  height: auto;
  aspect-ratio: 8 / 1;
  margin: .7rem auto .55rem;
}

.tarjeta__fecha {
  margin: 0;
  font-weight: 700;
  font-size: clamp(.85rem, 3.6vw, 1rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ocre);
}

.tarjeta__hora {
  margin: .05rem 0 .6rem;
  font-family: var(--fuente-mano);
  font-weight: 500;
  font-size: clamp(1.2rem, 5.2vw, 1.45rem);
  color: var(--cafe);
}

.tarjeta__lugar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .3rem .85rem;
  border: 1.5px dashed rgba(196, 149, 74, .55);
  border-radius: 999px;
  background: rgba(255, 252, 244, .6);
  font-weight: 700;
  font-size: clamp(.85rem, 3.6vw, 1rem);
  color: var(--cafe);
}

.tarjeta__lugar svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--rosa-fuerte);
}

/* ---------- Decoraciones ---------- */

.globos,
.globos-regalos,
.personaje-gris,
.personaje-naranja {
  position: absolute;
  pointer-events: none;
}

.globos {
  top: 1.5%;
  left: -2%;
  z-index: 1;
  width: 36%;
}

.globos img {
  width: 100%;
  transform-origin: 50% 100%;
  animation: mecer 4s ease-in-out infinite alternate;
}

@keyframes mecer {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-10px) rotate(3deg); }
}

/* Los personajes y los globos con regalos se anclan a las esquinas del papel */
.personaje-naranja {
  top: -4%;
  left: -4%;
  z-index: 3;
  width: 15%;
}

.personaje-naranja img {
  width: 100%;
  transform-origin: 50% 90%;
  animation: llama 1.3s ease-in-out infinite alternate;
}

@keyframes llama {
  0%   { transform: translateY(0) scale(1, 1) rotate(-2deg); filter: brightness(1); }
  50%  { transform: translateY(-4px) scale(.97, 1.05) rotate(1deg); filter: brightness(1.08); }
  100% { transform: translateY(-8px) scale(1.02, .98) rotate(2deg); filter: brightness(1.02); }
}

.globos-regalos {
  left: -8%;
  bottom: -11%;
  z-index: 3;
  width: 50%;
}

.personaje-gris {
  right: -7%;
  bottom: -7%;
  z-index: 3;
  width: 31%;
  filter: drop-shadow(0 8px 8px rgba(30, 50, 30, .25));
}

.personaje-gris img {
  width: 100%;
  transform-origin: 50% 100%;
  animation: respirar 3.2s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.025, .975); }
}

.volver {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 5;
  padding: .45rem .95rem;
  border: 1px solid rgba(160, 120, 80, .25);
  border-radius: 999px;
  background: rgba(255, 250, 240, .88);
  color: var(--cafe);
  font: 600 .8rem var(--fuente-texto);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.volver:hover { background: #fffaf0; }

.volver:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ---------- Pantallas bajitas (ej. iPhone SE) ---------- */

@media (max-height: 700px) {
  .portada { padding-top: 8vh; }
  .escena { padding: 12vh 0 10vh; }
  .tarjeta { width: min(76%, 320px); }
  .tarjeta__nombre { font-size: clamp(2rem, 9vw, 2.6rem); }
  .tarjeta__divisor { margin: .45rem auto .4rem; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .petalos { display: none; }
}