.cover {
  padding: 24px 0;
  background: #f4e4e4 url("./textura-papel.png") center / 640px repeat;
  background-blend-mode: multiply;
  transition: opacity 1500ms cubic-bezier(0.4, 0, 0.2, 1) 1400ms, visibility 0s linear 2900ms;
}
.cover::before, .cover::after { content: none; }
.floral-envelope {
  position: relative;
  width: min(92vw, 780px, 120svh);
  aspect-ratio: 3 / 2;
  perspective: 1600px;
  isolation: isolate;
  box-shadow: 0 28px 60px #72414926, 0 4px 12px #7241491a;
  transition: transform 2900ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 1400ms ease;
}
.floral-envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e8bfc2 url("./textura-papel.png") center / 460px repeat;
  background-blend-mode: multiply;
  box-shadow: inset 0 14px 36px #75444f1a;
}
.floral-envelope__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }
/* Shared edges match the photographed fold; the seal moves independently. */
.floral-envelope__image--lower { z-index: 2; clip-path: polygon(0 0, 50% 68%, 100% 0, 100% 100%, 0 100%); }
.floral-envelope__image--flap {
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 50% 68%);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform 1400ms cubic-bezier(0.25, 0.65, 0.25, 1) 450ms;
}
.envelope-letter {
  position: absolute;
  z-index: 1;
  inset: 8% 7% 5%;
  padding: 8% 6%;
  text-align: center;
  background: #fffaf6 url("./textura-papel.png") center / 460px repeat;
  color: #855563;
  transform: translateY(6%);
  transition: transform 1200ms cubic-bezier(0.2, 0.6, 0.2, 1) 700ms;
}
.envelope-letter span { display: block; font: 36px "Great Vibes", cursive; }
.envelope-letter small { display: block; margin-top: 8px; font: 12px Cinzel, serif; }
.envelope-title { position: absolute; z-index: 4; top: 10%; left: 5%; width: 90%; text-align: center; color: #80515b; pointer-events: none; transition: opacity 400ms ease; }
.envelope-title strong { display: block; font: 42px "Great Vibes", cursive; line-height: 1.2; }
.envelope-title span { display: block; margin-top: 8px; font: 13px Cinzel, serif; }
.seal-trigger {
  position: absolute;
  z-index: 5;
  left: 39%;
  top: 51.5%;
  width: 22%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 700ms ease, opacity 550ms ease, filter 250ms ease;
}
.seal-trigger img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 6px #71433235); }
.seal-trigger:hover { transform: translateY(-3px); filter: brightness(1.05); }
.seal-trigger:focus-visible { outline: 2px solid #855563; outline-offset: 5px; }
.envelope-guest { position: absolute; z-index: 4; top: 31%; left: 8%; width: 84%; text-align: center; color: #80515b; pointer-events: none; transition: opacity 400ms ease; }
.envelope-guest p { margin: 0 0 6px; font: 10px Montserrat, sans-serif; text-transform: uppercase; }
.envelope-guest strong { display: block; font: 27px "Great Vibes", cursive; line-height: 1.2; overflow-wrap: anywhere; }
.invitation.is-open .seal-trigger { opacity: 0; transform: translateY(18px) scale(0.88); pointer-events: none; }
.invitation.is-open .envelope-title, .invitation.is-open .envelope-guest { opacity: 0; }
.invitation.is-open .floral-envelope__image--flap { transform: rotateX(140deg); }
.invitation.is-open .envelope-letter { transform: translateY(-8%); }
.invitation.is-open .floral-envelope { transform: translateY(12px) scale(1.02); box-shadow: 0 16px 32px #72414918; }
.invitation.is-open .cover { transition-delay: 1400ms, 2900ms; }
.invitation .content { opacity: 1; transform: none; transition: none; }
@media (max-width: 600px) {
  .envelope-title { top: 8%; }
  .envelope-title strong { font-size: 26px; line-height: 1.1; }
  .envelope-title span { margin-top: 4px; font-size: 9px; }
  .envelope-guest strong { font-size: 21px; }
  .envelope-guest p { font-size: 8px; }
  .envelope-letter span { font-size: 28px; }
  .envelope-letter small { font-size: 10px; }
}