/* Royal Wedding Theme Stylesheet - Sandeep & Ojal */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&family=Noto+Serif+Devanagari:wght@400;500;600;700&family=Rozha+One&family=Yatra+One&display=swap');

:root {
  --royal-crimson: #7b1113;
  --royal-maroon: #54090b;
  --royal-burgundy: #3d0506;
  --royal-gold: #d4af37;
  --royal-gold-light: #f3e5ab;
  --royal-gold-dark: #aa8012;
  --royal-cream: #fcf9f2;
  --royal-parchment: #f6eedb;
  --royal-emerald: #143625;
  --royal-emerald-light: #235d40;
}

body {
  font-family: 'Cormorant Garamond', 'Noto Serif Devanagari', serif;
  background-color: var(--royal-cream);
  color: #3b2a22;
  overflow-x: hidden;
  background-image: 
    radial-gradient(#d4af3718 1px, transparent 1px),
    radial-gradient(#7b11130d 1px, #fcf9f2 1px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

.font-cinzel {
  font-family: 'Cinzel Decorative', cursive, serif;
}

.font-rozha {
  font-family: 'Rozha One', 'Noto Serif Devanagari', serif;
}

.font-yatra {
  font-family: 'Yatra One', 'Noto Serif Devanagari', cursive;
}

.font-sans-accent {
  font-family: 'Montserrat', sans-serif;
}

/* Gold Gradient Utilities */
.text-gold-gradient {
  background: linear-gradient(135deg, #f7e4a1 0%, #d4af37 40%, #aa8012 70%, #f7e4a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #eed896 0%, #d4af37 45%, #b48a19 75%, #faebbc 100%);
}

.border-gold {
  border-color: #d4af37;
}

/* Royal Ornate Borders */
.royal-border {
  border: 2px solid #d4af37;
  box-shadow: 0 0 0 4px #fcf9f2, 0 0 0 6px #aa801288, 0 10px 25px rgba(0, 0, 0, 0.15);
  position: relative;
}

.royal-border::before,
.royal-border::after {
  content: '❖';
  position: absolute;
  color: #d4af37;
  font-size: 1.1rem;
}

.royal-border::before {
  top: -12px;
  left: -8px;
}

.royal-border::after {
  bottom: -12px;
  right: -8px;
}

/* Jharokha Arch Frame */
.jharokha-frame {
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border: 3px solid #d4af37;
  box-shadow: 0 8px 30px rgba(84, 9, 11, 0.2);
  position: relative;
  overflow: hidden;
}

.jharokha-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border: 1px dashed rgba(212, 175, 55, 0.6);
  pointer-events: none;
}

/* Envelope & Card Gatefold Unfolding */
.envelope-container {
  perspective: 1500px;
}

.gatefold-door {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center left;
  transform-style: preserve-3d;
}

.gatefold-door-right {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center right;
  transform-style: preserve-3d;
}

.card-opened .gatefold-door {
  transform: rotateY(-110deg);
}

.card-opened .gatefold-door-right {
  transform: rotateY(110deg);
}

/* Floating Diya Flame Animation */
@keyframes flameFlicker {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 8px #ff9800);
  }
  50% {
    transform: scale(1.08, 0.95) rotate(1deg);
    opacity: 1;
    filter: drop-shadow(0 0 15px #ff5722);
  }
}

.flame-glow {
  animation: flameFlicker 1.8s infinite ease-in-out;
}

/* Gentle Floating Animation */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

/* Spinning Mandala */
@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-slow {
  animation: spinSlow 40s linear infinite;
}

/* Lightbox overlay styling */
#lightboxModal.active {
  display: flex !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f8f3e6;
}
::-webkit-scrollbar-thumb {
  background: #aa8012;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7b1113;
}

/* Shimmer Effect on Gold Buttons */
.gold-shimmer {
  position: relative;
  overflow: hidden;
}

.gold-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
}

.gold-shimmer:hover::before {
  left: 150%;
}