/* The invitation envelope (see js/invite.js). Remove this file and its <link> to undo. */
.invite { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.invite[hidden] { display: none; }
.invite__backdrop { position: absolute; inset: 0; background: rgba(5, 9, 16, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s ease; }
.invite.is-in .invite__backdrop { opacity: 1; }

.invite__stage { position: relative; display: grid; justify-items: center; gap: 14px; transform: translateY(60vh) rotate(-4deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .25, 1.15), opacity .4s ease; }
.invite.is-in .invite__stage { transform: none; opacity: 1; }

.invite__x { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 2; width: 40px; height: 40px; border: 1px solid rgba(243,234,215,.35); border-radius: 50%; background: rgba(10,17,29,.6); color: var(--cream); font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.invite__x:hover { border-color: var(--gold); color: var(--gold); }
.invite__hint { margin: 0; font: 600 .82rem/1 var(--cond); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); transition: opacity .3s; }
.invite.is-open .invite__hint { opacity: 0; }

/* Envelope: back, card, front pocket, flap, seal */
.env { --w: min(440px, 86vw); --h: calc(var(--w) * .64); position: relative; width: var(--w); height: var(--h); perspective: 1200px; cursor: pointer; }
.env.is-open { cursor: default; }
.env__back, .env__front, .env__flap { position: absolute; left: 0; right: 0; }
.env__back { inset: 0; border-radius: 6px; background: linear-gradient(160deg, #e9dcc2, #d8c6a3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.env__front {
  inset: 0; z-index: 3; border-radius: 6px; pointer-events: none;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(120, 92, 50, .18) 50%, transparent 50.6%) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.6%, rgba(120, 92, 50, .18) 50%, transparent 50.6%) right / 50% 100% no-repeat,
    linear-gradient(170deg, #f3e9d5, #e2d2b2);
  clip-path: polygon(0 32%, 50% 66%, 100% 32%, 100% 100%, 0 100%);
}
.env__flap {
  top: 0; height: 66%; z-index: 4; transform-origin: top center; transition: transform .7s cubic-bezier(.4, .1, .2, 1), z-index 0s .35s;
  background: linear-gradient(180deg, #efe3ca, #dccaa6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 4px 6px rgba(80, 55, 20, .25));
}
.env.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }

.env__seal {
  position: absolute; z-index: 5; left: 50%; top: 66%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #3a2408;
  background: radial-gradient(circle at 35% 30%, #fbe08a 0%, #e9b843 38%, #b47f17 72%, #8a5c0c 100%);
  box-shadow: inset 0 0 0 4px rgba(120, 80, 10, .35), inset 0 -6px 10px rgba(80, 50, 5, .35), 0 6px 14px rgba(0,0,0,.45);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .4s ease;
  animation: seal-pulse 2.4s ease-in-out infinite;
}
.env__seal svg { width: 44px; height: 24px; }
.env__seal:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.env.is-open .env__seal { transform: scale(.4) rotate(-30deg); opacity: 0; pointer-events: none; animation: none; }
@keyframes seal-pulse { 0%, 100% { box-shadow: inset 0 0 0 4px rgba(120,80,10,.35), inset 0 -6px 10px rgba(80,50,5,.35), 0 6px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(233,184,67,.45); } 50% { box-shadow: inset 0 0 0 4px rgba(120,80,10,.35), inset 0 -6px 10px rgba(80,50,5,.35), 0 6px 14px rgba(0,0,0,.45), 0 0 0 12px rgba(233,184,67,0); } }

/* The card slides up out of the envelope */
.env__card {
  position: absolute; z-index: 2; left: 6%; right: 6%; top: 6%;
  display: grid; justify-items: center; align-content: center; gap: 8px; padding: 26px 20px 18px; text-align: center;
  background: var(--night-2); color: var(--cream); border: 1px solid rgba(233,184,67,.6); border-radius: 3px;
  box-shadow: 0 0 0 4px var(--night-2), 0 0 0 5px rgba(233,184,67,.35);
  transform: translateY(0); opacity: 0; transition: transform .8s cubic-bezier(.2, .9, .25, 1.05) .35s, opacity .25s ease .3s;
}
.env.is-open .env__card { transform: translateY(-58%); opacity: 1; z-index: 6; }
.env__eyebrow { margin: 0; font: 600 .78rem/1 var(--cond); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.env__title { margin: 4px 0 0; font: 400 clamp(1.6rem, 6vw, 2.2rem)/1.05 var(--serif); text-transform: uppercase; }
.env__copy { margin: 0 0 6px; color: var(--cream-2); font-size: 1rem; }
.env__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 4px; text-decoration: none;
  font: 700 1.05rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); box-shadow: inset 0 0 0 1px rgba(35,24,10,.5);
}
.env__cta:hover { box-shadow: inset 0 0 0 1px rgba(35,24,10,.5), 0 0 30px -6px rgba(240,164,71,.8); }
.env__later { margin-top: 2px; border: 0; background: none; color: var(--cream-3); font: 500 .8rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.env__later:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .invite__stage, .env__flap, .env__card, .env__seal, .invite__backdrop { transition: none; animation: none; }
}