/* ==========================================================================
   VANVI LUXE COUTURE — 3D INTERACTIVE WAX SEAL WEDDING ENVELOPE CEREMONY
   Template: Premium Wedding · Rose & Clay Edition (Hues & Whispers Luxe)
   ========================================================================== */

:root {
  --envelope-gold: #c9a55d;
  --envelope-gold-light: #f7e4b5;
  --envelope-burgundy: #581b1f;
  --envelope-deep: #38070e;
  --envelope-ink: #692614;
}

/* ENVELOPE MODAL ENTRANCE */
.envelope-entrance {
  --envelope-ink: #692614;
  padding: max(24px, env(safe-area-inset-top, 24px)) 16px max(24px, env(safe-area-inset-bottom, 24px));
  background: linear-gradient(145deg, rgba(22, 2, 4, 0.88), rgba(0, 0, 0, 0) 24%, rgba(213, 44, 37, 0.18) 32%, rgba(0, 0, 0, 0) 42%, rgba(19, 1, 3, 0.75) 60%, rgba(0, 0, 0, 0) 74%),
              radial-gradient(at 28% 24%, #a9212b, rgba(0, 0, 0, 0) 62%),
              radial-gradient(at 85% 86%, #8c1220, rgba(0, 0, 0, 0) 58%),
              #38070e;
  border: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 99999;
  box-sizing: border-box;
}

.envelope-entrance:not([open]) {
  display: none !important;
}

.envelope-entrance[open] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.envelope-entrance::backdrop {
  background: transparent;
}

.envelope-entrance:after {
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
              repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
  position: absolute;
  inset: 0;
}

.envelope-confetti {
  color: #efae99;
  opacity: 0.22;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* ENVELOPE 3D SCENE STAGE (BALANCED & CENTERED) */
.envelope-scene {
  z-index: 1;
  text-align: center;
  width: min(92vw, 560px);
  max-width: 560px;
  margin: auto;
  padding: 24px 0 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-1deg);
  transition: transform 0.35s ease;
  box-sizing: border-box;
}

/* 3D ENVELOPE SHELL */
.envelope {
  aspect-ratio: 1.55;
  perspective: 1200px;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 4px 20px rgba(56, 7, 14, 0.45);
}

.envelope-back {
  background: linear-gradient(145deg, #f8d777, #bf822a);
  border-radius: 8px;
  position: absolute;
  inset: 0;
  box-shadow: inset 1px 1px 1px rgba(255, 245, 182, 0.8),
              inset -2px -2px 2px rgba(99, 52, 7, 0.5),
              3px 5px 5px rgba(23, 2, 0, 0.5),
              10px 18px 30px rgba(18, 1, 4, 0.6);
}

/* GILDED LETTER INSIDE */
.envelope-letter {
  font: italic clamp(17px, 2.8vw, 25px)/1.3 var(--serif, "Cormorant Garamond", Georgia, serif);
  color: var(--envelope-ink, #692614);
  background: #fff5dc;
  border: 1px solid rgba(203, 168, 128, 0.45);
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  display: flex;
  position: absolute;
  inset: 8% 7% 6%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.6s ease;
}

.envelope-letter-mark {
  color: #a58159;
  font-style: normal;
  font-size: 1.2em;
}

.envelope-letter-rule {
  border-top: 1px solid rgba(203, 168, 128, 0.6);
  width: 28%;
}

/* ENVELOPE FOLDS CONVERGING AT PRECISE 50% 52% CENTER */
.envelope-pocket {
  z-index: 2;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(170deg, #f6d478 10%, #ddb151 55%, #b97825);
  border-radius: 0 0 8px 8px;
  position: absolute;
  inset: 0;
}

.envelope-fold {
  z-index: 3;
  border-radius: 8px;
  position: absolute;
  inset: 0;
}

.envelope-fold-left {
  clip-path: polygon(0 0, 50% 52%, 0 100%);
  background: linear-gradient(125deg, #efc967, #d19b40 70%, #93601c);
}

.envelope-fold-right {
  clip-path: polygon(100% 0, 50% 52%, 100% 100%);
  background: linear-gradient(225deg, #ffe493, #deb454 60%, #ad751d);
}

.envelope-flap-shadow {
  z-index: 4;
  transform-origin: top center;
  clip-path: polygon(0 1%, 100% 1%, 50% 54%);
  backface-visibility: hidden;
  background: rgba(91, 48, 11, 0.65);
  position: absolute;
  inset: 0;
}

.envelope-flap {
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 52%);
  transform-origin: top center;
  backface-visibility: hidden;
  background: linear-gradient(160deg, #ffecac, #f3cf67 43%, #c99936 80%);
  border-radius: 8px 8px 0 0;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px #fff7c6;
}

.envelope-pocket:after,
.envelope-fold:after,
.envelope-flap:after {
  content: "";
  opacity: 0.22;
  pointer-events: none;
  background-image: radial-gradient(rgba(120, 71, 9, 0.5) 0.55px, transparent 0.8px),
                    radial-gradient(rgba(255, 251, 217, 0.6) 0.6px, transparent 0.9px);
  background-position: 0 0, 1px 2px;
  background-size: 3px 3px, 4px 4px;
  position: absolute;
  inset: 0;
}

/* FULL-FRAME FORM CONTAINER (ABSOLUTE 100% INSET WITH POINTER-EVENTS CONTROL) */
.envelope-open-form {
  z-index: 10;
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  display: block;
}

/* WAX SEAL BUTTON — 100% MATHEMATICALLY LOCKED AT CENTER OF ENVELOPE FLAP */
.envelope-open-button {
  cursor: pointer;
  width: clamp(92px, 18vw, 112px);
  height: clamp(92px, 18vw, 112px);
  aspect-ratio: 1;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  filter: drop-shadow(0 8px 24px rgba(45, 5, 10, 0.7));
}

.envelope-open-button:hover {
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 12px 30px rgba(50, 5, 10, 0.85)) drop-shadow(0 0 16px rgba(244, 120, 88, 0.45));
}

.envelope-open-button:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* GOLDEN SEAL AURA BREATHING GLOW */
.envelope-seal-aura {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 120, 88, 0.45) 0%, rgba(201, 165, 93, 0.25) 50%, rgba(201, 165, 93, 0) 75%);
  animation: sealAuraPulse 2.4s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes sealAuraPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.95;
  }
}

/* 3D ROYAL CARMINE WAX SEAL */
.envelope-seal {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 46% 50% 48% 46% / 48% 46% 50% 48%;
  background: radial-gradient(at 27% 16%, rgba(246, 111, 80, 0.85), transparent 30%),
              radial-gradient(circle at 50% 53%, #8f0b13 0 53%, #c12023 57%, #70050a 65%, #c22a24 72%, #82090c);
  place-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: inset 2px 2px 4px rgba(255, 187, 135, 0.5),
              inset -3px -4px 5px rgba(64, 0, 0, 0.7),
              0 6px 18px rgba(45, 5, 10, 0.65),
              0 2px 8px rgba(201, 165, 93, 0.35);
  border: 1.5px solid rgba(247, 228, 181, 0.55);
}

.envelope-seal-ring {
  width: 82%;
  height: 82%;
  display: block;
  position: relative;
}

/* ✦ TAP TO OPEN ✦ CRYSTAL CLEAR LUXURY PILL BADGE */
.envelope-tap-badge {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: linear-gradient(135deg, rgba(35, 8, 14, 0.95), rgba(88, 15, 27, 0.95));
  border: 1px solid rgba(223, 192, 138, 0.8);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 12px rgba(223, 192, 138, 0.4);
  color: #ffe6a3;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  animation: badgeFloating 2s infinite ease-in-out;
}

@keyframes badgeFloating {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 10px rgba(223, 192, 138, 0.35);
  }
  50% {
    transform: translateX(-50%) translateY(2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75), 0 0 16px rgba(223, 192, 138, 0.6);
  }
}

.tap-sparkle {
  color: #c9a55d;
  font-size: 11px;
}

.tap-text {
  font-weight: 800;
}

/* FOCUS STATES */
.envelope-open-button:focus-visible {
  outline: none;
}
.envelope-open-button:focus-visible .envelope-seal {
  outline-offset: 6px;
  outline: 2px solid #fff0b3;
}
[data-envelope-focus]:focus {
  outline: none;
}

/* UNBOXING CEREMONY ANIMATION SEQUENCE */
.envelope-entrance.is-opening {
  pointer-events: none;
  animation: 0.9s 1.3s forwards envelope-dismiss;
}

.envelope-entrance.is-opening .envelope-open-button {
  animation: 0.55s forwards envelope-unseal;
}

.envelope-entrance.is-opening .envelope-flap,
.envelope-entrance.is-opening .envelope-flap-shadow {
  animation: 1.3s ease-in-out 0.35s forwards envelope-unfold;
}

.envelope-entrance.is-opening .envelope-letter {
  animation: 1.1s ease-out 0.7s forwards envelope-letter-rise;
}

@keyframes envelope-unseal {
  to {
    opacity: 0;
    transform: translate(-50%, -66%) scale(0.85);
  }
}

@keyframes envelope-unfold {
  to {
    transform: rotateX(175deg);
  }
}

@keyframes envelope-letter-rise {
  to {
    transform: translateY(-16%);
  }
}

@keyframes envelope-dismiss {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* RESPONSIVE SMART MOBILE ENGINE */
@media (max-width: 480px) {
  .envelope-entrance {
    padding: max(16px, env(safe-area-inset-top, 16px)) 12px max(16px, env(safe-area-inset-bottom, 16px));
  }
  .envelope-scene {
    width: 95vw;
    max-width: 375px;
    padding: 18px 0 36px;
    transform: rotate(0deg); /* 100% straight and centered on phones! */
  }
  .envelope {
    aspect-ratio: 1.48;
    border-radius: 6px;
  }
  .envelope-open-button {
    width: 92px;
    height: 92px;
    top: 52%;
    left: 50%;
  }
  .envelope-tap-badge {
    bottom: -24px;
    font-size: 8.5px;
    padding: 3px 10px;
    letter-spacing: 1.2px;
  }
}

@media (max-width: 360px) {
  .envelope-scene {
    width: 96vw;
    max-width: 320px;
  }
  .envelope-open-button {
    width: 82px;
    height: 82px;
  }
  .envelope-tap-badge {
    bottom: -22px;
    font-size: 7.5px;
    padding: 2px 8px;
    letter-spacing: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-entrance.is-opening,
  .envelope-entrance.is-opening .envelope-open-button,
  .envelope-entrance.is-opening .envelope-flap,
  .envelope-entrance.is-opening .envelope-flap-shadow,
  .envelope-entrance.is-opening .envelope-letter,
  .envelope-seal-aura,
  .envelope-tap-badge {
    animation: none !important;
  }
}