/**
 * Royal Wedding Invitation Opening Experience
 * Nisarga B K Weds Sharath B
 * Style: envelope.css (Authentic 3D Physical Envelope with Enclosed Card)
 */

/* 3D PERSPECTIVE SCENE */
.envelope-scene {
  width: 100%;
  max-width: 500px;
  height: 100%;
  max-height: 85vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* ENVELOPE RIG (Coordinates Camera Tilt, Elevation, & Focal Zoom) */
.envelope-rig {
  position: relative;
  width: min(88vw, 360px);
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Realistic Floor Contact Shadow Below Envelope */
.envelope-ambient-shadow {
  position: absolute;
  bottom: -20px;
  left: 6%;
  width: 88%;
  height: 26px;
  background: radial-gradient(ellipse at 50% 50%, rgba(50, 15, 20, 0.45) 0%, rgba(60, 20, 25, 0.15) 55%, transparent 75%);
  border-radius: 50%;
  filter: blur(8px);
  transform: translateZ(-20px);
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* 3D ENVELOPE OBJECT */
.envelope-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 8px;
  will-change: transform;
}

/* 1. ENVELOPE BACK INTERIOR WALL */
.envelope-back {
  position: absolute;
  inset: 0;
  background-color: var(--envelope-ivory);
  background-image: url('../images/envelope-texture.png');
  background-size: cover;
  border-radius: 8px;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 
    inset 0 0 35px rgba(100, 30, 25, 0.1),
    0 12px 32px rgba(40, 15, 10, 0.18);
  z-index: 5;
  overflow: hidden;
}

/* Silk Damask Lining inside Envelope Pocket */
.envelope-inner-lining {
  position: absolute;
  inset: 6px;
  background: radial-gradient(ellipse at 50% 30%, rgba(133, 28, 44, 0.94) 0%, rgba(85, 12, 22, 0.98) 100%);
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.65);
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-mandala-watermark {
  width: 75%;
  height: 75%;
  opacity: 0.16;
  background-image: radial-gradient(circle, #D4AF37 1px, transparent 1px);
  background-size: 16px 16px;
}

/* 2. CARD POCKET SLOT (Interior Pocket Sizing & Physical Enclosure) */
.card-pocket-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15; /* Sits between back wall (5) and front pocket (30) */
  pointer-events: none;
  transform-style: preserve-3d;
}

/* THE WEDDING INVITATION CARD WRAPPER */
.card-wrapper {
  position: absolute;
  left: 50%;
  top: 18px; /* Tucked inside the pocket so top is below flap fold */
  transform: translateX(-50%) translateZ(1px);
  width: min(84vw, 300px);
  aspect-ratio: 1086 / 1448; /* Exact 3:4 portrait card ratio */
  will-change: transform, opacity, box-shadow;
  transform-origin: center center;
  pointer-events: auto;
}

/* The Physical Invitation Card with Curved Realistic Edges */
.invitation-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px; /* Curved realistic stationery corners */
  overflow: hidden;
  background: #FFFDF9;
  border: 2px solid rgba(212, 175, 55, 0.9);
  box-shadow: 
    0 8px 22px rgba(40, 15, 10, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.16);
  transform-style: preserve-3d;
  transition: box-shadow 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic);
}

/* High-Relief Antique Gold Foil Card Bevel Frame */
.card-foil-border {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  pointer-events: none;
  z-index: 10;
  box-shadow: 
    inset 0 0 12px rgba(212, 175, 55, 0.28),
    inset 0 1px 2px rgba(255, 240, 180, 0.6);
}

/* The Real Uploaded Wedding Invitation Image */
.invitation-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: 16px;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

/* Subtle Paper Sheen Highlight across Curved Invitation Card */
.card-paper-sheen {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 38%, rgba(212,175,55,0.12) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.3) 0%, transparent 60%);
  pointer-events: none;
  z-index: 12;
}

/* Final Card Presentation Gold Aura Glow & Curved Depth Shadow */
.card-wrapper.card-elevated .invitation-card {
  box-shadow: 
    0 24px 65px rgba(35, 10, 15, 0.45),
    0 6px 18px rgba(0, 0, 0, 0.25),
    0 0 35px rgba(212, 175, 55, 0.5),
    0 0 70px rgba(212, 175, 55, 0.22);
}

/* 3. ENVELOPE FRONT POCKET (Authentic Paper Folds Covering Lower Card) */
.envelope-pocket {
  position: absolute;
  inset: 0;
  transform: translateZ(6px); /* In front of card (z:2px) */
  z-index: 30; /* Placed in front of card initially */
  pointer-events: none;
  filter: drop-shadow(0 -3px 8px rgba(40, 15, 10, 0.14));
}

.pocket-fold {
  position: absolute;
  inset: 0;
  background-color: var(--envelope-ivory);
  background-image: url('../images/envelope-texture.png');
  background-size: cover;
}

/* Left Triangular Fold */
.pocket-left {
  clip-path: polygon(0 0, 52% 51%, 0 100%);
  border-left: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: inset -5px 0 12px rgba(60, 20, 15, 0.08);
}

/* Right Triangular Fold */
.pocket-right {
  clip-path: polygon(100% 0, 48% 51%, 100% 100%);
  border-right: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: inset 5px 0 12px rgba(60, 20, 15, 0.08);
}

/* Bottom Triangular Fold (Overlaps Left & Right) */
.pocket-bottom {
  clip-path: polygon(0 100%, 50% 42%, 100% 100%);
  filter: drop-shadow(0 -4px 6px rgba(40, 15, 10, 0.16));
}

/* Gold Foil Filigree Seams on Pocket Edges */
.pocket-gold-filigree {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(28deg, transparent 49.2%, rgba(212, 175, 55, 0.8) 49.8%, transparent 51.5%),
    linear-gradient(-28deg, transparent 49.2%, rgba(212, 175, 55, 0.8) 49.8%, transparent 51.5%);
  pointer-events: none;
}

.pocket-texture-layer {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: 
    inset 0 0 25px rgba(100, 30, 20, 0.08),
    inset 0 -8px 20px rgba(60, 15, 20, 0.12);
  pointer-events: none;
}

/* 4. ENVELOPE TOP TRIANGULAR FLAP (3D ROTATING FLAP) */
.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: translateZ(10px); /* In front of pocket (z:6px) when closed */
  z-index: 45; /* Above pocket & card when closed */
  will-change: transform;
}

.flap-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Front Face of Flap (Ivory Paper with Gold Trim & Central Wax Seal) */
.flap-front {
  background-color: var(--envelope-ivory);
  background-image: url('../images/envelope-texture.png');
  background-size: cover;
  filter: drop-shadow(0 6px 14px rgba(45, 12, 18, 0.28));
  z-index: 2;
}

.flap-gold-trim {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(150deg, transparent 48.8%, rgba(212, 175, 55, 0.9) 49.6%, transparent 51.2%),
    linear-gradient(210deg, transparent 48.8%, rgba(212, 175, 55, 0.9) 49.6%, transparent 51.2%);
  pointer-events: none;
}

.flap-texture-layer {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Back Face of Flap (Rich Silk Lining revealed when rotated -180deg) */
.flap-back {
  transform: rotateX(180deg);
  background: radial-gradient(ellipse at 50% 80%, rgba(133, 28, 44, 0.96) 0%, rgba(85, 12, 22, 0.98) 100%);
  filter: drop-shadow(0 -4px 8px rgba(30, 8, 12, 0.35));
  z-index: 1;
}

.flap-inner-lining {
  position: absolute;
  inset: 4px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-foil-inner-mandala {
  width: 65%;
  height: 65%;
  opacity: 0.24;
  background-image: radial-gradient(circle, #D4AF37 1px, transparent 1px);
  background-size: 14px 14px;
}

/* 5. ROYAL WAX SEAL (Centered at Flap Tip - 100% Unclipped & Crystal Clear) */
.wax-seal {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(76px, 21vw, 92px);
  height: clamp(76px, 21vw, 92px);
  cursor: pointer;
  z-index: 60;
  transition: transform 0.25s var(--ease-elastic), filter 0.25s ease;
  pointer-events: auto;
}

.wax-seal:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

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

.wax-seal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 8px 24px rgba(45, 10, 16, 0.48),
    0 3px 8px rgba(0, 0, 0, 0.32),
    inset 0 2px 4px rgba(255, 235, 190, 0.45);
}

.wax-seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: contrast(1.1) brightness(1.04) drop-shadow(0 3px 6px rgba(40, 8, 12, 0.4));
}

.wax-seal-glint {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 25%;
  height: 25%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.wax-seal-shadow {
  position: absolute;
  bottom: -6px;
  left: 10%;
  width: 80%;
  height: 14px;
  background: radial-gradient(ellipse, rgba(40, 10, 15, 0.45) 0%, transparent 70%);
  filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}