/* ==========================================================================
   ENVELOPE — sobre horizontal de invitación visto DE CERCA, a sangre completa
   (llena la pantalla del teléfono, sin marco). Los bordes laterales se van; se
   ve el centro. La solapa superior baja con ángulos ABIERTOS que salen por los
   COSTADOS (no por las esquinas) hasta el sello. Al abrir: la carta sale por
   DELANTE de la solapa y por DETRÁS del frente inferior.
   Estados: .is-open (abriendo) y .is-gone (escena desvanecida).
   ========================================================================== */

/* Bloqueo de scroll mientras el sobre está cerrado */
body.envelope-locked { overflow: hidden; height: 100svh; }

/* Reset instantáneo del sobre (para reproducir la animación sin recargar). */
.envelope.is-resetting,
.envelope.is-resetting *,
.envelope.is-resetting *::before,
.envelope.is-resetting *::after {
  animation: none !important;
  transition: none !important;
}

.envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--nude-200);
  transition: opacity 0.9s var(--ease-out), visibility 0.9s var(--ease-out);
}
.envelope-scene.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---- Sobre: a sangre completa (en desktop se topea y centra) ---- */
.envelope {
  --seal-y:     47%;    /* punta de la solapa superior / centro del sello */
  --flap-side:  32%;    /* dónde sale la solapa superior por los costados */
  --bottom-side: 64%;   /* dónde sale la solapa inferior por los costados */

  --env-face:   #F3E7CE;   /* frente / laterales */
  --env-flap:   #F7EEDB;   /* solapa superior (un punto más clara) */
  --env-bottom: #ECDDBB;   /* solapa inferior (un punto más oscura) */
  --env-lining: #E3D2AB;   /* interior (se ve al abrir la solapa) */
  --env-seam:   rgba(150, 110, 45, 0.15);

  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 540px);
}

/* Interior del sobre (se revela cuando la solapa se abre) */
.envelope__lining {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--env-lining), #d5c095);
}
.envelope__lining::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(80,55,10,0.20), transparent 40%);
}

/* Frente del sobre = todo por debajo de la V de la solapa superior.
   Queda por DELANTE de la carta. */
.envelope__front {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--env-face);
  clip-path: polygon(
    0 var(--flap-side),
    50% var(--seal-y),
    100% var(--flap-side),
    100% 100%,
    0 100%
  );
}
/* Solapa inferior (tono): del sello hacia abajo, sale por los costados. */
.envelope__front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--env-bottom), var(--env-face) 70%);
  clip-path: polygon(
    0 var(--bottom-side),
    50% var(--seal-y),
    100% var(--bottom-side),
    100% 100%,
    0 100%
  );
}
/* Costura superior de la solapa inferior (línea que sale del sello a los lados) */
.envelope__front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(
    0 calc(var(--bottom-side) - 1%),
    50% calc(var(--seal-y) - 1%),
    100% calc(var(--bottom-side) - 1%),
    100% var(--bottom-side),
    50% var(--seal-y),
    0 var(--bottom-side)
  );
  background: var(--env-seam);
}

/* Solapa superior: desde arriba hasta el sello, ángulos abiertos que salen por
   los costados. Se abre girando hacia atrás. */
.envelope__flap {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg, var(--env-flap), var(--env-face));
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--flap-side),
    50% var(--seal-y),
    0 var(--flap-side)
  );
  transform-origin: center top;
  transform: perspective(1400px) rotateX(0deg);
  filter: drop-shadow(0 4px 6px rgba(150, 110, 45, 0.18));
}
.envelope.is-open .envelope__flap {
  animation: flap-open 0.95s var(--ease-in-out) forwards;
}
@keyframes flap-open {
  0%   { transform: perspective(1400px) rotateX(0deg);    z-index: 5; }
  49%  {                                                   z-index: 5; }
  50%  { transform: perspective(1400px) rotateX(-150deg); z-index: 1; }
  100% { transform: perspective(1400px) rotateX(-172deg); z-index: 1; }
}

/* ---- Carta (sale del sobre) ---- */
.letter {
  position: absolute;
  top: 20%; left: 50%;
  width: min(74%, 320px);
  height: 60%;
  z-index: 3;                    /* entre solapa-abierta(1) y frente(4) */
  transform: translateX(-50%) translateY(0);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--nude-50), #fff);
  border: 1px solid var(--nude-300);
  box-shadow: 0 8px 20px rgba(30,20,8,0.14);
  display: grid;
  place-items: center;
  transition: transform 1s var(--ease-out) 0.55s;
}
.letter__inner { text-align: center; padding: var(--sp-5); opacity: 0; transition: opacity 0.5s ease 1.1s; }
.envelope.is-open .letter { transform: translateX(-50%) translateY(-30%); }
.envelope.is-open .letter__inner { opacity: 1; }

.letter__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--ink);
  margin-top: var(--sp-3);
}
.letter__sub {
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--gold-dark);
  line-height: 1;
}

/* ---- Sello de lacre (centro, punta de la solapa) ---- */
.wax-seal {
  position: absolute;
  top: var(--seal-y); left: 50%;
  z-index: 6;
  width: clamp(4rem, 24vw, 6rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease-out), opacity 0.35s var(--ease-out);
}
/* Provisional por CSS hasta enchufar la imagen del lacre */
.wax-seal--css {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(90,60,10,0.35),
    0 4px 10px rgba(30,20,8,0.28);
  clip-path: polygon(
    50% 0%, 63% 6%, 78% 4%, 84% 18%, 97% 27%, 92% 42%, 100% 55%,
    90% 66%, 94% 82%, 78% 86%, 68% 98%, 52% 92%, 38% 99%, 27% 88%,
    12% 90%, 9% 74%, 0% 62%, 7% 47%, 2% 33%, 16% 26%, 18% 9%, 34% 8%
  );
  animation: seal-pulse 2.8s var(--ease-in-out) infinite;
}
/* Definitivo por imagen: <img class="wax-seal__img" src="assets/images/sello.png"> */
.wax-seal__img {
  width: 122%; height: 122%;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(30,20,8,0.30));
  animation: seal-pulse-soft 2.8s var(--ease-in-out) infinite;
}
.wax-seal__mono {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 3.6vw, 1.15rem);
  color: rgba(90, 60, 10, 0.78);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
@keyframes seal-pulse {
  0%, 100% { box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(90,60,10,0.35), 0 4px 10px rgba(30,20,8,0.28), 0 0 0 0 rgba(193,152,75,0); }
  50%      { box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(90,60,10,0.35), 0 4px 10px rgba(30,20,8,0.28), 0 0 0 10px rgba(193,152,75,0.10); }
}
@keyframes seal-pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.envelope.is-open .wax-seal {
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
}
.envelope.is-open .wax-seal--css,
.envelope.is-open .wax-seal__img { animation: none; }

/* ---- Iconito de "tocá" (mano) abajo a la derecha ---- */
.envelope__tap {
  position: absolute;
  right: 9%; bottom: 6%;
  z-index: 7;
  width: 2.6rem; height: 2.6rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background:
    no-repeat center / 55%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A67C34' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5V6a1.5 1.5 0 0 1 3 0v4.5'/%3E%3Cpath d='M12 10.5V5a1.5 1.5 0 0 1 3 0v5.5'/%3E%3Cpath d='M15 11V7.5a1.5 1.5 0 0 1 3 0V14c0 3-2.2 5.5-5.2 5.5H11c-1.6 0-2.6-.7-3.5-1.8l-2.6-3.3a1.5 1.5 0 0 1 2.3-1.9L9 14'/%3E%3C/svg%3E");
  animation: tap-bob 2.2s var(--ease-in-out) infinite;
}
@keyframes tap-bob {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
  50%      { transform: translateY(-3px) scale(0.96); opacity: 1; }
}

/* ---- Caption al pie ---- */
.envelope-hint {
  position: absolute;
  left: 50%; bottom: max(env(safe-area-inset-bottom), var(--sp-5));
  transform: translateX(-50%);
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  opacity: 0;
  animation: hint-in 0.8s ease 2s forwards;
}
.envelope-hint__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-dark);
}
.envelope-hint__divider {
  width: 5rem; height: 0.8rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cg stroke='%23C1984B' stroke-width='1' fill='none'%3E%3Cline x1='6' y1='6' x2='50' y2='6'/%3E%3Cline x1='70' y1='6' x2='114' y2='6'/%3E%3Cpath d='M60 2 L64 6 L60 10 L56 6 Z' fill='%23C1984B' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.envelope-hint.is-hidden { opacity: 0 !important; animation: none; }
@keyframes hint-in { to { opacity: 1; } }

/* ---- Pétalos flotando (ambiente) ---- */
.petal {
  position: absolute;
  top: -8%;
  width: 14px; height: 14px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 C13 5 18 7 18 12 C18 16 14 19 10 19 C6 19 2 16 2 12 C2 7 7 5 10 1 Z' fill='%23FFFFFF' stroke='%23E7D8BE' stroke-width='0.6'/%3E%3C/svg%3E");
  opacity: 0.75;
  animation: petal-fall linear infinite;
  pointer-events: none;
  z-index: 7;
}
@keyframes petal-fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(var(--drift, 30px)) rotate(360deg); opacity: 0; }
}