/* ---------- Sobre animado (adaptado a la paleta bordó / crema) ---------- */
:root {
  --s-bg: #3a1216;
  --s-liner: #5a1d23;
  --s-paper: #efe6de;
  --s-wax: #74252a;
  --s-wax-dark: #46101a;
  --s-accent: #b98a92;
  --s-ink: #5a1d23;

  /* Ancho del sobre: se adapta a pantallas angostas y bajas */
  --w: min(88vw, 520px, 108dvh);
  --h: calc(var(--w) * 2 / 3);

  /* Textura sutil de papel */
  --tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Mientras el sobre está cerrado no se puede hacer scroll */
body.locked { overflow: hidden; height: 100%; }

/* ---------- Escenario del sobre ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  background: radial-gradient(120% 90% at 50% 40%, #4d1a1f 0%, var(--s-bg) 70%);
  overflow: hidden;
  transition: opacity 1.1s ease .15s, visibility 0s linear 1.3s;
}
.stage.gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* El sobre se acerca y se funde con la invitación que hay debajo */
.shadow { transition: transform 1.3s cubic-bezier(.5, 0, .2, 1), opacity 1s ease .1s; }
.stage.enter .shadow { transform: scale(1.7); opacity: 0; }
.stage.enter .footer { opacity: 0; }

.shadow { filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .45)); }

.envelope {
  position: relative;
  width: var(--w);
  height: var(--h);
  perspective: 1200px;
}

/* Interior del sobre */
.back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(185, 138, 146, .16) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(185, 138, 146, .16) 7px 8px),
    var(--s-liner);
}

/* Carta */
.letter {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  z-index: 2;
  background: var(--tex), linear-gradient(#f3ebe3, #e8dfd8);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 14px rgba(0, 0, 0, .18);
  color: var(--s-ink);
  overflow: hidden;
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
/* la carta asoma lo justo para que se lea qué hay adentro */
.stage.rising .letter { transform: translateY(-50%); }

.letter-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;   /* deja el título JULI & JOACO en el centro de la carta */
}

/* Frente del sobre (bolsillo) */
.front {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .18));
}
.front i { position: absolute; inset: 0; display: block; }
.front .l { clip-path: polygon(0 0, 51% 50%, 0 100%);      background: var(--tex), linear-gradient(90deg,  #ddd1c8, #ebe2da); }
.front .r { clip-path: polygon(100% 0, 49% 50%, 100% 100%); background: var(--tex), linear-gradient(270deg, #d9cbc1, #e8dfd8); }
.front .b { clip-path: polygon(0 100%, 50% 44%, 100% 100%); background: var(--tex), linear-gradient(0deg,   #e3d8cf, #f0e8e0); }

/* Solapa: gira sobre su borde superior y cambia a la cara interior a mitad de camino */
.flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 56%;
  z-index: 5;
  transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--tex), linear-gradient(180deg, #f0e8e0, #dccfc5);
  transition:
    transform .9s ease-in-out,
    z-index 0s linear .45s,
    background 0s linear .45s;
}
.stage.open .flap {
  transform: rotateX(180deg);
  z-index: 1;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(185, 138, 146, .16) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(185, 138, 146, .16) 7px 8px),
    #4d1a1f;
}

/* Sello de lacre */
.seal {
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--w) * .15);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 6;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #a3323f 0%, var(--s-wax) 45%, var(--s-wax-dark) 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, .4),
    inset 0 -3px 5px rgba(0, 0, 0, .35),
    inset 0 2px 3px rgba(255, 255, 255, .18);
  animation: pulse 2.6s ease-in-out infinite;
}
/* Área táctil más grande que el sello visible */
.seal::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
.seal::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
}
.seal img {
  width: 58%;
  height: auto;
  opacity: .8;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .24));
}
.seal:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 6px; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.stage.breaking .seal {
  animation: none;
  transform: scale(1.2);
  opacity: 0;
  transition: transform .5s ease, opacity .45s ease .05s;
}

/* Textos debajo del sobre */
.hint { transition: opacity .5s ease; text-align: center; }
.hint { color: #e6d6d2; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.2rem; letter-spacing: .02em; }
.stage.breaking .hint { opacity: 0; }

.footer { display: flex; flex-direction: column; gap: .6rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; }
}