/* ============================================================
   The envelope — blush blind-embossed paper, a botanical liner,
   and a champagne wax seal that cracks in two when tapped.
   Pulled out of index.html so the intro can grow without the
   inline <style> block growing with it.
   ============================================================ */
:root {
  --env: #f9eee9;         /* blush paper, lit */
  --env-dark: #eed9d0;    /* blush paper, in shadow */
  --env-liner: #f3dcd4;   /* inside of the envelope */
  --wax: #7a1220;         /* rich oxblood wax, mid-tone */
  --wax-hi: #b73347;      /* wax highlight, lit sheen */
  --wax-lo: #3c0810;      /* wax in shadow, near-black at the rim */
  --wax-ink: #f3d9a8;     /* the debossed monogram, warm gold */

  /* one botanical sprig, tiled — drawn three ways: the dark and light
     copies offset by a pixel fake a blind emboss; the gold one is the liner */
  --sprig-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23000' stroke-opacity='.11' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 126C30 96 44 74 72 48'/%3E%3Cpath d='M36 92c-10-6-18-4-24 4 9 3 17 1 24-4z'/%3E%3Cpath d='M50 72c2-11 8-17 17-19-1 10-7 16-17 19z'/%3E%3Cpath d='M60 62c-11-4-19-1-24 7 10 2 18-1 24-7z'/%3E%3Ccircle cx='78' cy='42' r='3.2'/%3E%3Ccircle cx='84' cy='34' r='3.2'/%3E%3Ccircle cx='76' cy='33' r='3.2'/%3E%3Ccircle cx='80' cy='38' r='1.4'/%3E%3Cpath d='M126 14C112 40 100 60 74 86'/%3E%3Cpath d='M104 44c10-6 18-4 24 4-9 3-17 1-24-4z'/%3E%3Cpath d='M92 62c-2-11-8-17-17-19 1 10 7 16 17 19z'/%3E%3Cpath d='M84 74c11-4 19-1 24 7-10 2-18-1-24-7z'/%3E%3Ccircle cx='66' cy='96' r='3.2'/%3E%3Ccircle cx='60' cy='104' r='3.2'/%3E%3Ccircle cx='68' cy='105' r='3.2'/%3E%3Ccircle cx='64' cy='101' r='1.4'/%3E%3Cpath d='M112 118c4-8 10-11 18-10-3 8-9 12-18 10z'/%3E%3Cpath d='M22 22c4 8 10 11 18 10-3-8-9-12-18-10z'/%3E%3C/svg%3E");
  --sprig-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 126C30 96 44 74 72 48'/%3E%3Cpath d='M36 92c-10-6-18-4-24 4 9 3 17 1 24-4z'/%3E%3Cpath d='M50 72c2-11 8-17 17-19-1 10-7 16-17 19z'/%3E%3Cpath d='M60 62c-11-4-19-1-24 7 10 2 18-1 24-7z'/%3E%3Ccircle cx='78' cy='42' r='3.2'/%3E%3Ccircle cx='84' cy='34' r='3.2'/%3E%3Ccircle cx='76' cy='33' r='3.2'/%3E%3Ccircle cx='80' cy='38' r='1.4'/%3E%3Cpath d='M126 14C112 40 100 60 74 86'/%3E%3Cpath d='M104 44c10-6 18-4 24 4-9 3-17 1-24-4z'/%3E%3Cpath d='M92 62c-2-11-8-17-17-19 1 10 7 16 17 19z'/%3E%3Cpath d='M84 74c11-4 19-1 24 7-10 2-18-1-24-7z'/%3E%3Ccircle cx='66' cy='96' r='3.2'/%3E%3Ccircle cx='60' cy='104' r='3.2'/%3E%3Ccircle cx='68' cy='105' r='3.2'/%3E%3Ccircle cx='64' cy='101' r='1.4'/%3E%3Cpath d='M112 118c4-8 10-11 18-10-3 8-9 12-18 10z'/%3E%3Cpath d='M22 22c4 8 10 11 18 10-3-8-9-12-18-10z'/%3E%3C/svg%3E");
  --sprig-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23b99668' stroke-opacity='.6' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 126C30 96 44 74 72 48'/%3E%3Cpath d='M36 92c-10-6-18-4-24 4 9 3 17 1 24-4z'/%3E%3Cpath d='M50 72c2-11 8-17 17-19-1 10-7 16-17 19z'/%3E%3Cpath d='M60 62c-11-4-19-1-24 7 10 2 18-1 24-7z'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='78' cy='42' r='3.2'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='84' cy='34' r='3.2'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='76' cy='33' r='3.2'/%3E%3Ccircle fill='%23b99668' stroke='none' cx='80' cy='38' r='1.4'/%3E%3Cpath d='M126 14C112 40 100 60 74 86'/%3E%3Cpath d='M104 44c10-6 18-4 24 4-9 3-17 1-24-4z'/%3E%3Cpath d='M92 62c-2-11-8-17-17-19 1 10 7 16 17 19z'/%3E%3Cpath d='M84 74c11-4 19-1 24 7-10 2-18-1-24-7z'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='66' cy='96' r='3.2'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='60' cy='104' r='3.2'/%3E%3Ccircle fill='%237d95b5' fill-opacity='.35' stroke='none' cx='68' cy='105' r='3.2'/%3E%3Ccircle fill='%23b99668' stroke='none' cx='64' cy='101' r='1.4'/%3E%3Cpath d='M112 118c4-8 10-11 18-10-3 8-9 12-18 10z'/%3E%3Cpath d='M22 22c4 8 10 11 18 10-3-8-9-12-18-10z'/%3E%3C/svg%3E");
  /* fine paper grain, tiled */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0 0 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

.env-wrap {
  position: relative;
  width: min(72vw, 320px);
  aspect-ratio: 10 / 7;
  perspective: 1000px;
  filter: drop-shadow(0 22px 44px rgba(90,70,60,0.22));
}

/* light trapped inside — warm gold spilling out while it waits (treasure sealed within) */
.env-glow {
  position: absolute; inset: -32%;
  background: radial-gradient(circle at 50% 52%, rgba(255,208,120,0.85) 0%, rgba(255,198,110,0.40) 38%, rgba(255,198,110,0.12) 60%, transparent 74%);
  filter: blur(9px); z-index: 0; opacity: 0; pointer-events: none;
  animation: trappedGlow 2.4s ease-in-out 9s infinite;
}
.env-core {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255,238,185,0.92) 0%, rgba(255,216,145,0.38) 45%, transparent 70%);
  filter: blur(6px); z-index: 0; opacity: 0; pointer-events: none;
  animation: coreGlow 2.4s ease-in-out 9s infinite;
}
@keyframes trappedGlow { 0%, 100% { opacity: 0.55; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes coreGlow    { 0%, 100% { opacity: 0.70; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.05); } }
/* …and seeps brightly through the seam under the flap */
.env-seam {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 3.5%, 50% 49.5%, 0 3.5%);
  background: linear-gradient(180deg, rgba(255,236,175,1), rgba(255,210,135,0.5));
  filter: blur(1.4px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  animation: trappedGlow 2.4s ease-in-out 9s infinite;
}
/* the seal breaks: the light bursts free, then settles */
.opened .env-glow, .opened .env-core { animation: glowBurst 1.8s ease 0.5s forwards; }
@keyframes glowBurst {
  0%   { opacity: 0.9;  transform: scale(1); }
  35%  { opacity: 1;    transform: scale(1.22); }
  100% { opacity: 0;    transform: scale(1.38); }
}
.opened .env-seam { animation: none; opacity: 0; transition: opacity 0.3s; }

/* the little card tucked inside */
.mini-card {
  position: absolute;
  left: 7%; right: 7%;
  top: 9%; bottom: 14%;
  background: var(--card);
  border: 1px solid rgba(185,150,104,0.5);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(185,150,104,0.35);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.opened .mini-card { animation: cardRise 1.5s cubic-bezier(.3,.7,.3,1) 1.5s both, cardHalo 2.6s ease 0.6s both; }
@keyframes cardRise { from { transform: translateY(0); } to { transform: translateY(-80%); } }
@keyframes cardHalo {
  0%   { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(185,150,104,0.35), 0 0 0 0 rgba(255,214,140,0); }
  35%  { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(185,150,104,0.35), 0 0 46px 14px rgba(255,214,140,0.65); }
  100% { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(185,150,104,0.35), 0 0 18px 4px rgba(255,214,140,0.22); }
}
.mini-card > * { opacity: 0; }
.opened .mini-card > * { animation: fadeIn 0.8s ease 1.9s forwards; }
.mini-names { font-family: 'Pinyon Script', cursive; font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.15; }
.mini-sub { font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); }

/* the back wall is the liner — gold sprigs on deeper blush, seen once the flap lifts */
.env-back {
  position: absolute; inset: 0;
  background-color: var(--env-liner);
  background-image: var(--sprig-gold), linear-gradient(180deg, #f6e4de, var(--env-liner));
  background-size: 110px 110px, 100% 100%;
  border-radius: 3px;
  z-index: 1;
}

/* the front pocket: blush paper with the sprig blind-embossed into it */
.env-pocket, .flap-face {
  background-color: var(--env);
  background-image:
    var(--sprig-light),
    var(--sprig-dark),
    var(--grain),
    linear-gradient(160deg, var(--env) 0%, var(--env-dark) 100%);
  background-size: 120px 120px, 120px 120px, 120px 120px, 100% 100%;
  background-position: -1px -1px, 0.6px 0.6px, 0 0, 0 0;
}
.env-pocket {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  z-index: 3;
  box-shadow: inset 0 -1px 0 rgba(185,150,104,0.35);
}
/* soft fold shadows where the side flaps meet the pocket */
.env-pocket::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(120,80,70,0.10) 0%, transparent 28%),
    linear-gradient(245deg, rgba(120,80,70,0.10) 0%, transparent 28%),
    linear-gradient(0deg, rgba(120,80,70,0.08), transparent 22%);
  pointer-events: none;
}

/* the flap is a thin sheet with two faces: paper outside, liner inside.
   It hinges at the top; the inside face is only seen once it has turned over. */
.env-flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 52%;
  transform-origin: top center;
  transform-style: preserve-3d;
  z-index: 4;
}
.flap-face, .flap-liner {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap-face {
  background-image:
    var(--sprig-light),
    var(--sprig-dark),
    var(--grain),
    linear-gradient(200deg, var(--env) 0%, var(--env-dark) 90%);
}
.flap-face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(120,80,70,0.12));
  pointer-events: none;
}
.flap-liner {
  transform: rotateX(180deg);
  background-color: var(--env-liner);
  background-image: var(--sprig-gold), linear-gradient(0deg, #f6e4de, var(--env-liner));
  background-size: 110px 110px, 100% 100%;
}
.opened .env-flap { animation: flapOpen 1.3s cubic-bezier(.55,.06,.35,1) 0.5s both; }
@keyframes flapOpen {
  0%   { transform: rotateX(0deg);    z-index: 4; }
  60%  { transform: rotateX(-150deg); z-index: 4; }
  61%  { z-index: 1; }
  100% { transform: rotateX(-180deg); z-index: 1; }
}

/* the guest's name on the envelope, and the ask beneath it */
.env-to {
  position: absolute;
  left: 0; right: 0;
  bottom: 17%;
  margin: 0;
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  line-height: 1;
  padding: 0 6%;
  overflow-wrap: anywhere;
  /* darker than --wax-ink (which stays pale gold for the debossed monogram
     on the wax seal) — that pale gold read as near-invisible against the
     beige envelope, so the guest's name gets its own, readable color plus
     a faint light lift to keep the engraved look. */
  color: #8a6a3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1.2s ease 11.6s forwards;
}
/* longer names step down so they still sit in one line under the seal */
.env-to.long  { font-size: clamp(0.82rem, 3.6vw, 1.05rem); }
.env-to.xlong { font-size: clamp(0.66rem, 2.9vw, 0.84rem); }
.env-req {
  position: absolute;
  left: 0; right: 0;
  bottom: 7.5%;
  margin: 0;
  font-size: clamp(0.46rem, 2vw, 0.56rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a6a3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1.2s ease 11.9s forwards;
}

/* ---------- the wax seal ---------- */
/* The button is only the hit-area and the hinge for the pulse; the wax
   itself is two halves, each a full blob clipped down one jagged line,
   so that on tap it cracks apart instead of just vanishing. */
.seal {
  position: absolute;
  left: 50%; top: 52%;
  width: clamp(66px, 19vw, 84px);
  height: clamp(66px, 19vw, 84px);
  margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 6;
  filter: drop-shadow(0 1px 1px rgba(40,6,12,0.45)) drop-shadow(0 4px 7px rgba(80,40,30,0.3)) drop-shadow(0 12px 20px rgba(80,55,30,0.18));
  -webkit-tap-highlight-color: transparent;
  animation: sealPulse 2.2s ease-in-out 12.4s infinite;
}
.seal:focus-visible { outline: 2px solid var(--seal); outline-offset: 6px; border-radius: 50%; }
.wax {
  position: absolute; inset: 0;
  display: block;
  z-index: 1;
}
/* the art is a vector symbol (index.html #seal-art): irregular poured edge,
   drips, raised rim, pressed field, debossed gold monogram, specular sheen */
.wax svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* the crack line runs top to bottom with a kink, so the two halves interlock */
.wax-l { clip-path: polygon(0 0, 50% 0, 47% 28%, 55% 54%, 48% 100%, 0 100%); }
.wax-r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 48% 100%, 55% 54%, 47% 28%); }

/* inviting pulse once delivered */
@keyframes sealPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%      { transform: translate(-50%,-50%) scale(1.05); }
}
/* tap: the pulse stops, the wax splits, the halves tumble off */
.opened .seal { animation: sealSettle 0.9s ease both; pointer-events: none; }
@keyframes sealSettle {
  0%   { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
.opened .wax-l { animation: crackL 0.85s cubic-bezier(.3,.6,.25,1) both; }
.opened .wax-r { animation: crackR 0.85s cubic-bezier(.3,.6,.25,1) both; }
@keyframes crackL {
  0%   { transform: none; opacity: 1; }
  22%  { transform: translateX(-4px) rotate(-4deg); opacity: 1; }
  70%  { transform: translate(-46%, 26%) rotate(-19deg); opacity: 1; }
  100% { transform: translate(-62%, 42%) rotate(-27deg); opacity: 0; }
}
@keyframes crackR {
  0%   { transform: none; opacity: 1; }
  22%  { transform: translateX(4px) rotate(4deg); opacity: 1; }
  70%  { transform: translate(46%, 22%) rotate(17deg); opacity: 1; }
  100% { transform: translate(62%, 36%) rotate(25deg); opacity: 0; }
}