/* M2 surrounds the approved card; M4 only exposes its validated maximum width. */
.envelope-experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--layout-card-width, 620px);
  overflow-anchor: none;
  --envelope-ease: cubic-bezier(.22, .68, .18, 1);
}

.envelope-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 620 / 378;
  perspective: 1400px;
  filter: drop-shadow(0 12px 17px rgb(70 51 24 / 10%));
}

.envelope-back {
  position: absolute;
  inset: 0;
  background: #e8e1d4;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}

.envelope-folds { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.fold-left { fill: #f0eadf; }
.fold-right { fill: #f5efe4; }
.fold-pocket { fill: var(--ivory); }
.fold-rule, .flap-rule { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }

.envelope-flap {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 59.8%;
  transform-origin: center top;
  transform: rotateX(0deg);
  backface-visibility: visible;
}

.envelope-flap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flap-paper { fill: #f8f4ec; stroke: #dfd4c0; stroke-width: .8; vector-effect: non-scaling-stroke; }

.envelope-seal {
  position: absolute;
  z-index: 4;
  top: 58%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 85%, #372510);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ivory);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 28%), inset 0 -2px 3px rgb(61 36 8 / 20%), 0 3px 6px rgb(70 51 24 / 16%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.envelope-seal::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgb(250 248 244 / 48%); border-radius: inherit; pointer-events: none; }
.seal-mark { max-width: 100%; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; letter-spacing: .02em; line-height: 1.05; overflow-wrap: anywhere; }
.envelope-seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 7px; }
.envelope-seal:active { transform: scale(.96); }
@media (hover: hover) { .envelope-seal:hover { transform: scale(1.035); box-shadow: inset 0 1px 2px rgb(255 255 255 / 28%), 0 5px 9px rgb(70 51 24 / 20%); } }

.envelope-hint { margin: 28px 0 0; text-align: center; font-size: 11px; line-height: 1.8; letter-spacing: .18em; color: var(--charcoal); }
.invitation-reveal { position: relative; z-index: 1; width: 100%; transform-origin: top center; }
/* This noninteractive reading destination receives focus after the seal opens.
   Keep the approved card border; the seal retains its visible keyboard ring. */
.invitation-reveal .invitation:focus { outline: none; }

.envelope-experience:not([data-envelope-state="closed"]) { padding-bottom: 42px; }
.envelope-experience:not([data-envelope-state="closed"]) .envelope-shell { position: absolute; top: 0; left: 0; transform: translateY(var(--shell-start-y)); }
.envelope-experience:not([data-envelope-state="closed"]) .envelope-hint { position: absolute; width: 100%; top: 0; visibility: hidden; }

[data-envelope-state="opening"] .invitation-reveal {
  opacity: 0;
  transform: translateY(var(--card-start-y)) scale(.86);
  clip-path: inset(0 0 var(--card-mask) 0);
  will-change: transform, clip-path, opacity;
}

[data-envelope-state="opening"].is-animating .envelope-seal { animation: seal-release 220ms ease both; }
[data-envelope-state="opening"].is-animating .envelope-flap { animation: flap-open 800ms 170ms var(--envelope-ease) both; }
[data-envelope-state="opening"].is-animating .invitation-reveal { animation: invitation-emerge 1550ms 650ms var(--envelope-ease) both; }
[data-envelope-state="opening"].is-animating .envelope-shell { animation: envelope-retreat 1100ms 1100ms var(--envelope-ease) both; }

@keyframes seal-release { to { opacity: 0; transform: scale(.92); } }
@keyframes flap-open { to { transform: rotateX(180deg); } }
@keyframes invitation-emerge {
  0% { opacity: 0; transform: translateY(var(--card-start-y)) scale(.86); clip-path: inset(0 0 var(--card-mask) 0); }
  12% { opacity: 1; }
  66% { opacity: 1; transform: translateY(12px) scale(.98); clip-path: inset(0 0 16% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes envelope-retreat {
  0% { transform: translateY(var(--shell-start-y)); opacity: 1; z-index: 2; }
  38% { opacity: 1; z-index: 2; }
  39% { opacity: 1; z-index: 0; }
  100% { transform: translateY(var(--shell-end-y)); opacity: .6; z-index: 0; }
}

.envelope-experience[data-envelope-state="open"] .envelope-shell { transform: translateY(var(--shell-end-y)); opacity: .6; z-index: 0; pointer-events: none; }
[data-envelope-state="open"] .envelope-flap { transform: rotateX(180deg); }
[data-envelope-state="open"] .envelope-seal { visibility: hidden; }
[data-envelope-state="open"] .invitation-reveal { transform: none; opacity: 1; clip-path: none; }

.envelope-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .envelope-hint { margin-top: 23px; font-size: 10px; letter-spacing: .14em; }
  .envelope-seal { width: 64px; height: 64px; padding: 12px; }
  .seal-mark { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-experience *, .envelope-experience *::before { animation: none !important; transition: none !important; }
  [data-envelope-state="opening"] .invitation-reveal { transform: none; opacity: 1; clip-path: none; }
  .envelope-seal:hover, .envelope-seal:active { transform: none; }
}

@media print {
  .envelope-shell, .envelope-hint, .envelope-status { display: none !important; }
  .envelope-experience { display: block !important; padding-bottom: 0 !important; }
  .invitation-reveal[hidden], .invitation-reveal { display: block !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}