/* ============================================================
   INVITATION  ·  Zach & Valentina
   The homepage itself is the card inside the envelope.
   Three stacked fixed layers:
     .invite-veil   (z 2147483000) backdrop + envelope BACK
     .site-shell    (z 2147483100) the real page, as the card
     .invite-front  (z 2147483200) envelope folds, flap, seal
   ============================================================ */

.invite-veil, .invite-front { display: none; }

html.invite-active, html.invite-active body { overflow: hidden !important; }

html.invite-active .we-edit-banner,
html.invite-active .we-edit-wrap,
html.invite-active .we-toast { display: none !important; }

/* the homepage never runs its own staggered entrance once the
   invitation is in play — it would fight the card animation */
html.invite-seen .hero-tag,
html.invite-seen .hero h1,
html.invite-seen .hero-date,
html.invite-seen .hero-location,
html.invite-seen .then-and-now,
html.invite-seen .countdown,
html.invite-seen .hero-cta {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ---------------- backdrop ---------------- */

html.invite-active .invite-veil,
html.invite-active .invite-front {
  display: block;
  position: fixed;
  inset: 0;
}

html.invite-active .invite-veil {
  z-index: 2147483000;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(200, 164, 100, 0.20) 0%, transparent 58%),
    linear-gradient(165deg, #212a1a 0%, #3d4a32 52%, #1b2215 100%);
  transition: opacity 0.7s ease;
}
html.invite-active .invite-front {
  z-index: 2147483200;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.invite-veil .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.invite-veil .glow {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 128vmin;
  height: 128vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(217, 189, 135, 0.16) 0%, transparent 58%);
  animation: inviteFlicker 7s ease-in-out infinite;
}
@keyframes inviteFlicker {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  46%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* ---------------- envelope, both layers ---------------- */

.env-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--env-w, 300px);
  height: var(--env-h, 197px);
  margin: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.invite-veil .env-layer { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }

/* back paper — sits behind the card */
.env-back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(140,106,46,0.03) 0 1px, transparent 1px 4px),
    linear-gradient(158deg, #fefcf6 0%, #fbf7ec 58%, #f5efdf 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(150, 114, 50, 0.55),
    inset 0 0 0 5px rgba(255, 253, 246, 0.95),
    inset 0 0 0 6px rgba(150, 114, 50, 0.34),
    inset 0 0 34px rgba(140, 106, 46, 0.1);
}

/* front folds — sit in front of the card */
.env-fold { position: absolute; inset: 0; }
.env-l {
  background:
    repeating-linear-gradient(0deg, rgba(140,106,46,0.032) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(140,106,46,0.022) 0 1px, transparent 1px 17px),
    linear-gradient(96deg, #ece0c6 0%, #dbc9a2 100%);
  clip-path: polygon(0 0, 50.5% 50%, 0 100%);
  filter: drop-shadow(0 0 0.7px rgba(140, 106, 46, 0.6));
}
.env-r {
  background:
    repeating-linear-gradient(0deg, rgba(140,106,46,0.032) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(140,106,46,0.022) 0 1px, transparent 1px 17px),
    linear-gradient(264deg, #ece0c6 0%, #dbc9a2 100%);
  clip-path: polygon(100% 0, 49.5% 50%, 100% 100%);
  filter: drop-shadow(0 0 0.7px rgba(140, 106, 46, 0.6));
}
.env-b {
  background:
    repeating-linear-gradient(0deg, rgba(140,106,46,0.034) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(140,106,46,0.022) 0 1px, transparent 1px 17px),
    linear-gradient(2deg, #d2be92 0%, #e2d3b1 62%, #ebe0c7 100%);
  clip-path: polygon(0 100%, 50% 47%, 100% 100%);
  filter: drop-shadow(0 -0.6px 0.7px rgba(140, 106, 46, 0.65));
}

/* gold foil liner along the flap edge */
.env-liner {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 62%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(176deg, #8a6a30 0%, #c8a464 58%, #e6c98d 100%);
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.3, 1) 0.12s;
}

.env-flap {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 59%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,0.75) 0%, transparent 58%),
    repeating-linear-gradient(0deg, rgba(140,106,46,0.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(140,106,46,0.02) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #fffefb 0%, #f8f2e3 56%, #e6d7b6 100%);
  filter: drop-shadow(0 2px 5px rgba(43, 38, 29, 0.28)) drop-shadow(0 0 0.7px rgba(140, 106, 46, 0.55));
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.3, 1) 0.12s;
  backface-visibility: hidden;
}

/* ---------------- ornament ---------------- */

.env-mono {
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  font-family: 'Italiana', serif;
  font-size: calc(var(--env-w) * 0.052);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: rgba(140, 106, 46, 0.48);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: opacity 0.35s ease;
}
.env-mono span { color: rgba(168, 130, 63, 0.7); }
.env-mono::before,
.env-mono::after {
  content: '';
  position: absolute;
  top: 55%;
  width: calc(var(--env-w) * 0.085);
  height: 1px;
}
.env-mono::before {
  right: 100%;
  margin-right: 0.7em;
  background: linear-gradient(90deg, transparent, rgba(168, 130, 63, 0.6));
}
.env-mono::after {
  left: 100%;
  margin-left: 0.4em;
  background: linear-gradient(270deg, transparent, rgba(168, 130, 63, 0.6));
}

.env-addr {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}
.env-addr::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: calc(var(--env-w) * 0.017);
  height: calc(var(--env-w) * 0.017);
  margin-bottom: 0.75em;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(168, 130, 63, 0.62);
}
.env-addr b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: calc(var(--env-w) * 0.042);
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-transform: uppercase;
  color: rgba(61, 74, 50, 0.8);
}
.env-addr i {
  display: block;
  margin-top: 0.3em;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: calc(var(--env-w) * 0.027);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: rgba(140, 106, 46, 0.6);
}

.env-corner {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border: 1px solid rgba(150, 114, 50, 0.42);
  transition: opacity 0.35s ease;
}
.env-corner::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(168, 130, 63, 0.6);
}
.env-corner.tl::after { left: -2px; top: -2px; }
.env-corner.tr::after { right: -2px; top: -2px; }
.env-corner.bl::after { left: -2px; bottom: -2px; }
.env-corner.br::after { right: -2px; bottom: -2px; }
.env-corner.tl { left: 5%;  top: 7%;    border-right: 0; border-bottom: 0; }
.env-corner.tr { right: 5%; top: 7%;    border-left: 0;  border-bottom: 0; }
.env-corner.bl { left: 5%;  bottom: 7%; border-right: 0; border-top: 0; }
.env-corner.br { right: 5%; bottom: 7%; border-left: 0;  border-top: 0; }

/* wax seal — flatter, pressed, not a bauble */
.env-seal {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 19%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  display: grid;
  place-items: center;
  font-family: 'Italiana', serif;
  font-size: calc(var(--env-w) * 0.045);
  letter-spacing: 0.06em;
  padding-left: 0.06em;
  color: #6b4f1c;
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.4);
  background:
    radial-gradient(circle at 36% 30%, #dfbf80 0%, #c6a263 46%, #a8823f 78%, #8d6c33 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.3),
    inset 0 -1px 3px rgba(94, 70, 24, 0.42),
    inset 0 1px 2px rgba(255, 240, 205, 0.3);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.45s ease;
}
.env-seal::before {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid rgba(107, 79, 28, 0.34);
}

/* ---------------- hint ---------------- */

.invite-hint {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--env-h) / 2 + 34px);
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.4);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease, color 0.8s ease;
}
html.invite-nudge .invite-hint { opacity: 1; color: rgba(217, 189, 135, 0.85); }

/* ---------------- the nudge ---------------- */

html.invite-nudge .env-layer { animation: inviteBreathe 2.6s ease-in-out infinite; }
@keyframes inviteBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.022) translateY(-5px); }
}
html.invite-nudge .env-seal::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 189, 135, 0.85);
  animation: inviteRipple 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes inviteRipple {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(2.9); opacity: 0; }
  100% { transform: scale(2.9); opacity: 0; }
}

/* ---------------- THE CARD: the homepage itself ---------------- */

html.invite-active .site-shell {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2147483100;
  background: var(--parchment);
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 0;
  transform: translate3d(0, var(--sy, 0px), 0) scale(var(--ss, 1));
  clip-path: inset(0px var(--sx, 0px) var(--sb, 0px) var(--sx, 0px) round var(--sr, 3px));
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.42));
  will-change: transform, clip-path;
}

/* pulling the card up out of the envelope */
html.invite-card .site-shell {
  transition:
    transform 0.9s cubic-bezier(0.16, 0.86, 0.28, 1),
    clip-path 0.9s cubic-bezier(0.16, 0.86, 0.28, 1);
}

/* the card opening out into the full page */
html.invite-full .site-shell {
  transition:
    transform 1.15s cubic-bezier(0.62, 0, 0.2, 1),
    clip-path 1.15s cubic-bezier(0.62, 0, 0.2, 1),
    filter 0.7s ease 0.4s;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

html.invite-active .site-shell nav.site-nav,
html.invite-active .site-shell .then-and-now,
html.invite-active .site-shell .countdown,
html.invite-active .site-shell .hero-cta { opacity: 0 !important; }
html.invite-full .site-shell nav.site-nav,
html.invite-full .site-shell .then-and-now,
html.invite-full .site-shell .countdown,
html.invite-full .site-shell .hero-cta { opacity: 1 !important; transition: opacity 0.6s ease 0.55s; }

/* ---------------- opening states ---------------- */

html.invite-opening .env-mono,
html.invite-opening .env-addr,
html.invite-opening .env-corner { opacity: 0; }

html.invite-opening .env-seal {
  transform: translate(-50%, -50%) scale(1.28) rotate(-12deg);
  opacity: 0;
}
html.invite-opening .env-seal::after { display: none; }
html.invite-opening .env-layer { animation: none; }

html.invite-opening .env-flap,
html.invite-opening .env-liner { transform: rotateX(-166deg); }

/* an open flap hangs behind the envelope, so retire it as the card rises past */
html.invite-card .env-flap,
html.invite-card .env-liner { opacity: 0; transition: opacity 0.4s ease; }

/* envelope drops away once the card is out */
html.invite-full .env-layer {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(16px) scale(0.97);
}
html.invite-full .invite-veil { opacity: 0; }
html.invite-full .invite-hint { opacity: 0; }

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .invite-veil .glow,
  html.invite-nudge .env-layer,
  html.invite-nudge .env-seal::after { animation: none; }
  html.invite-card .site-shell,
  html.invite-full .site-shell { transition-duration: 0.25s, 0.25s, 0.2s; }
  .env-flap, .env-liner, .env-seal, .env-layer { transition-duration: 0.2s !important; }
  html.invite-active .invite-veil { transition-duration: 0.25s; }
}