/* ============================================================
   LETTER.CSS — La carta interactiva de 4 partes
   El espectador presiona, las 4 solapas se abren y la tarjeta
   de invitacion sale y se posiciona en la pantalla principal.
   ============================================================ */

/* ── ESCENARIO DE LA CARTA (mientras esta cerrada) ───────────── */
#letter-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 20;
  transition: opacity 0.5s ease;
}

#letter-stage.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Estrellas sutiles de fondo */
#letter-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 45%, rgba(196,201,209,0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

#letter-hint {
  color: #000000a3;
  /* font-family: 'Helvetica Neue', Arial, sans-serif; — desactivado a pedido */
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.75;
  animation: hintPulse 2.4s ease-in-out infinite;
}

/* ── CAJA DE LA CARTA (contenedor 3D) ─────────────────────────── */
#letter-box {
  position: relative;
  width: 400px;
  height: 360px;
  perspective: 1000px;
  cursor: pointer;
  animation: floatLetter 4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

/* ── SOBRE DE 2 SOLAPAS (estilo sobre de correo real) ────────
   Contenedor RECTANGULAR HORIZONTAL (como un sobre real, no una
   tarjeta vertical). RESETEADO a un reparto limpio, SIN TRASLAPE:
   la solapa INFERIOR (cuerpo/bolsillo fijo que sostiene la tarjeta)
   ocupa el 25% de abajo, y la SUPERIOR (la unica que se abre,
   girando hacia atras sobre su borde superior / hinge fold) ocupa
   el 75% de arriba. 25 + 75 = 100%, cada una vive en su propio
   espacio exclusivo — no se encima ni se tapan entre si.
   #letter-box se agrando de 320x220 a 400x360 para que la solapa
   superior (75% de 360 = 270px de alto) tenga una proporcion mas
   cercana a la de la foto real (1080x720 = 3:2), asi "contain" deja
   a la imagen casi sin franjas vacias.
   Ambas comparten el mismo fondo (background-size = alto total de
   la caja) para el modo de UNA sola foto compartida (envelopePhoto).
   Sin foto configurada, cae al degradado de color de siempre
   (data-driven desde main.js). */
.flap {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--envelope-dk);
  background-image: linear-gradient(160deg, var(--envelope), var(--envelope-dk));
  background-repeat: no-repeat;
  background-size: 100% 360px;
  box-shadow: inset 0 0 0 1px rgba(139, 106, 40, 0.15);
}

/* .flap.has-photo: marcador aplicado por JS cuando hay UNA sola foto
   compartida configurada (images.envelopePhoto). El background-image
   real lo pone main.js inline (URL absoluta) para evitar el gotcha de
   url() dentro de custom properties, que se resuelve relativo a la
   hoja de estilos en vez de al documento HTML. Mantiene el
   background-size heredado de .flap (100% 220px) para que ambas
   solapas armen UNA sola imagen continua entre las 2 piezas.

   .flap.has-own-photo: marcador cuando la solapa tiene SU PROPIA foto
   independiente (images.envelopeTopPhoto / envelopeBottomPhoto). Aqui
   NO queremos el recorte compartido — cada imagen se muestra completa
   dentro de su propia solapa, y SIN el relleno solido gris/blanco de
   .flap detras (background-color: transparent) para que donde el PNG
   tenga transparencia (o le sobre espacio con "contain"), se vea el
   fondo real de la escena en vez de una ranura palida.

   OJO con el anclaje (background-position): el contenedor de cada
   solapa es MUY ancho y MUY bajo (recorte panoramico), asi que
   "cover" siempre recorta bastante alto/bajo de la imagen original.
   Cada foto de sobre trae su diseño pegado a UN borde (la superior
   arriba, la inferior abajo) — anclamos el recorte a ese mismo
   borde para no mostrar por accidente una zona vacia/transparente
   del centro de la imagen. */
.flap.has-own-photo {
  background-size: cover;
  background-color: transparent;
}

/* CAMBIO: la superior usa un tamano FIJO en pixeles (405x270) en vez
   de "cover", calculado una sola vez para el contenedor base de
   400x270px sobre la imagen real de 1080x720 (factor de escala
   0.375). Con "cover" normal, cada vez que agrandabamos la solapa
   para "juntar" las 2 piezas, el navegador recalculaba el zoom de
   la foto para seguir cubriendo el contenedor mas grande — se veia
   como si la imagen se acercara/alejara con cada ajuste de traslape.
   Con el tamano congelado, la foto SIEMPRE se ve al mismo zoom; el
   espacio extra que se agregue con el traslape (calc(75% + Npx) en
   .flap-top mas abajo) queda transparente y deja ver la solapa
   inferior a traves — asi se "juntan" sin que la imagen cambie de
   tamano nunca. */
.flap-top.has-own-photo {
  background-size: 404px 270px;
  background-position: top center;
}

.flap-bottom.has-own-photo {
  background-position: bottom center;
}

.flap-bottom {
  bottom: 80px;
  height: 17%;
  border-radius: 0 0 6px 6px;
  background-position: left bottom;
  z-index: 2;
}

.flap-top {
  top: 0;
  height: 220px;   /* recorte fijo del CONTENEDOR (400x220), NO de la
                      imagen -- el background-size de la foto se queda
                      intacto en 404px 270px, sin tocar su zoom */
  border-radius: 0px 0px 0 0;
  background-position: left top;
  transform-origin: top;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 3;
}

/* Reverso de la solapa superior (el "interior" del sobre). Rotado
   180 grados respecto al frente, con su propio backface-visibility
   oculto: solo se hace visible una vez que la solapa pasa los 90
   grados de giro, evitando que la pieza "desaparezca" a la mitad
   de la animacion. Asi siempre se ve algo solido: frente (foto)
   o reverso (color), nunca un hueco vacio. */
.flap-top::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 0 0;
  background: var(--card-bg);
  backface-visibility: hidden;
  transform: rotateX(180deg);
}

/* Estado "abierto" — se agrega via JS. Solo la solapa superior
   se mueve: gira 175 grados hacia atras sobre su borde superior
   (como levantar la tapa de un sobre real), mostrando su reverso
   en vez de desaparecer, y queda visible ahi arriba. */
.flap-top.open { transform: rotateX(175deg); }

/* ── SELLO CENTRAL (boton visual, no interactivo aparte) ──────── */
.letter-seal-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--seal);
  background-size: cover;
  background-position: center;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform 0.3s ease, opacity 0.4s ease;
}

.letter-seal-btn.hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

/* Cuando hay foto de sello configurada: se quita el rojo de fondo
   (--seal). La imagen se muestra completa/original (sin recortar
   ni hacer zoom) — el PNG ya trae su propio fondo transparente, asi
   que sus margenes dejan ver lo que haya detras (la foto del sobre)
   en vez de un color solido. */
.letter-seal-btn.has-photo {
  background-color: transparent;
  background-size: contain;
}

/* ── TARJETA DE INVITACION (aparece y se posiciona en pantalla) ── */
#invitation {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  background: var(--bg);
  scroll-behavior: smooth;   /* para que los links del menu (href="#id")
                                bajen suave de forma nativa, sin JS extra */
}

@media (prefers-reduced-motion: reduce) {
  #invitation { scroll-behavior: auto; }
}

#invitation.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── ANIMACIONES ─────────────────────────────────────────────── */
@keyframes floatLetter {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}

@keyframes sealShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg);   }
  20%       { transform: translate(-50%, -50%) rotate(-8deg);  }
  40%       { transform: translate(-50%, -50%) rotate(8deg);   }
  60%       { transform: translate(-50%, -50%) rotate(-6deg);  }
  80%       { transform: translate(-50%, -50%) rotate(6deg);   }
}

.seal-shake { animation: sealShake 0.4s ease !important; }