/* =========================================
   Envelope overlay placed over the real Hero
========================================= */
body.invitation-locked { overflow: hidden; }

.envelope-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent;
}

.envelope-intro.is-opened {
  visibility: hidden;
  pointer-events: none;
}

.envelope-intro-content {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-width: 0;
}

.envelope-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-width: 0;
  max-width: 100vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  perspective: 1500px;
  -webkit-tap-highlight-color: transparent;
}

.envelope {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-width: 0;
  max-width: 100vw;
  --envelope-edge: 68%;
  --ribbon-y: 49%;
}

.envelope-stage:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -6px;
}

.envelope {
  display: block;
  overflow: hidden;
  transform-style: preserve-3d;
}

.envelope-cover,
.envelope-ribbon,
.envelope-ribbon-band,
.envelope-ribbon-loop,
.envelope-ribbon-tail,
.envelope-ribbon-knot,
.envelope-seal {
  position: absolute;
  display: block;
}

/* Curved half-envelope laid directly over the actual invitation cover. */
.envelope-cover {
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--envelope-edge);
  overflow: hidden;
  border-right: 1px solid rgba(53,67,54,.34);
  /* A single, continuous arc gives the cover its rounded folio silhouette. */
  border-radius: 0 48% 48% 0 / 0 50% 50% 0;
  background:
    radial-gradient(ellipse at 18% 14%, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(ellipse at 76% 76%, rgba(50,63,49,.08), transparent 52%),
    linear-gradient(145deg, #a4afa0, #7f8d7a 59%, #909d89);
  box-shadow:
    12px 0 28px rgba(35,42,35,.2),
    inset -10px 0 18px rgba(47,59,46,.1),
    inset 0 1px rgba(255,255,255,.2);
  transform-origin: left center;
  transition: transform .95s .42s cubic-bezier(.68,.04,.25,1), opacity .72s .45s ease;
}

.envelope-cover::before,
.envelope-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.envelope-cover::before {
  /* Layered pinpoints imitate the irregular pores of uncoated paper. */
  background:
    radial-gradient(circle, rgba(42,57,43,.28) 0 .45px, transparent .7px) 0 0 / 5px 5px,
    radial-gradient(circle, rgba(255,255,255,.32) 0 .5px, transparent .8px) 2px 3px / 7px 7px,
    radial-gradient(ellipse, rgba(38,52,40,.2) 0 .4px, transparent .75px) 1px 1px / 11px 8px;
  opacity: .38;
  mix-blend-mode: soft-light;
}

.envelope-cover::after {
  background:
    repeating-linear-gradient(88deg, transparent 0 8px, rgba(255,255,255,.018) 8px 9px),
    repeating-linear-gradient(3deg, transparent 0 12px, rgba(36,51,38,.015) 12px 13px);
  opacity: .7;
}

/* Satin ribbon: two bands, two loops, two tails and a central knot. */
.envelope-ribbon {
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.envelope-ribbon-band {
  top: var(--ribbon-y);
  height: clamp(38px, 7svh, 58px);
  border-top: 1px solid rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(176,158,128,.32);
  background:
    repeating-linear-gradient(90deg, rgba(126,111,87,.055) 0 1px, rgba(255,255,255,.04) 1px 3px),
    linear-gradient(to bottom, #fffefb 0%, #e3dccf 27%, #faf8f2 48%, #c9c0b0 72%, #eee9df 100%);
  background-blend-mode: multiply, normal;
  box-shadow:
    0 5px 12px rgba(44,44,44,.2),
    inset 0 2px 2px rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(132,116,91,.18);
  transform: translateY(-50%);
  transition: transform .72s cubic-bezier(.55,.02,.35,1), opacity .45s ease;
}

.envelope-ribbon-band-left { left: 0; width: var(--envelope-edge); }
.envelope-ribbon-band-right { left: var(--envelope-edge); right: 0; }

.envelope-ribbon-loop {
  z-index: 2;
  top: var(--ribbon-y);
  left: var(--envelope-edge);
  width: clamp(72px, 22vw, 102px);
  height: clamp(48px, 8.2svh, 62px);
  border: 1px solid rgba(185,174,156,.46);
  background:
    repeating-linear-gradient(96deg, rgba(111,96,74,.055) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, #fffefa 3%, #d8cfc0 34%, #fbf8f1 58%, #b8ac99 100%);
  box-shadow:
    0 8px 15px rgba(44,44,44,.25),
    inset 4px 4px 7px rgba(255,255,255,.68),
    inset -4px -4px 7px rgba(117,101,77,.16);
  transition: transform .72s cubic-bezier(.4,.02,.25,1), opacity .52s ease;
}

.envelope-ribbon-loop::after {
  content: '';
  position: absolute;
  inset: 10% 8%;
  border-top: 1px solid rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(105,88,64,.18);
  background: linear-gradient(165deg, rgba(255,255,255,.24), transparent 46%, rgba(105,88,64,.1));
}

.envelope-ribbon-loop-left {
  border-radius: 4px 1px 1px 4px;
  clip-path: polygon(0 4%, 100% 30%, 100% 70%, 0 96%);
  transform: translate(-96%, -50%) rotate(9deg);
  transform-origin: right center;
}

.envelope-ribbon-loop-right {
  border-radius: 1px 4px 4px 1px;
  clip-path: polygon(0 30%, 100% 4%, 100% 96%, 0 70%);
  transform: translate(-4%, -50%) rotate(-9deg);
  transform-origin: left center;
}

.envelope-ribbon-tail {
  z-index: 1;
  top: calc(var(--ribbon-y) + 8px);
  left: var(--envelope-edge);
  width: clamp(28px, 8vw, 38px);
  height: clamp(82px, 15svh, 120px);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 50% 84%, 12% 100%);
  background:
    repeating-linear-gradient(4deg, rgba(115,99,76,.055) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #c5baa8, #fffef9 46%, #d4c9b7 78%, #f6f1e7);
  box-shadow: 0 7px 12px rgba(44,44,44,.2), inset 3px 0 5px rgba(255,255,255,.52);
  transform-origin: top center;
  transition: transform .82s cubic-bezier(.4,.02,.25,1), opacity .55s ease;
}

.envelope-ribbon-tail-left { transform: translateX(-88%) rotate(21deg); }
.envelope-ribbon-tail-right { transform: translateX(-12%) rotate(-21deg); }

.envelope-ribbon-knot {
  z-index: 3;
  top: var(--ribbon-y);
  left: var(--envelope-edge);
  width: clamp(38px, 11vw, 50px);
  height: clamp(32px, 8vw, 42px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 46% 54% 48% 52%;
  background:
    repeating-linear-gradient(92deg, rgba(112,96,73,.045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 32% 24%, #fffefa, #d7cebe 58%, #b8ac99 100%);
  box-shadow:
    0 5px 11px rgba(44,44,44,.25),
    inset 4px 4px 6px rgba(255,255,255,.68),
    inset -4px -4px 6px rgba(111,94,69,.17);
  transform: translate(-50%, -50%);
  transition: transform .5s ease, opacity .38s ease;
}

.envelope-seal {
  z-index: 6;
  top: var(--ribbon-y);
  left: var(--envelope-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  width: clamp(58px, 16vw, 74px);
  height: clamp(58px, 16vw, 74px);
  border: 3px double rgba(83,56,23,.54);
  border-radius: 48% 52% 46% 54% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255,235,177,.6), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(91,58,20,.3), transparent 35%),
    radial-gradient(circle at 40% 34%, #dcb76e, #ad7c35 61%, #77501f 100%);
  box-shadow:
    0 7px 15px rgba(44,44,44,.36),
    inset 2px 3px 4px rgba(255,227,153,.28),
    inset -3px -4px 5px rgba(77,47,17,.28),
    0 0 0 2px rgba(121,84,37,.18);
  color: #5f401d;
  font-family: var(--f-serif);
  transform: translate(-50%, -50%);
  transition: transform .48s cubic-bezier(.3,1.35,.5,1), opacity .35s ease;
}

.envelope-seal strong { font-size: clamp(.9rem, 4vw, 1.18rem); font-weight: 400; }
.envelope-seal i { color: #f1d89f; font-size: .86rem; }

.envelope-action {
  position: absolute;
  z-index: 7;
  right: 2%;
  bottom: 4%;
  width: 27%;
  padding: .45rem .7rem;
  border-radius: 50px;
  background: rgba(250,247,242,.88);
  color: var(--c-sage-dark);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 2px 9px rgba(44,44,44,.1);
  animation: envelope-pulse 1.8s ease-in-out infinite;
  transition: opacity .3s ease;
}

/* Untie first, then move the curved envelope half away. */
.envelope-intro.is-opening .envelope-ribbon-band-left {
  opacity: 0;
  transform: translate(-105%, -50%);
}

.envelope-intro.is-opening .envelope-ribbon-band-right {
  opacity: 0;
  transform: translate(105%, -50%);
}

.envelope-intro.is-opening .envelope-ribbon-loop-left {
  opacity: 0;
  transform: translate(-145%, -62%) rotate(-42deg) scaleX(1.18);
}

.envelope-intro.is-opening .envelope-ribbon-loop-right {
  opacity: 0;
  transform: translate(45%, -62%) rotate(42deg) scaleX(1.18);
}

.envelope-intro.is-opening .envelope-ribbon-tail-left {
  opacity: 0;
  transform: translate(-180%, 16%) rotate(42deg);
}

.envelope-intro.is-opening .envelope-ribbon-tail-right {
  opacity: 0;
  transform: translate(80%, 16%) rotate(-42deg);
}

.envelope-intro.is-opening .envelope-ribbon-knot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
}

.envelope-intro.is-opening .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.3) rotate(12deg);
}

.envelope-intro.is-opening .envelope-cover {
  opacity: 0;
  transform: translateX(-108%) rotateY(-10deg);
}

.envelope-intro.is-opening .envelope-action {
  opacity: 0;
  animation: none;
}

@keyframes envelope-pulse {
  0%, 100% { opacity: .7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@media (max-height: 620px) {
  .envelope { --ribbon-y: 48%; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-cover,
  .envelope-ribbon-band,
  .envelope-ribbon-loop,
  .envelope-ribbon-tail,
  .envelope-ribbon-knot,
  .envelope-seal,
  .envelope-action {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}