*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #faf6f0;
  --cream-dk: #efe6d8;
  --gold: #c9a96e;
  --gold-lt: #dfc59b;
  --gold-dk: #a8884d;
  --sage: #8a9a7b;
  --char: #2c2c2c;
  --gray: #6b6560;
  --blush: #e8d5c4;
  --white: #fffdf9;

  --ef: #e8d8be;
  --ef-lt: #f0e4cf;
  --ef-dk: #d5c3a5;
  --liner: #f5ede0;

  --ew: min(580px, 92vw);
  --eh: min(380px, 62vw);
  --flap-h: 42%;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--cream);
  color: var(--char);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- scene ---------- */
.scene {
  position: relative;
  width: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background:
    radial-gradient(ellipse at 25% 45%, rgba(201,169,110,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 25%, rgba(138,154,123,.05) 0%, transparent 50%),
    var(--cream);
  overflow: hidden;
}

/* ---------- particles ---------- */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; background: var(--gold-lt); border-radius: 50%;
  opacity: 0; animation: floatP linear infinite;
}
@keyframes floatP {
  0%  { opacity:0; transform:translateY(100vh) scale(0); }
  10% { opacity:.4; } 90% { opacity:.4; }
  100%{ opacity:0; transform:translateY(-10vh) scale(1); }
}

/* ==============================================
   STAGE — holds envelope + letter
   ============================================== */
.stage {
  position: relative;
  width: var(--ew); height: var(--eh);
  opacity: 0;
  transform: translateY(20px) scale(.97);
}
.stage.entered {
  opacity: 1;
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.4,0,.2,1) .12s,
              opacity .85s ease;
}

.stage.open {
  transform: translateY(
    min(calc(var(--eh) * 0.92 + 16px), calc(50vh - 60px))
  );
}
.stage:not(.open) { transition-delay: .05s; }

/* ==============================================
   ENVELOPE — NO z-index here so children
   participate in .stage stacking context
   ============================================== */
.envelope { position: absolute; inset: 0; }

/* front face */
.env-front {
  position: absolute; inset: 0;
  background: linear-gradient(175deg, var(--ef-lt), var(--ef) 55%, var(--ef-dk));
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 10px 40px rgba(0,0,0,.1);
  z-index: 5;
}

/* fold shadows */
.fold {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 6; border-radius: 6px;
}
.fold-l { background: linear-gradient(to right, rgba(0,0,0,.035), transparent 28%);
           clip-path: polygon(0 0, 46% 50%, 0 100%); }
.fold-r { background: linear-gradient(to left, rgba(0,0,0,.035), transparent 28%);
           clip-path: polygon(100% 0, 54% 50%, 100% 100%); }
.fold-b { background: linear-gradient(to top, rgba(0,0,0,.02), transparent 20%);
           clip-path: polygon(0 100%, 50% 48%, 100% 100%); }

/* lining (behind front) */
.env-lining {
  position: absolute; inset: 0;
  background: var(--liner);
  border-radius: 6px;
  z-index: 1;
}

/* ---------- flap ---------- */
.env-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--flap-h);
  transform-origin: top center;
  transform: perspective(900px) rotateX(0deg);
  transition: transform .6s cubic-bezier(.4,0,.2,1),
              z-index 0s 0s;
  z-index: 9;
  pointer-events: none;
}

.flap-face {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  backface-visibility: hidden;
}
.flap-out {
  background: linear-gradient(180deg, var(--ef-dk) 0%, var(--ef) 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.flap-in {
  background: linear-gradient(180deg, var(--liner), var(--cream-dk));
  transform: rotateX(180deg);
}

.stage.open .env-flap {
  transform: perspective(900px) rotateX(180deg);
  z-index: 2;
}

/* ---------- wax seal ---------- */
.seal {
  position: absolute;
  top: calc(var(--flap-h) - 6px);
  left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border: none; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 36% 34%, #dbb580, var(--gold-dk) 55%, #7a5a2e);
  box-shadow: 0 3px 14px rgba(130,100,50,.4),
              inset 0 2px 4px rgba(255,255,255,.2),
              inset 0 -2px 4px rgba(0,0,0,.18);
  z-index: 10;
  animation: sealGlow 3s ease-in-out infinite;
  transition: transform .3s, opacity .3s;
}
.seal::before {
  content:''; position: absolute; inset: 5px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14);
}
.seal::after {
  content:''; position: absolute; inset: 10px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.08);
}
@keyframes sealGlow {
  0%,100% { box-shadow: 0 3px 14px rgba(130,100,50,.4), inset 0 2px 4px rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.18); }
  50%     { box-shadow: 0 3px 26px rgba(130,100,50,.55), inset 0 2px 4px rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.18); }
}
.seal-txt {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-weight: 600;
  color: var(--cream); letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.stage.open .seal { transform: translate(-50%,-50%) scale(0); opacity: 0; }

/* ---------- cta ---------- */
.env-cta {
  position: absolute; bottom: 10%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  z-index: 8;
  padding: 1rem 2rem;
  background: rgba(255,253,249,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 6px;
  transition: opacity .25s;
}
.stage.open .env-cta { opacity: 0; pointer-events: none; }

.cta-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem; font-weight: 400;
  letter-spacing: .25em; text-transform: uppercase;
  color: #3e3630;
}
.cta-btn {
  padding: .75rem 2.2rem;
  background: transparent; border: 1.5px solid #8a7245;
  color: #5c4a28;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .35s, border-color .35s;
}
.cta-btn::before {
  content:''; position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s; z-index: -1;
}
.cta-btn:hover::before { transform: scaleX(1); }
.cta-btn:hover { color: var(--white); border-color: var(--gold); }

/* ==============================================
   LETTER — z-index 3, between lining (1)
   and env-front (5). Slides out naturally.
   ============================================== */
.letter {
  position: absolute;
  left: 5%; right: 5%; top: 4%; bottom: 4%;
  z-index: 3;
  transition: transform .75s cubic-bezier(.33,0,.15,1) .28s;
}

.stage.open .letter {
  transform: translateY(calc(-100% - 16px));
}
.stage:not(.open) .letter {
  transition: transform .6s cubic-bezier(.4,0,.2,1) 0s;
}

.letter-paper {
  position: absolute; inset: 0;
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.letter-paper::after {
  content:''; position: absolute; inset: 8px;
  border: 1px solid var(--gold-lt);
  border-radius: 2px; pointer-events: none; z-index: 1;
}

/* text */
.letter-body {
  padding: 1.8rem 1.4rem 1.5rem;
  display: flex; flex-direction: column;
  align-items: center; gap: .5rem;
  flex: 1;
  justify-content: center;
}

.label-std {
  font-family:'Josefin Sans',sans-serif;
  font-size:.75rem; font-weight:300;
  letter-spacing:.35em; text-transform:uppercase;
  color: var(--gold-dk);
}
.couple-names {
  display: flex; align-items: baseline;
  gap: .5rem; justify-content: center;
}
.fname {
  font-family:'Playfair Display',serif;
  font-size: clamp(1.5rem,4.5vw,2.2rem);
  font-weight: 400; line-height: 1.15;
}
.amp {
  font-family:'Playfair Display',serif;
  font-size: clamp(1.1rem,3.5vw,1.6rem);
  font-style: italic; color: var(--gold);
}

.date-row {
  display: flex; align-items: center;
  gap: .8rem; width: 100%; max-width: 280px;
  margin: .15rem 0;
}
.hr { flex: 1; height: 1px; background: var(--gold-lt); }
.the-date {
  font-family:'Josefin Sans',sans-serif;
  font-size:.88rem; letter-spacing:.22em; white-space:nowrap;
}

.place {
  font-family:'Cormorant Garamond',serif;
  font-size:1rem; font-weight:300; font-style:italic;
  color: #4d4540;
}
.motto {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-style:italic; color: var(--sage);
}

/* staggered reveal */
.letter-body .label-std,
.letter-body .couple-names,
.letter-body .date-row,
.letter-body .place,
.letter-body .motto {
  opacity: 0; transform: translateY(8px);
}
.stage.open .letter-body .label-std    { animation: up .45s ease both .85s; }
.stage.open .letter-body .couple-names { animation: up .45s ease both 1s; }
.stage.open .letter-body .date-row     { animation: up .45s ease both 1.12s; }
.stage.open .letter-body .place        { animation: up .45s ease both 1.22s; }
.stage.open .letter-body .motto        { animation: up .45s ease both 1.3s; }

@keyframes up {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---------- close button ---------- */
.back-btn {
  position: fixed;
  bottom: clamp(16px, 4vh, 32px);
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.2rem;
  background: rgba(255,253,249,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 20px;
  color: var(--gray);
  font-family:'Josefin Sans',sans-serif;
  font-size:.65rem; font-weight:300;
  letter-spacing:.15em; text-transform:uppercase;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: color .3s, opacity .4s;
  z-index: 20;
}
.back-btn:hover { color: var(--gold-dk); border-color: var(--gold-lt); }
.back-btn.show {
  pointer-events: auto;
  animation: up .4s ease both 1.3s;
}

/* ---------- responsive ---------- */
@media (max-width:480px) {
  :root { --ew: 92vw; --eh: min(340px, 72vw); }
  .letter-body { padding: .8rem .8rem .6rem; gap: .25rem; }
  .seal { width: 56px; height: 56px; }
  .seal-txt { font-size: .78rem; }
  .env-cta { padding: .8rem 1.4rem; }
  .cta-label { font-size: .68rem; letter-spacing: .2em; }
  .cta-btn { font-size: .72rem; padding: .65rem 1.6rem; }
  .env-cta { padding: .8rem 1.6rem; min-width: 220px; }
  .fname { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .amp { font-size: clamp(1rem, 4vw, 1.4rem); }
  .the-date { font-size: .8rem; }
  .place { font-size: .9rem; }
  .motto { font-size: .95rem; }
}

@media (max-width: 380px) {
  :root { --eh: min(300px, 78vw); }
  .letter-body { padding: .6rem .6rem .5rem; }
}