/* ==========================================================================
   STYLE.CSS — UNDANGAN PERNIKAHAN WENDILA & ANDIKA
   Versi 2 — Wine Blush × Modern Jawa (Pure Batik Kawung Theme)
   ========================================================================== */

:root {
  --wine:        #C05050;   /* primary actions, active nav, CTA button */
  --wine-deep:   #7A2828;   /* headings, dark text on light bg */
  --wine-dark:   #2D1F1F;   /* hero dark bg, footer */
  --blush:       #E8ACAC;   /* border accent, divider, hover state */
  --blush-light: #FCF0F0;   /* section bg tint, badge bg */
  --ivory:       #FDFAF5;   /* main page background */
  --ivory-warm:  #F8F2EA;   /* alternate section bg */
  --brass:       #D4A853;   /* gold accent, nav active indicator */
  --brass-light: #F0E0B0;   /* gold tint */
  --espresso:    #2D1F1F;   /* dark text */
  --text-body:   #5C3535;   /* body text on light bg */
  --text-muted:  #A07060;   /* muted/secondary text */
}

/* Base Resets & Typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", sans-serif;
  color: var(--text-body);
  background-color: var(--ivory);
  overflow-x: hidden;
}

.font-serif {
  font-family: "Playfair Display", serif;
}

.font-cormorant {
  font-family: "Cormorant Garamond", serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--blush);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wine);
}

/* ==========================================================================
   MOTIF BATIK KAWUNG NUSANTARA (ANIMATED PARALLAX PANNING)
   ========================================================================== */
@keyframes batikPan {
  0% { background-position: 0px 0px; }
  100% { background-position: 70px 70px; }
}

@keyframes batikPanReverse {
  0% { background-position: 0px 0px; }
  100% { background-position: -70px 70px; }
}

.batik-kawung {
  background-color: var(--ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23C05050' stroke-width='0.7' opacity='0.16'%3E%3Cpath d='M35 0 C45 17, 45 17, 35 35 C25 17, 25 17, 35 0 Z'/%3E%3Cpath d='M35 35 C45 53, 45 53, 35 70 C25 53, 25 53, 35 35 Z'/%3E%3Cpath d='M0 35 C17 45, 17 45, 35 35 C17 25, 17 25, 0 35 Z'/%3E%3Cpath d='M35 35 C53 45, 53 45, 70 35 C53 25, 53 25, 35 35 Z'/%3E%3Ccircle cx='35' cy='35' r='5' fill='%23D4A853' opacity='0.3'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23D4A853' opacity='0.3'/%3E%3Ccircle cx='70' cy='0' r='5' fill='%23D4A853' opacity='0.3'/%3E%3Ccircle cx='0' cy='70' r='5' fill='%23D4A853' opacity='0.3'/%3E%3Ccircle cx='70' cy='70' r='5' fill='%23D4A853' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: batikPan 38s linear infinite;
}

.batik-kawung-warm {
  background-color: var(--ivory-warm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%237A2828' stroke-width='0.7' opacity='0.15'%3E%3Cpath d='M35 0 C45 17, 45 17, 35 35 C25 17, 25 17, 35 0 Z'/%3E%3Cpath d='M35 35 C45 53, 45 53, 35 70 C25 53, 25 53, 35 35 Z'/%3E%3Cpath d='M0 35 C17 45, 17 45, 35 35 C17 25, 17 25, 0 35 Z'/%3E%3Cpath d='M35 35 C53 45, 53 45, 70 35 C53 25, 53 25, 35 35 Z'/%3E%3Ccircle cx='35' cy='35' r='5' fill='%23C05050' opacity='0.25'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23C05050' opacity='0.25'/%3E%3Ccircle cx='70' cy='0' r='5' fill='%23C05050' opacity='0.25'/%3E%3Ccircle cx='0' cy='70' r='5' fill='%23C05050' opacity='0.25'/%3E%3Ccircle cx='70' cy='70' r='5' fill='%23C05050' opacity='0.25'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: batikPanReverse 42s linear infinite;
}

.batik-kawung-dark {
  background-color: var(--wine-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23D4A853' stroke-width='0.6' opacity='0.18'%3E%3Cpath d='M35 0 C45 17, 45 17, 35 35 C25 17, 25 17, 35 0 Z'/%3E%3Cpath d='M35 35 C45 53, 45 53, 35 70 C25 53, 25 53, 35 35 Z'/%3E%3Cpath d='M0 35 C17 45, 17 45, 35 35 C17 25, 17 25, 0 35 Z'/%3E%3Cpath d='M35 35 C53 45, 53 45, 70 35 C53 25, 53 25, 35 35 Z'/%3E%3Ccircle cx='35' cy='35' r='4' fill='%23E8ACAC' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: batikPan 35s linear infinite;
}

/* ==========================================================================
   COVER SECTION TRANSITION (SLIDE UP CURTAIN)
   ========================================================================== */
#cover-section {
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.9s ease;
}

.cover-opened {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   ORNAMENTS & DIVIDERS
   ========================================================================== */
.ornament-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  flex-grow: 1;
}

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 320px;
  margin: 0 auto;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(253, 250, 245, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 172, 172, 0.5);
}

.glass-dark {
  background: rgba(45, 31, 31, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 168, 83, 0.45);
}

/* Floating Petals in Cover */
@keyframes floatPetal {
  0% {
    transform: translateY(-20px) rotate(0deg) translateX(0);
    opacity: 0;
  }
  15% { opacity: 0.6; }
  85% { opacity: 0.6; }
  100% {
    transform: translateY(105vh) rotate(720deg) translateX(40px);
    opacity: 0;
  }
}

.petal {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 9px;
  border-radius: 50% 0 50% 0;
  background: var(--blush);
  pointer-events: none;
  z-index: 1;
  animation: floatPetal linear infinite;
}

/* Bottom Nav Active State */
#bottom-nav a.active {
  color: var(--wine);
}

#bottom-nav a.active .nav-icon-wrapper {
  background-color: var(--blush-light);
  color: var(--wine-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(192, 80, 80, 0.18);
  border: 1px solid var(--blush);
}

/* Toast Notification */
#toast {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}