/* ==============================================================
   KHMER WEDDING E-INVITATION STYLES
   Couples: Po Robin ❤️ Pros Vichika
   ============================================================== */

/* Global Styles */
body {
  font-family: 'Kantumruy Pro', 'Khmer OS Siemreap', sans-serif;
  color: #33261D;
  background-color: #FAF7F2;
  background-image: linear-gradient(rgba(252, 250, 247, 0.90), rgba(250, 246, 240, 0.93)), url('../background.jpg'), url('background.jpg');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Shimmer Gold Text Effect */
.gold-shimmer {
  background: linear-gradient(135deg, #A67C1E 0%, #E8C15A 30%, #FFF3B3 50%, #DAA520 70%, #996515 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 5s linear infinite;
}

@keyframes shimmerText {
  to {
    background-position: 200% center;
  }
}

/* Floating particles canvas */
#petals-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 25;
}

/* ==============================================================
   AUTHENTIC KHMER TRADITIONAL WEDDING ENVELOPE STYLES
   ============================================================== */
.perspective-1200 {
  perspective: 1400px;
}

.khmer-envelope-box {
  position: relative;
  width: 340px;
  height: 235px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 640px) {
  .khmer-envelope-box {
    width: 460px;
    height: 300px;
  }
}

/* Envelope Base Shell (Deep Ceremonial Crimson/Maroon Silk with Gold Brocade) */
.khmer-envelope-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #9E1929 0%, #6E0E1B 65%, #4A0710 100%);
  border-radius: 18px;
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.75), 0 0 40px rgba(212, 175, 55, 0.35);
  border: 2.5px solid #DFC064;
  overflow: hidden;
}

/* Silk Brocade Pattern Overlay */
.khmer-brocade-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#FFD700 0.75px, transparent 0.75px), radial-gradient(#FFD700 0.75px, #6E0E1B 0.75px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.08;
  pointer-events: none;
}

/* Inner Envelope Pocket Lining */
.khmer-envelope-interior {
  position: absolute;
  inset: 8px;
  background: linear-gradient(180deg, #38050B 0%, #520914 100%);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Traditional Inner Letter Card (សន្លឹកប័ណ្ណអញ្ជើញអាពាហ៍ពិពាហ៍បែបប្រពៃណី) */
.khmer-inner-card {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  bottom: 10px;
  background: linear-gradient(135deg, #FFFCF5 0%, #FFF8EA 50%, #FAF0DA 100%);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border: 2px solid #D4AF37;
  z-index: 3;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.85s ease;
  transform: translateY(0) scale(0.98);
  pointer-events: auto;
}

/* Stage 1: Card peeks naturally out from INSIDE pocket (remains tucked behind pocket) */
.khmer-inner-card.card-peeking {
  transform: translateY(-90px) scale(1.0);
  box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
  z-index: 3; /* KEEP BEHIND FRONT POCKET (pocket has z-index 10) */
}
@media (min-width: 640px) {
  .khmer-inner-card.card-peeking {
    transform: translateY(-115px) scale(1.0);
    z-index: 3;
  }
}

/* Stage 2: Card glides forward into center screen & expands for guests to read clearly */
.khmer-inner-card.card-showcased {
  transform: translateY(-50px) translateZ(90px) scale(1.12);
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.85), 0 0 55px rgba(212, 175, 55, 0.65);
  z-index: 40; /* Pulled in front of pocket and everything */
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s ease;
  cursor: pointer;
}
@media (min-width: 640px) {
  .khmer-inner-card.card-showcased {
    transform: translateY(-60px) translateZ(110px) scale(1.18);
    z-index: 40;
  }
}

/* Envelope drops slightly and softens when card is showcased */
.khmer-envelope-box.envelope-softened {
  transform: translateY(45px) scale(0.92);
  opacity: 0.75;
  filter: blur(0.5px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease, filter 0.9s ease;
}

/* Traditional Khmer Flap (គម្របស្រោមសំបុត្រក្បាច់ខ្មែរ 3D Double-Face) */
.khmer-envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 1.0s cubic-bezier(0.33, 1, 0.68, 1), z-index 0.1s 0.45s;
  z-index: 20;
}
@media (min-width: 640px) {
  .khmer-envelope-flap {
    height: 200px;
  }
}

.khmer-envelope-flap.flap-opened {
  transform: rotateX(180deg);
  z-index: 1; /* drops behind card & pocket */
}

/* 3D Flap Faces (Front & Inner Lining) */
.flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flap-front {
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.flap-back {
  transform: rotateX(180deg);
  filter: drop-shadow(0 -5px 10px rgba(0, 0, 0, 0.35));
}

/* Envelope Front Pocket (Lower & Side Silk Pouch) */
.khmer-envelope-pocket {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 165px;
  z-index: 10; /* in front of card while inside pocket */
  pointer-events: none;
  filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.3));
}
@media (min-width: 640px) {
  .khmer-envelope-pocket {
    height: 215px;
  }
}

/* Horizontal Ceremonial Gold Silk Ribbon Sash (ខ្សែបូសូត្រមាស) */
.khmer-ribbon {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  height: 36px;
  transform: translateY(-50%);
  z-index: 25;
  background: linear-gradient(90deg, #A8791B 0%, #E8C362 25%, #FFF2B3 50%, #E8C362 75%, #A8791B 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  border-top: 1.5px solid #FFE799;
  border-bottom: 1.5px solid #8C610F;
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
@media (min-width: 640px) {
  .khmer-ribbon {
    height: 44px;
  }
}

.khmer-ribbon.ribbon-fading {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.5);
}

/* Traditional Khmer Royal Wedding Lotus Seal (ត្រាមាសមង្គលការ) */
.khmer-seal {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, opacity 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.khmer-seal:hover {
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 0 25px rgba(245, 214, 107, 0.95)) drop-shadow(0 12px 25px rgba(0, 0, 0, 0.6));
}

.khmer-seal:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.khmer-seal.seal-opening {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0;
  filter: drop-shadow(0 0 35px #FFF3B3) brightness(1.25);
  pointer-events: none;
}

/* Envelope Overlay UI Elements Animation (Header & Action Button) */
.envelope-ui-header {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.envelope-ui-header.header-hidden {
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
}

.envelope-ui-action {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.envelope-ui-action.action-hidden {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

/* Floating Golden Halo on Seal */
@keyframes pulseGoldGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 35px rgba(245, 214, 107, 0.8), inset 0 0 22px rgba(255, 255, 255, 0.7);
  }
}
.seal-glow {
  animation: pulseGoldGlow 2.5s infinite ease-in-out;
}

/* Audio Equalizer wave */
@keyframes wavePulse {
  0%, 100% { height: 6px; }
  50% { height: 18px; }
}
.wave-bar:nth-child(1) { animation: wavePulse 1.1s ease-in-out infinite 0.1s; }
.wave-bar:nth-child(2) { animation: wavePulse 1.1s ease-in-out infinite 0.35s; }
.wave-bar:nth-child(3) { animation: wavePulse 1.1s ease-in-out infinite 0.55s; }
.wave-bar:nth-child(4) { animation: wavePulse 1.1s ease-in-out infinite 0.2s; }

/* Custom Toast Notification */
#toast {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #FAF6F0;
}
::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B89228;
}

/* Pure SVG Royal Golden Silk Curtain Animations (No image files required) */
#stage-curtains {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 52;
  overflow: hidden;
  transition: opacity 0.8s ease;
}

#curtain-left-box, #curtain-right-box, #curtain-top-box {
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

/* Curtains Opened State: side curtains smoothly glide outwards */
.curtains-opened #curtain-left-box {
  transform: translateX(-105%);
}
.curtains-opened #curtain-right-box {
  transform: translateX(105%);
}
@media (min-width: 1280px) {
  /* On wide desktop, keep a luxury silk border on the outer edge */
  .curtains-opened #curtain-left-box {
    transform: translateX(-70%);
  }
  .curtains-opened #curtain-right-box {
    transform: translateX(70%);
  }
}
.curtains-opened #curtain-top-box {
  transform: translateY(-40%);
  opacity: 0.95;
}
@media (min-width: 640px) {
  .curtains-opened #curtain-top-box {
    transform: translateY(-50%);
    opacity: 0.95;
  }
}

/* Card Top Khmer Kbach Crest & Arch */
.card-kbach-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 640px) {
  .card-kbach-header {
    height: 95px;
  }
}