/* ========================================================
   ENVELOPE COVER SCREEN — BLUE WATERCOLOR THEME
   ======================================================== */
.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)), url("../assets/background.webp") center center / cover no-repeat, #f4effa;
  overflow: hidden;
  padding: 24px 16px;
}

.envelope-screen.is-hidden,
.invite-open .envelope-screen {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.invite-open .envelope-box,
.invite-open .envelope-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hiệu ứng mở thiệp chuyển động: Thiệp di chuyển từ dưới lên trên */
.invite-opening .envelope-box,
.invitation-opening .envelope-box {
  animation: open-envelope-slide-up 1.65s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
  will-change: transform, opacity;
}

.invite-opening .envelope-screen {
  animation: screen-fade-out 1.7s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

@keyframes screen-fade-out {
  0%, 48% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

.invite-opening .btn-open,
.invitation-opening .btn-open {
  animation: button-press .55s ease both;
}

.invite-opening .envelope-corner-flower {
  animation: none !important;
}

.invite-opening .ambient-particles {
  opacity: 0.2;
  transition: opacity 0.6s ease;
}

@keyframes open-envelope-slide-up {
  0% {
    transform: perspective(900px) translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
    filter: drop-shadow(0 24px 60px rgba(55, 90, 125, 0.16));
  }
  12% {
    transform: perspective(900px) translateY(10px) scale(0.99) rotateX(1.5deg);
    opacity: 1;
  }
  50% {
    transform: perspective(900px) translateY(-38vh) scale(0.96) rotateX(-4deg);
    opacity: 0.95;
    filter: drop-shadow(0 35px 50px rgba(45, 80, 115, 0.24));
  }
  100% {
    transform: perspective(900px) translateY(-125vh) scale(0.9) rotateX(-8deg);
    opacity: 0;
    filter: drop-shadow(0 40px 60px rgba(45, 80, 115, 0));
  }
}

@keyframes button-press {
  0% { transform: scale(1); }
  40% { transform: scale(.92); }
  100% { transform: scale(1.08); opacity: 0; }
}

/* ========================================================
   CLICK FLOWER & LEAF BURST (Bắn hoa & lá tại điểm mở thiệp)
   ======================================================== */
.click-flower-burst-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1002;
  overflow: hidden;
}

.burst-flower-item {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(35, 20, 60, 0.22));
  will-change: transform, opacity;
}

.burst-flower-item svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes burst-flower-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
    opacity: 1;
  }
  15% {
    transform: translate(calc(-50% + var(--tx) * 0.42), calc(-50% + var(--ty) * 0.42)) scale(calc(var(--scale, 1) * 1.25)) rotate(calc(var(--rot) * 0.3));
    opacity: 1;
  }
  55% {
    transform: translate(calc(-50% + var(--tx) * 0.88), calc(-50% + var(--ty) * 0.88 + var(--drift-y, 10px))) scale(var(--scale, 1)) rotate(calc(var(--rot) * 0.75));
    opacity: 0.96;
  }
  80% {
    transform: translate(calc(-50% + var(--tx) * 0.98 + var(--sway-x, 8px)), calc(-50% + var(--ty) + var(--fall-y, 35px))) scale(calc(var(--scale, 1) * 0.88)) rotate(calc(var(--rot) * 0.92));
    opacity: 0.85;
  }
  100% {
    transform: translate(calc(-50% + var(--tx) + var(--sway-x, 15px)), calc(-50% + var(--ty) + var(--fall-y, 65px))) scale(calc(var(--scale, 1) * 0.45)) rotate(var(--rot));
    opacity: 0;
  }
}

/* Ambient Falling Petals & Glows */
.ambient-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  top: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: particle-fall linear infinite;
  filter: drop-shadow(0 2px 4px rgba(60, 90, 120, 0.15));
  user-select: none;
  pointer-events: none;
}

.particle svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes particle-fall {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% {
    transform: translateY(105vh) translateX(var(--sway, 30px)) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

/* Card Container */
.envelope-box {
  position: relative;
  z-index: 10;
  width: min(540px, 92vw);
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.envelope-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 13px;
  text-align: center;
  box-shadow: 
    0 24px 60px rgba(55, 90, 125, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.95);
  overflow: visible;
  box-sizing: border-box;
}

/* Corner Flower Cluster on Top-Left */
.envelope-corner-flower {
  position: absolute;
  top: -75px;
  left: -65px;
  width: clamp(200px, 42vw, 285px);
  height: auto;
  pointer-events: none;
  z-index: 20;
  filter: drop-shadow(0 10px 22px rgba(40, 75, 110, 0.16));
  -webkit-clip-path: inset(1.1% 0 0 5%);
  clip-path: inset(1.1% 0 0 5%);
  transform-origin: 25% 25%;
  /* Animation moved to flower-animations.css */
}

@media (max-width: 480px) {
  .envelope-corner-flower {
    top: -24px;
    left: -20px;
    width: 140px;
  }
}

/* Delicate Inner Frame */
.envelope-inner-frame {
  position: relative;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(175, 198, 222, 0.65);
  border-radius: 10px;
  padding: 42px 20px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* SAVE THE DATE */
.envelope-kicker {
  position: relative;
  font-family: "Cinzel", "Montserrat", Georgia, serif;
  font-size: clamp(0.78rem, 1.9vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #264668;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* Couple Names (Cursive Calligraphy) */
html:not(.fonts-ready) .envelope-names,
html:not(.fonts-ready) .envelope-date,
html:not(.fonts-ready) .envelope-kicker,
html:not(.fonts-ready) .envelope-quote {
  opacity: 0;
}

.envelope-kicker,
.envelope-names,
.envelope-date,
.envelope-quote {
  transition: opacity 0.25s ease-out;
}

.envelope-names {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px;
}

.envelope-name-line {
  font-family: "Ephesis", "Dancing Script", "Alex Brush", cursive;
  font-size: clamp(2.9rem, 7vw, 4.1rem);
  color: #163456;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(22, 52, 86, 0.08);
}

.envelope-name-amp {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}

.envelope-name-amp .amp-line {
  display: none;
}

.envelope-name-amp .amp-char {
  font-family: "Cormorant Garamond", "Lora", Georgia, serif;
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 600;
  color: #3b6186;
  line-height: 1;
}

/* Date */
.envelope-date {
  position: relative;
  font-family: "Cormorant Garamond", "Lora", Georgia, serif;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #163456;
  margin: 8px 0 12px;
}

/* Divider with Center Heart */
.envelope-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 140px;
  margin: 0 auto 14px;
}

.envelope-divider .line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(45, 80, 115, 0.55));
}

.envelope-divider .line:last-child {
  background: linear-gradient(to left, transparent, rgba(45, 80, 115, 0.55));
}

.envelope-divider .heart-icon {
  color: #24466c;
  font-size: 0.8rem;
  line-height: 1;
}

/* Quote (Mảnh mai, thanh thoát và tao nhã) */
.envelope-quote {
  position: relative;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.02rem, 2.3vw, 1.18rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: #1e3f64;
  margin: 0 0 24px;
  text-align: center;
}

/* Open Button */
.btn-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 36px;
  background: #466c8f;
  background: linear-gradient(135deg, #4f779c 0%, #3a5f82 100%);
  color: #ffffff;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-radius: 999px;
  border: none;
  box-shadow: 0 8px 24px rgba(45, 80, 115, 0.32);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(45, 80, 115, 0.45);
  background: linear-gradient(135deg, #5882a8 0%, #416a90 100%);
}

.btn-open:active {
  transform: translateY(0);
}

.btn-open .btn-heart-svg {
  width: 13px;
  height: 13px;
  fill: #ffffff;
  flex-shrink: 0;
}

.btn-open .shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: btn-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-shimmer {
  0% { left: -100%; }
  35%, 100% { left: 140%; }
}
.envelope-invite-text {
  margin: 8px 0 0;
  color: var(--blue-deep, #24466b);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 600;
  text-align: center;
}