/* ==========================================================================
   STYLE KHUSUS TEMA NATURAL ALAM (HIJAU, PUTIH, MAROON, BEIGE)
   ========================================================================== */

:root {
  --color-forest: #1b3b2b;
  --color-forest-dark: #12281d;
  --color-sage: #8fa89b;
  --color-sage-light: #eaf0ec;
  --color-maroon: #722232;
  --color-maroon-dark: #541925;
  --color-maroon-light: #943348;
  --color-beige: #f6f3ed;
  --color-beige-dark: #e8dfd1;
  --color-gold: #c6a364;
  --color-white: #ffffff;
  --color-text-main: #2d3748;
  --color-text-muted: #64748b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-beige);
  color: var(--color-text-main);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1ede6;
}
::-webkit-scrollbar-thumb {
  background: var(--color-sage);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-forest);
}

/* Typography Helpers */
.font-serif-title {
  font-family: 'Playfair Display', serif;
}
.font-script {
  font-family: 'Alex Brush', cursive;
}

/* Text Shimmer / Gold Accent */
.text-gold-gradient {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #aa771c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-maroon-gradient {
  background: linear-gradient(135deg, #722232 0%, #943348 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Botanical Background Texture with Natural Motif (Non-Repeating Organic Wash) */
.bg-nature-texture {
  background-color: #f7f4ee;
  background-image: 
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(234, 240, 236, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 85% 75%, rgba(246, 243, 237, 0.85) 0%, transparent 75%),
    linear-gradient(180deg, #faf8f5 0%, #f6f3ed 50%, #f4efe7 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}




/* Glassmorphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 228, 0.85);
  box-shadow: 0 10px 30px -5px rgba(27, 59, 43, 0.07);
}

.glass-card-dark {
  background: rgba(27, 59, 43, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 168, 155, 0.3);
  color: #ffffff;
}

/* Photo Frames with Botanical Arch */
.arch-frame {
  border-radius: 130px 130px 20px 20px;
  overflow: hidden;
  box-shadow: 0 14px 35px -8px rgba(27, 59, 43, 0.22);
  border: 5px solid #ffffff;
  position: relative;
}

/* ==========================================================================
   ANIMASI NATURAL ALAM (NATURAL BOTANICAL ANIMATIONS)
   ========================================================================== */

/* 1. Branch Swaying in Breeze (Ranting Bergoyang ditiup Angin) */
@keyframes branchSwayTL {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  35% {
    transform: rotate(3deg) translateY(-3px) scale(1.02);
  }
  70% {
    transform: rotate(-2deg) translateY(2px) scale(0.99);
  }
}

@keyframes branchSwayTR {
  0%, 100% {
    transform: scaleX(-1) rotate(0deg);
  }
  40% {
    transform: scaleX(-1) rotate(-3.5deg) translateY(-2px);
  }
  75% {
    transform: scaleX(-1) rotate(2deg) translateY(2px);
  }
}

.animate-sway-tl {
  transform-origin: top left;
  animation: branchSwayTL 8s ease-in-out infinite;
}

.animate-sway-tr {
  transform-origin: top right;
  animation: branchSwayTR 9s ease-in-out infinite;
}

/* 2. Hanging Vines Breeze */
@keyframes hangingVines {
  0%, 100% {
    transform: skewX(0deg) translateY(0);
  }
  50% {
    transform: skewX(2deg) translateY(3px);
  }
}
.animate-vines {
  transform-origin: top center;
  animation: hangingVines 6s ease-in-out infinite;
}

/* 3. Floating Nature Leaves */
@keyframes leafFloatWobble {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(4deg) translateX(4px);
  }
  50% {
    transform: translateY(-14px) rotate(-3deg) translateX(-3px);
  }
  75% {
    transform: translateY(-6px) rotate(2deg) translateX(2px);
  }
}
.animate-leaf-float {
  animation: leafFloatWobble 6s ease-in-out infinite;
}
.animate-leaf-float-delayed {
  animation: leafFloatWobble 7.5s ease-in-out 1.5s infinite;
}

/* 4. Falling Leaves Particles Across Screen */
@keyframes leafDriftDrop {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.75;
  }
  88% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(90px, calc(100vh + 160px), 0) rotate(380deg) rotateY(270deg);
    opacity: 0;
  }
}

.falling-leaf {
  position: fixed;
  top: -80px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  will-change: transform, opacity;
  animation-name: leafDriftDrop;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* 5. Forest Fireflies */
@keyframes fireflyDrift {
  0%, 100% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0.15;
  }
  25% {
    transform: translate(12px, -18px) scale(1.1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-10px, -35px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translate(18px, -50px) scale(1.2);
    opacity: 0.9;
  }
}

.firefly-spore {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #f9e2af 20%, #c6a364 80%);
  box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.6), 0 0 16px 4px rgba(143, 168, 155, 0.3);
  pointer-events: none;
  animation: fireflyDrift 7s ease-in-out infinite;
}

/* 6. Soft Pulsing */
@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}
.animate-soft-pulse {
  animation: softPulse 3s ease-in-out infinite;
}

/* 7. Spin Slow */
@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spinSlow 14s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
.pause-spin {
  animation-play-state: paused;
}

/* Botanical PNG Ornament Helpers */
.png-divider {
  display: block;
  margin: 14px auto;
  max-width: min(340px, 85vw);
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
}

/* ========================================================
   FLUID BOTANICAL HORIZON & CANOPY LAYERS (ANTI-CLIPPING)
   ======================================================== */

/* Fluid Pine Forest Horizon Layer (Non-Repeating Continuous Panorama) */
.pine-forest-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/pine-trees.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
}

/* Inverted Pine Forest Horizon Layer (Non-Repeating Continuous Panorama) */
.pine-forest-bg-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/pine-trees.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  transform: scaleY(-1);
  pointer-events: none;
}

/* Fluid Hanging Ivy Canopy Layer (Non-Repeating Continuous Canopy) */
.hanging-ivy-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/hanging-ivy.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}

/* Fluid Responsive Banner Container Heights across Viewports */
.pine-horizon-container {
  height: 140px;
}
@media (min-width: 640px) {
  .pine-horizon-container {
    height: 170px;
  }
}
@media (min-width: 1024px) {
  .pine-horizon-container {
    height: 230px;
  }
}
@media (min-width: 1440px) {
  .pine-horizon-container {
    height: 280px;
  }
}

.ivy-canopy-container {
  height: 125px;
}
@media (min-width: 640px) {
  .ivy-canopy-container {
    height: 150px;
  }
}
@media (min-width: 1024px) {
  .ivy-canopy-container {
    height: 200px;
  }
}
@media (min-width: 1440px) {
  .ivy-canopy-container {
    height: 250px;
  }
}

/* ==========================================================================
   ENVELOPE OPENING ANIMATION WITH HIGH-RES BOTANICAL GRAPHICS
   ========================================================================== */

.envelope-wrapper {
  perspective: 1200px;
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.34, 1.25, 0.64, 1), opacity 0.65s ease;
  z-index: 25;
  pointer-events: none;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  overflow: visible;
}

.envelope-flap img {
  display: block;
  width: 100%;
  height: auto;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  filter: drop-shadow(0 10px 20px rgba(27, 59, 43, 0.2));
}

/* Flap Opens Upwards in 3D */
.envelope-wrapper.opening .envelope-flap {
  transform: rotateX(180deg) translateY(-8px);
  opacity: 0.1;
}

/* Card Elevates smoothly out of envelope */
.envelope-wrapper.opening #cover-card {
  transform: translateY(-28px) scale(1.02);
  box-shadow: 0 35px 65px -15px rgba(27, 59, 43, 0.35);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.85s ease;
}

/* Wax Seal Burst & Bloom Animation */
@keyframes sealPopBreak {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  }
  35% {
    transform: scale(1.22);
    filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.95)) brightness(1.25);
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0));
  }
}

@keyframes wreathBloomBurst {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  45% {
    transform: scale(1.45) rotate(70deg);
    opacity: 0.85;
  }
  100% {
    transform: scale(2.4) rotate(160deg);
    opacity: 0;
  }
}

.envelope-wrapper.opening .wax-seal-disc {
  animation: sealPopBreak 0.75s forwards ease-out !important;
}

.envelope-wrapper.opening #cover-wreath-img {
  animation: wreathBloomBurst 0.95s forwards cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Corner Botanical Branches Parting Animations on Envelope Open */
#cover-overlay.opening .botanical-corner-tl {
  transform: translate(-55px, -55px) rotate(-18deg) scale(1.15) !important;
  opacity: 0 !important;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease !important;
}

#cover-overlay.opening .botanical-corner-tr {
  transform: translate(55px, -55px) rotate(18deg) scale(1.15) !important;
  opacity: 0 !important;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease !important;
}

#cover-overlay.opening .botanical-corner-bl {
  transform: translate(-45px, 45px) rotate(-12deg) !important;
  opacity: 0 !important;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease !important;
}

#cover-overlay.opening .botanical-corner-br {
  transform: translate(45px, 45px) rotate(12deg) !important;
  opacity: 0 !important;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease !important;
}

#cover-overlay.opening .pine-horizon-container {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
}
#cover-overlay.opening .holy-doves-container {
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
}
#cover-overlay.opening .ivy-canopy-container {
  transform: translateY(-40px);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
}

/* High-Resolution PNG Leaf Burst Particles */
.envelope-leaf-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Cover Overlay Transition */
#cover-overlay {
  will-change: transform, opacity;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;
}
#cover-overlay.opened {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Tombol Buka Undangan: Langsung Fade Out di tempat tanpa animasi naik ke atas */
#open-invite-btn {
  transition: opacity 0.35s ease-out, background-color 0.3s ease, box-shadow 0.3s ease;
}
#cover-overlay.opening #open-invite-btn,
.envelope-wrapper.opening #open-invite-btn {
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease-out !important;
}

/* Toast Notification */
#toast {
  left: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
}
#toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(143, 168, 155, 0.35);
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(27, 59, 43, 0.15);
  contain: layout style;
  will-change: transform;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--color-forest);
  transform: translateY(-2px);
}

/* Lightbox Modal */
#lightbox-modal {
  transition: opacity 0.3s ease;
}
#lightbox-modal.hidden {
  display: none;
  opacity: 0;
}
#lightbox-modal.flex {
  display: flex;
  opacity: 1;
}

/* Bottom Fireflies Ambient Canvas */
.bottom-fireflies-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 30;
  contain: strict;
}


/* Authentic Embossed Wax Seal Disc & Monogram */
.wax-seal-disc {
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 32%, #9e2a40 0%, #722232 55%, #46121e 100%);
  border: 2px solid rgba(235, 205, 145, 0.85);
  box-shadow: 
    0 8px 24px rgba(114, 34, 50, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wax-seal-disc-forest {
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 32%, #2a5840 0%, #1b3b2b 60%, #0f2218 100%);
  border: 1.5px solid rgba(200, 220, 210, 0.7);
  box-shadow: 
    0 6px 18px rgba(27, 59, 43, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5);
}

/* Catholic Holy Matrimony Doves Ornament */
/* Catholic Holy Matrimony Doves Ornament (Enhanced Natural & Visual Highlight) */
.holy-doves-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.holy-doves-float {
  animation: doveSoftHover 5s ease-in-out infinite;
  /* Bayangan lembut dan natural (dikurangi agar bersih & ringan) */
  filter: drop-shadow(0 4px 10px rgba(27, 59, 43, 0.08));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease;
}

.holy-doves-float:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 6px 14px rgba(27, 59, 43, 0.12));
}

@keyframes doveSoftHover {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.018);
  }
}