/* ==========================================================
   HINDU TEMPLE WEDDING THEME STYLESHEET
   चि. संदीप संग आयु. कु. ओजल — पावन कल्याणोत्सव आमंत्रण
   ========================================================== */

@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;800&family=Rozha+One&family=Yatra+One&display=swap');

:root {
  --temple-red: #781013;
  --temple-crimson: #630a0c;
  --temple-dark-maroon: #3d0506;
  --temple-deep-brown: #24110b;
  --temple-gold: #d4af37;
  --temple-gold-light: #fef1bc;
  --temple-gold-dark: #996e00;
  --temple-brass: #c59b27;
  --temple-chandan: #fdfaf2;
  --temple-parchment: #f7eed8;
  --temple-saffron: #d9531e;
  --temple-marigold: #f59e0b;
  --temple-marigold-deep: #ea580c;
  --temple-green: #185227;
  --temple-copper: #ab461c;
  --sandstone-pink: #e8a5a5;
  --sandstone-pink-dark: #b85f5f;
  --sandstone-rose: #d66878;
  --lake-azure: #4a8cb5;
  --lake-azure-light: #e3f2fd;
}

body {
  font-family: 'Noto Serif Devanagari', 'Cormorant Garamond', serif;
  background-color: var(--temple-chandan);
  color: #38241b;
  overflow-x: hidden;
  /* Authentic temple courtyard stone & sacred mandala motif subtle pattern */
  background-image: 
    radial-gradient(#d4af3722 1.2px, transparent 1.2px),
    radial-gradient(#78101314 1.2px, #fdfaf2 1.2px);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
}

/* Typography Classes */
.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;
}

/* ==========================================================
   TEMPLE GOLD & METALLIC GRADIENTS
   ========================================================== */
.text-gold-gradient {
  background: linear-gradient(135deg, #fff2be 0%, #d4af37 35%, #aa7c11 70%, #fff2be 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-temple-red {
  color: var(--temple-red);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #fceda7 0%, #d4af37 40%, #b38415 75%, #faebbc 100%);
}

.bg-temple-red-gradient {
  background: linear-gradient(135deg, #8b1317 0%, #680b0e 50%, #460507 100%);
}

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

/* ==========================================================
   TEMPLE SANCTUM ARCH & NICHE FRAMES
   ========================================================== */
.temple-niche-frame {
  border-top-left-radius: 50% 32%;
  border-top-right-radius: 50% 32%;
  border: 3.5px solid #d4af37;
  box-shadow: 0 10px 35px rgba(61, 5, 6, 0.25), inset 0 0 15px rgba(212, 175, 55, 0.2);
  position: relative;
  overflow: hidden;
  background: #fbf5e6;
}

.temple-niche-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  background: linear-gradient(to bottom, rgba(212, 175, 55, 0.3), transparent);
  pointer-events: none;
  z-index: 2;
}

.temple-niche-frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-top-left-radius: 50% 32%;
  border-top-right-radius: 50% 32%;
  border: 1.5px dashed rgba(212, 175, 55, 0.65);
  pointer-events: none;
  z-index: 2;
}

/* Temple Pillars Styling */
.temple-pillar-card {
  position: relative;
  border: 2px solid #d4af37;
  box-shadow: 0 8px 30px rgba(72, 11, 14, 0.12);
}

.temple-pillar-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: #d4af37;
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(170, 124, 17, 0.6);
}

.temple-pillar-card::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #d4af37;
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(170, 124, 17, 0.6);
}

/* ==========================================================
   TEMPLE SANCTUM DOORS / GATEFOLD (कपाट उद्‍घाटन)
   ========================================================== */
.temple-gates-wrapper {
  perspective: 1600px;
}

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

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

.temple-doors-opened .temple-door-left {
  transform: rotateY(-115deg);
}

.temple-doors-opened .temple-door-right {
  transform: rotateY(115deg);
}

/* Temple Brass Stud on Wooden Door */
.brass-stud {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2b0, #d4af37 60%, #6d4b00 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  border: 1px solid #5a3e00;
  display: inline-block;
}

.brass-knocker-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 6px solid #d4af37;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.4);
  position: relative;
  background: radial-gradient(circle, #523700 0%, #2b1c00 100%);
}

.brass-knocker-ring::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  background: #f7e089;
  border: 2px solid #6b4c00;
  border-radius: 3px;
}

/* ==========================================================
   HANGING TEMPLE BELLS & SWING ANIMATION
   ========================================================== */
@keyframes bellSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(7deg);
  }
  40% {
    transform: rotate(-6deg);
  }
  60% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
}

.bell-swing {
  transform-origin: top center;
  animation: bellSwing 4.5s ease-in-out infinite;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s;
}

.bell-swing:hover {
  animation: bellSwing 1s ease-in-out infinite;
}

.bell-ringing-active {
  animation: bellSwing 0.8s ease-in-out 3 !important;
}

/* ==========================================================
   SACRED DIYA FLAME & HAVAN KUND FIRE GLOW
   ========================================================== */
@keyframes flameFlicker {
  0%, 100% {
    transform: scale(1) rotate(-0.5deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 10px #ff9800) drop-shadow(0 0 22px #e65100);
  }
  50% {
    transform: scale(1.08, 0.94) rotate(0.8deg);
    opacity: 1;
    filter: drop-shadow(0 0 16px #ffb300) drop-shadow(0 0 30px #ff3d00);
  }
}

.flame-glow {
  animation: flameFlicker 1.6s infinite ease-in-out;
  transform-origin: bottom center;
}

@keyframes agniFirePulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 119, 0, 0.8)) drop-shadow(0 0 45px rgba(230, 81, 0, 0.45));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 32px rgba(255, 171, 0, 0.95)) drop-shadow(0 0 65px rgba(255, 61, 0, 0.6));
    transform: scale(1.02);
  }
}

.sacred-fire-glow {
  animation: agniFirePulse 2.2s infinite ease-in-out;
}

/* ==========================================================
   PUSHPA-VRISHTI (FALLING MARIGOLD & ROSE PETALS)
   ========================================================== */
.petal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 35;
}

.falling-petal {
  position: absolute;
  top: -30px;
  border-radius: 50% 0 50% 50%;
  opacity: 0.85;
  animation: petalFall linear infinite;
  pointer-events: none;
}

@keyframes petalFall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(40px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(105vh) rotate(360deg) translateX(-30px);
    opacity: 0;
  }
}

/* ==========================================================
   GENTLE FLOATING & SPINNING MANDALA
   ========================================================== */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

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

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

/* ==========================================================
   TEMPLE SHIMMER BUTTONS & SCROLLBAR
   ========================================================== */
.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.45), transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
}

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

/* Custom Temple Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #fbf5e6;
}
::-webkit-scrollbar-thumb {
  background: #c59b27;
  border-radius: 5px;
  border: 1px solid #781013;
}
::-webkit-scrollbar-thumb:hover {
  background: #781013;
}

/* Temple Toran Banner Decoration */
.toran-banner {
  background-image: url('../images/motifs/toran.svg');
  background-repeat: repeat-x;
  background-size: 400px 60px;
  height: 60px;
  width: 100%;
}

/* ==========================================================
   HIMALAYAN TEMPLE & SHIV-PARVATI VISUAL STYLES
   ========================================================== */
.mountain-backdrop {
  background-image: url('../images/temple/Snow_mountains3.webp');
  background-size: cover;
  background-position: center;
  position: relative;
}

.mountain-backdrop-overlay {
  background: linear-gradient(135deg, rgba(61, 5, 6, 0.88), rgba(120, 16, 19, 0.82));
}

@keyframes cloudDrift {
  0% {
    transform: translateX(-4%) scale(1);
  }
  50% {
    transform: translateX(4%) scale(1.02);
  }
  100% {
    transform: translateX(-4%) scale(1);
  }
}

.cloud-drifting {
  animation: cloudDrift 30s ease-in-out infinite;
}

.dress-code-badge {
  background: linear-gradient(135deg, #fef5d6 0%, #fae6b2 100%);
  border: 1px solid #d4af37;
  color: #52151d;
}

.wish-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 15px rgba(61, 5, 6, 0.06);
}

.wish-card:hover {
  border-color: #d4af37;
  box-shadow: 0 6px 20px rgba(61, 5, 6, 0.12);
}

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

/* ==========================================================
   Continuous Vibration & Flashing for "निमंत्रण पत्र खोलें" (after 10s inactivity)
   ========================================================== */
@keyframes attentionVibrateFlash {
  0% {
    transform: scale(1) translate(0, 0);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.95), 0 0 15px rgba(255, 215, 0, 0.7);
    filter: brightness(1);
  }
  5%, 25%, 45%, 65%, 85% {
    transform: scale(1.08) translate(-4px, -2px) rotate(-1.5deg);
  }
  15%, 35%, 55%, 75%, 95% {
    transform: scale(1.08) translate(4px, 2px) rotate(1.5deg);
  }
  50% {
    transform: scale(1.12) translate(0, 0);
    box-shadow: 0 0 0 20px rgba(212, 175, 55, 0), 0 0 40px 12px rgba(255, 215, 0, 1), 0 0 60px rgba(123, 17, 19, 0.9);
    filter: brightness(1.35) contrast(1.15);
  }
  100% {
    transform: scale(1) translate(0, 0);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 0 15px rgba(255, 215, 0, 0.7);
    filter: brightness(1);
  }
}

@keyframes flashBackgroundPulse {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }
  50% {
    background-color: rgba(212, 175, 55, 0.22);
    box-shadow: 0 0 35px 10px rgba(212, 175, 55, 0.4);
  }
}

.attention-vibrate-btn {
  animation: attentionVibrateFlash 0.9s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
  border-color: #ffffff !important;
  outline: 3px solid #d4af37 !important;
  outline-offset: 4px;
}

.attention-card-flash {
  animation: flashBackgroundPulse 0.9s infinite ease-in-out !important;
}