/* ===== SHARED STYLES — Sai Babu ♥ Leela Madhuri Wedding ===== */
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  font-family:'Cormorant Garamond',serif;
  background:#1a0e0a;color:#3a2020;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#1a0e0a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b8942e,#d4a83e);border-radius:3px}
img{max-width:100%;display:block}

@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes pulseGlow{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes diyaFlicker{0%,100%{opacity:0.8}25%{opacity:1}50%{opacity:0.7}75%{opacity:0.9}}
@keyframes petalFall{0%{transform:translateY(-10vh) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

.bg-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;
  background:radial-gradient(ellipse at 20% 20%,rgba(184,148,46,0.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(74,16,16,0.04) 0%,transparent 50%);
  pointer-events:none;
}

/* Navbar */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:14px 24px;display:flex;align-items:center;justify-content:space-between;
  transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.navbar.scrolled{background:rgba(26,14,10,0.92);backdrop-filter:blur(16px);padding:8px 20px}
.navbar.scrolled .nav-logo{font-size:22px}
.nav-logo{font-family:'Allura',cursive;font-size:28px;color:#faf6ee;text-decoration:none;display:flex;align-items:center;gap:6px;transition:all 0.3s}
.nav-logo span{color:#b8942e}
.nav-toggle{display:none;background:none;border:none;color:#faf6ee;font-size:28px;cursor:pointer;padding:4px;z-index:100}
.nav-links{display:flex;gap:18px;list-style:none;flex-wrap:wrap;align-items:center}
.nav-links a{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(250,246,238,0.8);text-decoration:none;transition:all 0.3s;
  position:relative;padding:4px 0;font-weight:400;
}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,#b8942e,#d4a83e);transition:width 0.3s}
.nav-links a:hover{color:#b8942e}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:#b8942e}
.nav-links a.active::after{width:100%}
.nav-close{display:none}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(26,14,10,0.98);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;align-items:center;
    gap:24px;padding:40px;z-index:99;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:14px;letter-spacing:3px;color:rgba(250,246,238,0.7)}
  .nav-close{display:block;position:absolute;top:20px;right:24px;font-size:36px;color:#b8942e;background:none;border:none;cursor:pointer}
}

/* Page layout */
.page-hero{min-height:100vh;padding:70px 20px 40px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.section-inner{max-width:1000px;margin:0 auto;position:relative;z-index:2;width:100%}

/* Common sections */
.section-badge{
  display:inline-block;font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:#b8942e;padding:6px 18px;border:1px solid rgba(184,148,46,0.2);
  border-radius:20px;margin-bottom:12px;
}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,5vw,40px);font-weight:700;color:#4a1010;
  text-align:center;margin-bottom:8px;line-height:1.2;
}
.section-desc{text-align:center;color:#7a5a2e;font-style:italic;font-size:17px;margin-bottom:4px}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px auto 28px}
.divider-line{width:50px;height:1px;background:linear-gradient(90deg,transparent,#b8942e,transparent)}
.divider-diamond{width:8px;height:8px;background:#b8942e;transform:rotate(45deg)}
.reveal{opacity:0;transform:translateY(35px);transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.12s}
.reveal-delay-2{transition-delay:0.24s}
.reveal-delay-3{transition-delay:0.36s}
.reveal-delay-4{transition-delay:0.48s}

/* Page title bar */
.page-title{
  background:linear-gradient(135deg,#4a1010,#6b1a1a);
  padding:90px 20px 30px;text-align:center;position:relative;
}
.page-title::after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:3px;background:linear-gradient(90deg,transparent,#b8942e,#e8d48b,#b8942e,transparent)}
.page-title h1{font-family:'Playfair Display',serif;font-size:clamp(24px,4vw,38px);color:#faf6ee;font-weight:700;letter-spacing:2px}
.page-title .sub{font-size:13px;color:#b8942e;letter-spacing:3px;text-transform:uppercase;margin-top:4px}

.page-body{background:linear-gradient(180deg,#faf6ee,#f5ede0);padding:50px 20px 60px;min-height:60vh}
.page-body.light{background:linear-gradient(180deg,#f5ede0,#faf6ee)}

/* Buttons */
.btn-primary{
  display:inline-block;padding:10px 28px;border:none;border-radius:8px;
  background:linear-gradient(135deg,#4a1010,#6b1a1a);
  color:#faf6ee;font-family:'Playfair Display',serif;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:all 0.3s;letter-spacing:2px;text-decoration:none;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(74,16,16,0.2)}

/* Footer */
footer{background:#1a0e0a;text-align:center;padding:40px 20px 80px;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:10%;right:10%;height:3px;background:linear-gradient(90deg,transparent,#b8942e,#e8d48b,#b8942e,transparent)}
.footer-gold{color:#b8942e;font-family:'Allura',cursive;font-size:20px}
.footer-text{color:rgba(250,246,238,0.5);font-size:13px;margin-top:4px;letter-spacing:1px}
.footer-text a{color:#b8942e;text-decoration:none}
.footer-text a:hover{text-decoration:underline}

/* Float buttons */
.music-btn{
  position:fixed;bottom:80px;right:20px;z-index:9997;
  width:44px;height:44px;border-radius:50%;
  background:rgba(26,14,10,0.7);backdrop-filter:blur(8px);
  border:1px solid rgba(184,148,46,0.2);color:#b8942e;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.3s;font-size:20px;
}
.music-btn:hover{background:rgba(74,16,16,0.8);border-color:#b8942e}
.music-btn.paused{opacity:0.6}

.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:9997;
  display:flex;align-items:center;gap:8px;
  background:#25d366;color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:50px;
  font-size:14px;font-weight:600;letter-spacing:0.3px;
  box-shadow:0 4px 20px rgba(37,211,102,0.35);
  transition:all 0.3s;font-family:'Cormorant Garamond',serif;
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(37,211,102,0.5);background:#20bd5a}
.wa-float svg{width:20px;height:20px;flex-shrink:0}
.wa-float .wa-label{display:inline}

/* Petals */
.petals-container{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9998;overflow:hidden}
.petal{
  position:absolute;top:-30px;width:16px;height:16px;
  background:radial-gradient(ellipse,#ffd6d6,#e8a0a0);
  border-radius:50% 0 50% 0;opacity:0.5;
  animation:petalFall linear infinite;
}

@media(max-width:480px){
  .wa-float{bottom:16px;right:16px;padding:9px 14px;font-size:13px}
  .wa-float .wa-label{display:none}
  .music-btn{bottom:76px;right:16px;width:40px;height:40px;font-size:18px}
}
@media(max-width:768px){
  .page-body{padding:40px 16px}
}
</style>