/* The invitation suite in its envelope: her olive envelope with the pine liner, closed with a wax seal.
   envelope.js positions the envelope (px) and the cards; everything inside the envelope is in % of its body
   (the concept's rows 766–1633, 1240 × 867). Layers, back to front: dust, cards already read (deck), the envelope
   (with the card rising out of it), the card being read (table), particles (fx). */
.env-scene {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 42%, rgba(255, 252, 244, .9), rgba(255, 252, 244, 0) 70%),
    radial-gradient(130% 100% at 50% 45%, transparent 50%, rgba(70, 52, 34, .2)),
    #ece5d8;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.env-for {
  position: absolute; left: 0; right: 0; margin: 0; padding: 0 16px; z-index: 1;
  font-family: "Pinyon Script", cursive; color: #6b1f2c;
  font-size: clamp(30px, 8.4vw, 46px); line-height: 1.15; text-align: center;
}
.env-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Ambient gold dust, and the particle layer for crumbs and sparkles. */
.env-dust, .env-fx { position: absolute; inset: 0; pointer-events: none; }
.env-fx { position: fixed; z-index: 8; }
.env-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.env-dust i, .env-spark {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0, #e2c27e 45%, rgba(214, 178, 106, 0) 72%);
}
/* Particles sit at the fx layer's top-left and move by transform only. */
.env-spark, .env-star, .env-leaf, .env-crumb, .env-bloom { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.env-spark { background: radial-gradient(circle, #fffaf0 0, #f3d58f 35%, rgba(226, 190, 110, .55) 55%, rgba(226, 190, 110, 0) 72%); }
.env-star {
  background: radial-gradient(circle, #fffdf6 0, #f6dc9a 40%, #d4a94f 75%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.env-leaf {
  border-radius: 1px 40% 1px 40%;
  background: linear-gradient(135deg, #fff1c4 0%, #e5c27a 35%, #b78a3e 65%, #f0d797 100%);
  backface-visibility: visible;
}
.env-bloom {
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0, rgba(250, 224, 160, .45) 25%, rgba(240, 205, 130, 0) 60%);
}
.env-crumb {
  border-radius: 45% 55% 40% 60%;
  background: linear-gradient(135deg, #a8304a, #6a1224 60%, #3e0812);
  box-shadow: 0 1px 2px rgba(30, 5, 10, .4);
}

/* ---------- the envelope ---------- */
.env { position: absolute; z-index: 2; aspect-ratio: 1240 / 867; perspective: 1800px; cursor: pointer; will-change: transform; }
.env:focus-visible { outline: 2px solid #6b1f2c; outline-offset: 8px; border-radius: 6px; }
.env-shadow, .env-back, .env-front, .env-slot, .env-flap { position: absolute; left: 0; width: 100%; }
.env-shadow { inset: 4% 3% -4% 3%; width: auto; border-radius: 4%; background: rgba(50, 40, 20, .36); filter: blur(16px); }
.env-back, .env-front { top: 0; height: 100%; display: block; pointer-events: none; }
.env-back { z-index: 1; }
.env-front { z-index: 3; }

/* Cards inside ride in a slot clipped at the envelope's bottom edge (they are taller than the envelope). */
.env-slot {
  z-index: 2; top: -300%; height: 400%; pointer-events: none;
  /* Clip at the envelope bottom, but let a growing card reach its reading position
     without changing containers or clipping its top during the flight. */
  overflow: visible; clip-path: inset(-200vh -100vw 0 -100vw);
}
.env-card {
  position: absolute; left: 6.45%; width: 87.1%;          /* 1080 of 1240 */
  aspect-ratio: 1240 / 1748;
  /* One consistent shadow surface throughout the exit and reading animation. */
  filter: drop-shadow(0 10px 14px rgba(40, 28, 16, .32)) drop-shadow(0 2px 3px rgba(40, 28, 16, .24));
  will-change: transform;                                  /* its own GPU layer: moving it never repaints the SVG */
}
.env-card > * { display: block; width: 100%; height: 100%; }

/* Out of the envelope: the card being read (table) and the ones read before it (deck, behind the envelope). */
.env-table { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.env-deck { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.env-card.is-out {
  position: fixed; margin: 0; pointer-events: auto;
}
.env-card.in-deck {
  cursor: pointer;
  filter: blur(1.2px) brightness(.88) saturate(.88) drop-shadow(0 6px 10px rgba(40, 28, 16, .25));
}

/* Top flap: hinged on the envelope's top edge. Open = 0deg (liner showing), closed = 180deg. */
.env-flap {
  z-index: 4; top: -72.2%; height: 72.43%;
  transform-origin: 50% 99.68%; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(180deg);
}
.env-flap > * { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env-flap-out { transform: rotateX(180deg); filter: drop-shadow(0 5px 5px rgba(20, 22, 6, .42)); overflow: visible; }

/* ---------- the wax seal (on the flap's point; 260 of 1240 wide, centred at 618, 530) ---------- */
.env-seal { position: absolute; z-index: 5; left: 39.35%; top: 46.14%; width: 20.97%; aspect-ratio: 1; }
.env-seal-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* A slow band of light across the wax every few seconds. */
.env-glint { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.env-glint::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 214, .5), transparent);
  transform: skewX(-18deg); animation: env-glint 4.2s ease-in-out 1.2s infinite;
}
@keyframes env-glint { 0%, 55% { left: -60%; } 85%, 100% { left: 125%; } }
/* Rings that pulse out from the seal: "tap here". */
.env-ripple {
  position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(201, 164, 96, .75); opacity: 0;
  animation: env-ripple 2.8s cubic-bezier(.2, .6, .35, 1) 1s infinite;
}
.env-ripple + .env-ripple { animation-delay: 2.4s; }
@keyframes env-ripple { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.env-seal.is-opening .env-ripple, .env-seal.is-opening .env-glint { display: none; }

/* ---------- words on the envelope ---------- */
.env-hint {
  position: absolute; left: 0; width: 100%; z-index: 6; top: 107%; margin: 0; text-align: center; pointer-events: none;
  font-family: "Cormorant Garamond", serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .32em; font-size: 12px; color: #7d6a5a;
  animation: env-breathe 2.8s ease-in-out infinite;
}
@keyframes env-breathe { 50% { opacity: .45; } }
.env-scene.is-open > .env-hint {
  position: fixed; top: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  color: #6d5b46; opacity: 0; animation: none; letter-spacing: .2em; font-size: 11px;
}
.env-nav {
  position: fixed; z-index: 9; left: 0; width: 100%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: none;
  align-items: center; justify-content: center; gap: 14px; opacity: 0;
}
.env-scene.is-open > .env-nav { display: flex; }
.env-dots { display: flex; gap: 8px; padding: 7px 10px; border-radius: 99px; background: rgba(52, 57, 24, .82); }
.env-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(239, 230, 200, .4);
  transition: background .4s, transform .4s;
}
.env-dots i.is-on { background: #e6cf98; transform: scale(1.35); box-shadow: 0 0 6px rgba(240, 210, 140, .7); }
.env-step {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 230, 200, .45); padding: 0;
  background: rgba(52, 57, 24, .82); color: #efe6c8; box-shadow: 0 2px 6px rgba(20, 22, 6, .3); font: 400 22px/1 "Cormorant Garamond", serif; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 3px; transition: opacity .3s, background .3s;
}
.env-step:hover { background: rgba(40, 44, 16, .95); }
.env-step:focus-visible { outline: 2px solid #e6cf98; outline-offset: 2px; }
.env-step:disabled { opacity: .25; cursor: default; }
/* Last card: › becomes a "Continue" pill that leads on to the page. */
.env-step.is-finish {
  width: auto; padding: 0 20px 1px; border-radius: 99px; border-color: rgba(230, 207, 152, .8);
  font: 600 12px/1 "Cormorant Garamond", serif; letter-spacing: .24em; text-transform: uppercase;
  background: #6b1f2c; color: #f6ead0;
}
.env-step.is-finish:hover { background: #551824; }

@media (prefers-reduced-motion: reduce) {
  .env-glint::before, .env-ripple, .env-hint { animation: none; }
}