/**
 * 3D Interactive Wedding Envelope & Unfolding Stationery CSS
 * Alyssa & Darel Wedding Theme for WordPress & Elementor
 */

.wp-wedding-envelope-container {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e6f4f1 0%, #f0f9f7 50%, #f9faf8 100%);
  overflow: hidden;
  perspective: 1200px;
  user-select: none;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease, filter 0.85s ease;
}

/* Zooming state: expands deep into screen and dissolves */
.wp-wedding-envelope-container.is-zooming {
  transform: scale(4.2);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

.wp-wedding-envelope-container.is-completed {
  display: none !important;
}

/* Top Announcement */
.wp-envelope-header {
  text-align: center;
  margin-bottom: 24px;
  transition: opacity 0.5s ease;
}

.wp-formal-label {
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #006768;
  font-weight: 600;
}

.wp-script-title {
  font-family: 'Great Vibes', 'Alex Brush', cursive;
  font-size: 48px;
  margin: 4px 0;
  color: #1c3334;
  font-weight: normal;
}

.wp-subtitle-date {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #526e6c;
  margin: 0;
}

/* 3D Envelope Container */
.wp-envelope-stage {
  position: relative;
  width: 440px;
  height: 280px;
  max-width: 90vw;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}

/* Pocket Lining */
.wp-envelope-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #6fa697 0%, #5a9384 100%);
  box-shadow: 0 25px 50px -12px rgba(43, 140, 141, 0.35);
  border: 1px solid rgba(136, 205, 192, 0.5);
  overflow: hidden;
}

/* 3D Folding Letter */
.wp-folding-letter {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 10px;
  border-radius: 12px;
  background: #FAF9F5;
  border: 1px solid rgba(201, 168, 106, 0.5);
  box-shadow: 0 25px 60px -15px rgba(43, 140, 141, 0.4);
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.4s ease;
  z-index: 10;
  overflow: hidden;
}

/* When paper slides out */
.wp-envelope-stage.stage-sliding .wp-folding-letter {
  opacity: 1;
  transform: translateY(-220px) scale(0.95);
  /* Strictly stays behind the front envelope flaps (z-15, z-20) while sliding up! */
  z-index: 10;
}

/* When paper centers and unfolds */
.wp-envelope-stage.stage-unfolding .wp-folding-letter,
.wp-envelope-stage.stage-unfolded .wp-folding-letter {
  opacity: 1;
  transform: translateY(-40px) scale(1);
  /* Steps in front of envelope after fully clearing the pocket */
  z-index: 35;
}

/* Panels for 3D Unfolding */
.wp-letter-panel {
  background: #FAF9F5;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.5s ease, max-height 0.75s ease, padding 0.5s ease;
}

.wp-panel-top {
  border-bottom: 1px solid rgba(201, 168, 106, 0.25);
  transform-origin: bottom center;
  transform: rotateX(-90deg);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
}

.wp-envelope-stage.stage-unfolding .wp-panel-top,
.wp-envelope-stage.stage-unfolded .wp-panel-top {
  transform: rotateX(0deg);
  opacity: 1;
  max-height: 180px;
  padding: 16px 20px;
}

.wp-panel-middle {
  padding: 20px;
}

.wp-panel-bottom {
  border-top: 1px solid rgba(201, 168, 106, 0.25);
  transform-origin: top center;
  transform: rotateX(90deg);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
}

.wp-envelope-stage.stage-unfolding .wp-panel-bottom,
.wp-envelope-stage.stage-unfolded .wp-panel-bottom {
  transform: rotateX(0deg);
  opacity: 1;
  max-height: 240px;
  padding: 16px 20px;
}

/* Typography on the Invitation */
.wp-monogram-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fdfbf7;
  margin-bottom: 6px;
}

.wp-monogram-char {
  font-family: 'Great Vibes', cursive;
  font-size: 24px;
  color: #8D7038;
}

.wp-together-text {
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 9px;
  color: #526e6c;
  display: block;
}

.wp-couple-bride,
.wp-couple-groom {
  font-family: 'Pinyon Script', 'Great Vibes', cursive;
  font-size: 38px;
  color: #1C3334;
  margin: 0;
  line-height: 1.1;
  font-weight: normal;
}

.wp-ampersand {
  font-family: 'Pinyon Script', cursive;
  font-size: 24px;
  color: #8D7038;
  display: block;
  margin: 2px 0;
}

.wp-verse-text {
  font-size: 11px;
  line-height: 1.5;
  color: #445050;
  margin: 8px 0 0;
}

.wp-date-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  font-weight: 600;
  color: #1c3334;
  margin-bottom: 4px;
}

.wp-location-row {
  font-size: 11px;
  color: #526e6c;
}

.wp-auto-zoom-status {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wp-enter-btn {
  background: #006768;
  color: #ffdea4;
  border: 1px solid rgba(201, 168, 106, 0.4);
  padding: 6px 16px;
  border-radius: 20px;
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 103, 104, 0.2);
  transition: all 0.2s ease;
}

.wp-enter-btn:hover {
  background: #004f50;
  transform: scale(1.05);
}

/* Front Overlays */
.wp-envelope-flap-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(135deg, #74ad9e 0%, #609b8c 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 15;
}

.wp-envelope-flap-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  background: linear-gradient(225deg, #74ad9e 0%, #609b8c 100%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 15;
}

.wp-envelope-flap-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, #6ca394 0%, #568c7e 100%);
  clip-path: polygon(0 100%, 50% 20%, 100% 100%);
  z-index: 20;
}

/* Top Flap */
.wp-envelope-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(180deg, #7db3a4 0%, #689e90 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 25;
}

/* When opening, top flap flips backwards */
.wp-envelope-stage.stage-opening .wp-envelope-flap-top,
.wp-envelope-stage.stage-sliding .wp-envelope-flap-top,
.wp-envelope-stage.stage-unfolding .wp-envelope-flap-top,
.wp-envelope-stage.stage-unfolded .wp-envelope-flap-top {
  transform: rotateX(180deg);
  z-index: 5;
}

/* Wax Seal */
.wp-wax-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e6c888 0%, #c9a86a 50%, #8d7038 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  cursor: pointer;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.wp-envelope-stage.stage-opening .wp-wax-seal,
.wp-envelope-stage.stage-sliding .wp-wax-seal,
.wp-envelope-stage.stage-unfolding .wp-wax-seal,
.wp-envelope-stage.stage-unfolded .wp-wax-seal {
  transform: translate(-50%, -180%) rotate(25deg);
  opacity: 0;
  pointer-events: none;
}

.wp-seal-bezel {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-seal-monogram {
  font-family: 'Great Vibes', cursive;
  font-size: 24px;
  color: #57401a;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}

/* Prompt Button */
.wp-envelope-prompt {
  margin-top: 30px;
  text-align: center;
  transition: opacity 0.4s ease;
}

.wp-open-seal-btn {
  background: #006768;
  color: #ffdea4;
  border: 1px solid rgba(201, 168, 106, 0.4);
  padding: 10px 24px;
  border-radius: 30px;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 103, 104, 0.3);
  transition: all 0.2s;
}

.wp-open-seal-btn:hover {
  background: #004f50;
  transform: translateY(-2px);
}

.wp-envelope-prompt p {
  font-size: 11px;
  color: #526e6c;
  margin-top: 8px;
}

.wp-envelope-stage.stage-opening ~ .wp-envelope-prompt,
.wp-envelope-stage.stage-sliding ~ .wp-envelope-prompt,
.wp-envelope-stage.stage-unfolding ~ .wp-envelope-prompt,
.wp-envelope-stage.stage-unfolded ~ .wp-envelope-prompt {
  opacity: 0;
  pointer-events: none;
}