/* DK Summer Wedding envelope intro v1.0.14 */
.dk-sw-env {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(47,93,58,0.2), transparent 58%),
    linear-gradient(165deg, #1a2418 0%, #0e140e 55%, #1a1510 100%);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  visibility: visible;
  -webkit-tap-highlight-color: transparent;
}
.dk-sw-env.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dk-sw-env__skip {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 20; /* always above stage / risen card */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,230,200,0.72);
  background: transparent;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
}
.dk-sw-env__skip:focus { outline: none; }
.dk-sw-env__skip:hover,
.dk-sw-env__skip:focus-visible {
  color: #f5e6c8;
  border-color: rgba(212,175,55,0.8);
  background: rgba(212,175,55,0.08);
  outline: 2px solid rgba(212,175,55,0.7);
  outline-offset: 2px;
}

.dk-sw-env__stage {
  position: relative;
  width: min(92vw, 640px);
  aspect-ratio: 1.55 / 1;
  perspective: 1400px;
  perspective-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Phones portrait: taller envelope; svh/dvh so address bar doesn't break sizing */
@media (max-width: 600px) and (orientation: portrait),
       (max-width: 600px) and (max-aspect-ratio: 10 / 11) {
  .dk-sw-env__stage {
    width: 90vw;
    max-width: 420px;
    aspect-ratio: 0.72 / 1;
    height: auto;
    max-height: calc(100vh - 8.5rem);
    max-height: calc(100svh - 8.5rem);
    max-height: calc(100dvh - 8.5rem);
  }
  .dk-sw-env__letter {
    height: 88%;
    top: 2%;
  }
  .dk-sw-env__letter-names { font-size: clamp(1.05rem, 5.8vw, 1.45rem); }
  .dk-sw-env__letter-date { font-size: clamp(0.68rem, 3vw, 0.85rem); }
}
@media (max-width: 600px) and (orientation: portrait),
       (max-width: 600px) and (max-aspect-ratio: 10 / 11) {
  .dk-sw-env__stage {
    width: min(90vw, calc((100vh - 8.5rem) * 0.72));
    width: min(90vw, calc((100svh - 8.5rem) * 0.72));
    width: min(90vw, calc((100dvh - 8.5rem) * 0.72));
  }
}
.dk-sw-env__shadow {
  position: absolute;
  left: 6%; right: 6%; bottom: -4%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.42), transparent 72%);
  filter: blur(9px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dk-sw-env__envelope {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 2;
  transition: transform 0.75s cubic-bezier(0.4,0,0.2,1), opacity 0.75s ease;
}

/* Clean cream body — no inset X shadows */
.dk-sw-env__shell {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  overflow: hidden;
  background-color: #e6d9c0;
  background-image: linear-gradient(180deg, #eee4d2 0%, #e6d9c0 40%, #dccfb0 100%);
  background-clip: padding-box;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(90,70,40,0.28);
  /* dark bottom edge kills light fringe; drop shadow for depth */
  box-shadow:
    0 14px 34px rgba(0,0,0,0.34),
    0 2px 5px rgba(0,0,0,0.16),
    inset 0 -1px 0 rgba(70,52,28,0.3);
}
.dk-sw-env__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.dk-sw-env__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e8dcc6;
}

.dk-sw-env__letter {
  position: absolute;
  left: 4.5%; right: 4.5%; top: 4%;
  height: 82%;
  z-index: 2;
  border-radius: 2px;
  background: linear-gradient(180deg, #fffaf0, #f5ebd8);
  flex-direction: column;
  align-items: center;
  /* Names/date live in the TOP ~35-40% of the card so they clear the pocket when risen */
  justify-content: flex-start;
  gap: 0.28rem;
  padding: 11% 0.75rem 0.75rem;
  box-sizing: border-box;
  text-align: center;
  color: #2f5d3a;
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.4s ease, opacity 0.3s ease;
  pointer-events: none;
  /* JS sets --dk-letter-rise in px from getBoundingClientRect */
  --dk-letter-rise: -48%;
}
.dk-sw-env__letter-names {
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  letter-spacing: 0.04em;
  font-style: italic;
  line-height: 1.15;
}
.dk-sw-env__letter-rule {
  width: 2.4rem; height: 1px;
  margin: 0.15rem 0;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.dk-sw-env__letter-date {
  font-size: clamp(0.68rem, 2.2vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a6b55;
}
.dk-sw-env__letter-flourish {
  width: 1.6rem;
  height: 1px;
  margin: 0.45rem 0 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.55), transparent);
  flex-shrink: 0;
}
.dk-sw-env__letter-rsvp {
  display: block;
  margin: 1.1rem auto 0;
  padding: 0.15rem 0.2rem;
  max-width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  /* Desktop: ~3–4rem — main feature of the card */
  font-size: clamp(2.6rem, 7.5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
  /* Blind emboss, readable: warm taupe + TL highlight + stronger BR shadow */
  color: #7a6548;
  text-shadow:
    -1.2px -1.2px 0 rgba(255, 252, 245, 0.98),
    0.4px 0.4px 0 rgba(255, 250, 240, 0.4),
    1.4px 1.8px 1px rgba(45, 30, 15, 0.4),
    0 0 0.8px rgba(60, 42, 22, 0.22);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: 5;
  isolation: isolate;
}
.dk-sw-env__letter-rsvp:hover,
.dk-sw-env__letter-rsvp:focus-visible {
  color: #6a563c;
  text-shadow:
    -1.3px -1.3px 0 rgba(255, 253, 248, 1),
    1.5px 1.9px 1.1px rgba(45, 30, 15, 0.45);
  outline: none;
}
.dk-sw-env__letter-rsvp:focus-visible {
  outline: 1.5px solid rgba(212,175,55,0.65);
  outline-offset: 4px;
  border-radius: 2px;
}
.dk-sw-env__letter-hint {
  margin-top: 0.55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.55rem, 1.8vw, 0.65rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(90, 70, 40, 0.42);
  text-align: center;
  pointer-events: none;
}
/* Phones: ~2.2–3rem, still one line at 360px */
@media (max-width: 600px) {
  .dk-sw-env__letter-rsvp {
    margin-top: 1.25rem;
    font-size: clamp(2.15rem, 11.5vw, 2.85rem);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
}


/* Side folds — under flap tip; gentle fill, no wide blur bands */
.dk-sw-env__side-l,
.dk-sw-env__side-r {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 46%;
  z-index: 4;
  pointer-events: none;
}
.dk-sw-env__side-l {
  left: 0;
  background: linear-gradient(155deg, #e6dac4 0%, #d6c8a8 100%);
  clip-path: polygon(0 0, 100% 55%, 0 100%);
}
.dk-sw-env__side-l::after { content: none; }
.dk-sw-env__side-r {
  right: 0;
  background: linear-gradient(205deg, #e6dac4 0%, #d6c8a8 100%);
  clip-path: polygon(0 55%, 100% 0, 100% 100%);
}
.dk-sw-env__side-r::after { content: none; }

/* Bottom pocket — crisp V under seal, no smudge bands */
.dk-sw-env__pocket {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, #e8dcc6 0%, #d9c9a8 100%);
  clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%);
}
.dk-sw-env__pocket::after { content: none; }
.dk-sw-env__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  z-index: 6;
  pointer-events: none;
  background: #d4c29e;
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}

/*
 * CLOSED flap: one clean triangle, apex just below centre (under seal).
 * Soft tight drop-shadow along the two lower edges only (via SVG-like filter on shaped el).
 */
.dk-sw-env__flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 53%;
  z-index: 7;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  pointer-events: none;
}
/* Hard offset triangle behind the face = crisp edge shadow (no soft blur bands) */
.dk-sw-env__flap::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: rgba(55, 38, 18, 0.32);
  transform: translateY(2.5px);
  z-index: 0;
  pointer-events: none;
}
.dk-sw-env__flap-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  /* flat-ish face so it reads as ONE triangle, not banded */
  background: linear-gradient(180deg, #f4ecde 0%, #ebe1cd 70%, #e5d8be 100%);
  filter: none;
}

/*
 * OPEN flap: separate element ABOVE the envelope.
 * Base on envelope top edge, apex pointing UP, liner facing viewer, behind letter.
 */
.dk-sw-env__flap-open {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;          /* sits on top edge of envelope */
  height: 52%;
  z-index: 3;            /* behind letter (letter goes to 10) */
  pointer-events: none;
  opacity: 0;
  transform: rotateX(55deg);
  transform-origin: 50% 100%; /* hinge at bottom = envelope top */
  transform-style: preserve-3d;
  transition: opacity 0.35s ease, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  clip-path: polygon(50% 0, 0 100%, 100% 100%); /* apex UP */
  background:
    repeating-linear-gradient(135deg, #c8b492 0 2px, #b89f7c 2px 4px),
    linear-gradient(180deg, #c9b492, #b0896e);
  box-shadow: inset 0 8px 18px rgba(40,25,10,0.2);
}

/* Seal — transparent button, round shadow on SVG only */
.dk-sw-env__seal-btn {
  position: absolute;
  left: 50%;
  top: 51.5%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: clamp(76px, 20vw, 100px);
  height: clamp(76px, 20vw, 100px);
  padding: 0; margin: 0;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer;
  border-radius: 50%;
  /* clip any residual square filter/bounds to the round seal */
  clip-path: circle(49% at 50% 50%);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  filter: none !important;
  overflow: hidden;
  transition: transform 0.35s ease, opacity 0.4s ease;
}
.dk-sw-env__seal-btn:hover { transform: translate(-50%, -50%) scale(1.04); }
.dk-sw-env__seal-btn:focus,
.dk-sw-env__seal-btn:focus-visible { outline: none !important; box-shadow: none !important; }
.dk-sw-env__seal-btn.is-kb-focus {
  outline: 2px solid #d4af37 !important;
  outline-offset: 3px;
}
.dk-sw-env__seal-btn svg {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  background: transparent !important;
  /* no CSS filter — SVG feDropShadow follows the blob; CSS filter on filtered SVG = square */
  filter: none !important;
}

.dk-sw-env__hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 2.6vw, 0.92rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,230,200,0.78);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.dk-sw-env__hint span {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid rgba(212,175,55,0.35);
}

/* ===== Animation sequence ===== */
.dk-sw-env.is-seal-out .dk-sw-env__seal-btn {
  opacity: 0;
  transform: translate(-50%, -60%) scale(1.15) rotate(-8deg);
  pointer-events: none;
}
.dk-sw-env.is-seal-out .dk-sw-env__hint { opacity: 0; }

/* Closing flap folds away (toward edge-on) then fades */
.dk-sw-env.is-flap-open .dk-sw-env__flap {
  transform: rotateX(78deg);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
}
/* Open flap (liner, apex UP) fades/settles in above envelope */
.dk-sw-env.is-flap-open .dk-sw-env__flap-open {
  opacity: 1;
  transform: rotateX(8deg);
  transition: opacity 0.35s ease 0.3s, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.25s;
}
/* Shift down so open flap + risen letter aren't clipped; JS may add --dk-stage-nudge */
.dk-sw-env__stage {
  --dk-stage-nudge: 0px;
}
.dk-sw-env.is-flap-open .dk-sw-env__stage {
  transform: translateY(calc(16% + var(--dk-stage-nudge, 0px)));
}
@media (max-width: 600px) and (orientation: portrait) {
  .dk-sw-env.is-flap-open .dk-sw-env__stage {
    transform: translateY(calc(22% + var(--dk-stage-nudge, 0px)));
  }
}
@media (max-width: 600px) and (orientation: landscape) {
  .dk-sw-env.is-flap-open .dk-sw-env__stage {
    transform: translateY(calc(12% + var(--dk-stage-nudge, 0px)));
  }
}

/*
 * Letter-up stacking: flatten 3D so the open flap's rotateX liner cannot
 * intersect the risen card (pinstripe bar through RSVP on phones).
 * Raise the whole shell above flap-open — letter lives inside shell.
 */
.dk-sw-env.is-letter-up .dk-sw-env__envelope {
  transform-style: flat;
}
.dk-sw-env.is-letter-up .dk-sw-env__shell {
  overflow: visible;
  z-index: 10;
  isolation: isolate;
}
.dk-sw-env.is-letter-up .dk-sw-env__flap-open {
  z-index: 1;
  transform: none !important;
  transform-style: flat;
}
.dk-sw-env.is-letter-up .dk-sw-env__letter {
  display: flex;
  transform: translateY(var(--dk-letter-rise, -48%));
  z-index: 12;
  opacity: 1;
  visibility: visible;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  pointer-events: auto;
  isolation: isolate;
  background: linear-gradient(180deg, #fffaf0, #f5ebd8);
}
@media (max-width: 600px) {
  .dk-sw-env.is-letter-up .dk-sw-env__letter {
    transform: translateY(var(--dk-letter-rise, -52%)) scale(1.04);
    transform-origin: 50% 0%;
  }
}
.dk-sw-env.is-letter-up .dk-sw-env__side-l,
.dk-sw-env.is-letter-up .dk-sw-env__side-r,
.dk-sw-env.is-letter-up .dk-sw-env__pocket,
.dk-sw-env.is-letter-up .dk-sw-env__bottom { z-index: 4; }


/* Fade the whole overlay (backdrop + Skip), not just the stage — avoids dark+Skip limbo */
.dk-sw-env.is-revealing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.dk-sw-env.is-revealing .dk-sw-env__envelope,
.dk-sw-env.is-revealing .dk-sw-env__shadow { transform: translateY(-8%) scale(0.94); opacity: 0; }
.dk-sw-env.is-revealing .dk-sw-env__stage { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; }
.dk-sw-env.is-revealing .dk-sw-env__letter { transform: translateY(calc(var(--dk-letter-rise, -48%) - 8%)) scale(0.96); opacity: 0; }
.dk-sw-env.is-revealing .dk-sw-env__seal-btn,
.dk-sw-env.is-revealing .dk-sw-env__skip,
.dk-sw-env.is-revealing .dk-sw-env__hint { opacity: 0; }

html.dk-sw-env-active,
html.dk-sw-env-active body {
  overflow: hidden !important;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .dk-sw-env, .dk-sw-env__flap, .dk-sw-env__flap-open, .dk-sw-env__seal-btn,
  .dk-sw-env__letter, .dk-sw-env__envelope, .dk-sw-env__shadow, .dk-sw-env__hint, .dk-sw-env__stage {
    transition: opacity 0.2s ease !important;
  }
  .dk-sw-env.is-flap-open .dk-sw-env__flap { opacity: 0; transform: none; }
  .dk-sw-env.is-flap-open .dk-sw-env__flap-open { opacity: 1; transform: none; }
  .dk-sw-env.is-flap-open .dk-sw-env__stage { transform: none; }
}