.pe-envelope-locked {
  overflow: hidden;
}

.pe-envelope-intro {
  --pe-bg-1: #fbf7ef;
  --pe-bg-2: #ead9bd;
  --pe-accent: #b8956a;
  --pe-accent-2: #fff0c9;
  --pe-ink: #35261f;
  --pe-muted: rgba(53, 38, 31, 0.66);
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(18px, 4vw, 56px);
  color: var(--pe-ink);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--pe-accent) 22%, transparent), transparent 32%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--pe-accent-2) 35%, transparent), transparent 34%),
    linear-gradient(135deg, var(--pe-bg-1), var(--pe-bg-2));
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.pe-envelope-intro.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pe-theme-magnolia,
.pe-theme-flux {
  --pe-bg-1: #fbfbf7;
  --pe-bg-2: #dbeaf1;
  --pe-accent: #8fb7c8;
  --pe-accent-2: #f2d68d;
  --pe-ink: #2b3f48;
}

.pe-theme-eternal {
  --pe-bg-1: #fffaf2;
  --pe-bg-2: #ead8c0;
  --pe-accent: #8d1637;
  --pe-accent-2: #d4a85d;
  --pe-ink: #482438;
}

.pe-theme-covenant {
  --pe-bg-1: #f8faf4;
  --pe-bg-2: #dbe7dc;
  --pe-accent: #315b47;
  --pe-accent-2: #c49a52;
  --pe-ink: #21382d;
}

.pe-theme-velvet {
  --pe-bg-1: #fff4f6;
  --pe-bg-2: #f2ccd4;
  --pe-accent: #c04d70;
  --pe-accent-2: #f7b8c6;
  --pe-ink: #552436;
}

.pe-theme-midnight {
  --pe-bg-1: #09090d;
  --pe-bg-2: #1a1413;
  --pe-accent: #d49a2f;
  --pe-accent-2: #f3cf81;
  --pe-ink: #f5e6cc;
  --pe-muted: rgba(245, 230, 204, 0.7);
}

.pe-theme-apex {
  --pe-bg-1: #07070c;
  --pe-bg-2: #16120c;
  --pe-accent: #c9a84c;
  --pe-accent-2: #f1d77a;
  --pe-ink: #f5ead6;
  --pe-muted: rgba(245, 234, 214, 0.72);
}

.pe-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pe-ambient span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pe-accent-2);
  box-shadow: 0 0 24px color-mix(in srgb, var(--pe-accent-2) 70%, transparent);
  opacity: 0.62;
  animation: peFloat 7s ease-in-out infinite;
}

.pe-ambient span:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; }
.pe-ambient span:nth-child(2) { left: 17%; top: 72%; animation-delay: -1.2s; }
.pe-ambient span:nth-child(3) { left: 29%; top: 12%; animation-delay: -2s; }
.pe-ambient span:nth-child(4) { left: 73%; top: 18%; animation-delay: -3.5s; }
.pe-ambient span:nth-child(5) { left: 88%; top: 68%; animation-delay: -2.8s; }
.pe-ambient span:nth-child(6) { left: 62%; top: 80%; animation-delay: -4.5s; }
.pe-ambient span:nth-child(7) { left: 46%; top: 9%; animation-delay: -5.2s; }
.pe-ambient span:nth-child(8) { left: 38%; top: 88%; animation-delay: -1.8s; }

.pe-stage {
  position: relative;
  width: min(88vw, 880px);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.pe-stage::before {
  content: "";
  position: absolute;
  inset: 8% 7% 2%;
  border-radius: 999px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--pe-accent) 26%, transparent), transparent 68%);
  filter: blur(18px);
  transform: translateY(18%);
  opacity: 0.8;
}

.pe-card-peek {
  position: absolute;
  z-index: 1;
  width: min(72%, 560px);
  min-height: 58%;
  top: 17%;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--pe-accent) 42%, #ffffff);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,250,241,0.9)),
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--pe-accent-2) 28%, transparent), transparent 60%);
  box-shadow: 0 28px 80px rgba(39, 28, 20, 0.24);
  transform: translate3d(0, 34%, -90px) rotateX(7deg) scale(0.88);
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.86,.18,1), opacity 0.7s ease;
}

.pe-theme-midnight .pe-card-peek {
  background:
    linear-gradient(135deg, rgba(30,24,22,0.98), rgba(10,10,14,0.96)),
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--pe-accent) 28%, transparent), transparent 60%);
}

.pe-card-kicker {
  display: block;
  margin-bottom: 12px;
  font: 600 11px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pe-accent);
}

.pe-card-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 0.95;
  color: var(--pe-ink);
}

.pe-card-subtitle {
  display: block;
  max-width: 34em;
  margin: 18px auto 0;
  font: 400 clamp(13px, 2vw, 16px)/1.8 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pe-muted);
}

.pe-envelope-button {
  position: relative;
  z-index: 3;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translate3d(0, 0, 0) rotateX(0) rotateZ(var(--pe-tilt-x, 0deg));
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 48px rgba(30, 18, 12, 0.28));
  transition: transform 0.75s cubic-bezier(.2,.86,.18,1), filter 0.4s ease;
}

.pe-envelope-button:hover,
.pe-envelope-button:focus-visible {
  transform: translateY(-8px) rotateX(2deg) rotateZ(var(--pe-tilt-x, 0deg));
  filter: drop-shadow(0 44px 62px rgba(30, 18, 12, 0.34));
  outline: none;
}

.pe-envelope-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 2vw, 22px);
  user-select: none;
  -webkit-user-drag: none;
}

.pe-seal {
  position: absolute;
  left: 50%;
  top: 59%;
  width: clamp(68px, 11vw, 118px);
  height: clamp(68px, 11vw, 118px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff8e6;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45), transparent 18%),
    radial-gradient(circle, var(--pe-accent-2), var(--pe-accent) 74%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.28), 0 12px 34px color-mix(in srgb, var(--pe-accent) 44%, transparent);
  transform: translate(-50%, -50%);
  font: 700 clamp(20px, 4vw, 44px)/1 "Cormorant Garamond", Georgia, serif;
  text-transform: uppercase;
  animation: peSealPulse 2.2s ease-in-out infinite;
}

.pe-open-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.8vw, 42px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(78%, 360px);
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--pe-ink);
  background: rgba(255,255,255,0.72);
  border: 1px solid color-mix(in srgb, var(--pe-accent) 28%, #ffffff);
  backdrop-filter: blur(12px);
  font: 700 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(35, 24, 15, 0.12);
}

.pe-skip {
  position: absolute;
  z-index: 5;
  right: clamp(16px, 3vw, 36px);
  top: clamp(16px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--pe-accent) 35%, transparent);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--pe-ink);
  background: rgba(255,255,255,0.48);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: 700 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pe-theme-midnight .pe-skip,
.pe-theme-midnight .pe-open-copy {
  color: var(--pe-ink);
  background: rgba(12,12,16,0.58);
}

.pe-envelope-intro.is-opening .pe-envelope-button {
  transform: translate3d(0, 44%, 0) rotateX(-15deg) scale(0.9);
  opacity: 0.16;
  pointer-events: none;
}

.pe-envelope-intro.is-opening .pe-seal {
  animation: peSealBreak 0.7s ease forwards;
}

.pe-envelope-intro.is-opening .pe-open-copy {
  opacity: 0;
}

.pe-envelope-intro.is-opening .pe-card-peek {
  opacity: 1;
  transform: translate3d(0, -12%, 70px) rotateX(0) scale(1);
}

@keyframes peFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.34; }
  50% { transform: translateY(-28px) scale(1.35); opacity: 0.88; }
}

@keyframes peSealPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes peSealBreak {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.9) rotate(18deg); opacity: 0; }
}

@media (max-width: 680px) {
  .pe-envelope-intro {
    padding: 16px;
  }

  .pe-stage {
    width: min(96vw, 520px);
    aspect-ratio: 9 / 11;
  }

  .pe-envelope-button {
    width: 138%;
  }

  .pe-card-peek {
    width: min(82vw, 390px);
    min-height: 52%;
    top: 16%;
  }

  .pe-open-copy {
    min-width: 260px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pe-envelope-intro,
  .pe-envelope-button,
  .pe-card-peek,
  .pe-ambient span,
  .pe-seal {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}