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

/* ===== CSS VARIABLES ===== */
:root {
  --crimson: #8B0000;
  --crimson-light: #C41E3A;
  --gold: #D4AF37;
  --gold-light: #F5D876;
  --gold-pale: #FFF8DC;
  --ivory: #FFFDF5;
  --cream: #FDF6E3;
  --rose: #F4C2C2;
  --deep-maroon: #5C0011;
  --text-dark: #2C1810;
  --text-mid: #5A3825;
  --text-light: #8B6914;
  --white: #FFFFFF;
  --shadow: 0 8px 32px rgba(139,0,0,0.15);
  --shadow-gold: 0 4px 20px rgba(212,175,55,0.3);
  --radius: 20px;
  --radius-sm: 12px;
  --transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Playfair Display', serif;
  background: var(--ivory);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ===== PETALS ===== */
.petals-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.petal { position:absolute; top:-50px; animation: petalFall linear infinite; }
@keyframes petalFall {
  0%   { transform: translateY(0) rotate(0deg); opacity:1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity:0; }
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  display: flex; align-items:center; justify-content:space-between;
  padding: 16px 40px;
  background: transparent;
  transition: var(--transition);
}
.navbar.scrolled {
  background: rgba(92,0,17,0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
  padding: 10px 40px;
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.om-symbol { font-family:'Noto Sans Devanagari',sans-serif; font-size:28px; color:var(--gold); text-shadow: 0 0 20px var(--gold); }
.brand-text { font-family:'Cinzel Decorative',cursive; font-size:18px; color:var(--white); letter-spacing:2px; }
.nav-links { display:flex; gap:6px; list-style:none; }
.nav-link {
  color: rgba(255,255,255,0.85); text-decoration:none;
  font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600;
  padding: 8px 16px; border-radius:30px; letter-spacing:1px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color:var(--gold); background:rgba(212,175,55,0.15); }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:25px; height:2px; background:var(--white); transition:var(--transition); border-radius:2px; }

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--deep-maroon) 0%, var(--crimson) 40%, #7B2D3B 70%, #4A0010 100%);
  position: relative; overflow: hidden;
  display: flex; align-items:center; justify-content:center;
}
.hero-bg-pattern {
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 20%, rgba(212,175,55,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(212,175,55,0.06) 0%, transparent 50%);
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; text-align:center; padding:120px 20px 60px; width:100%; max-width:900px; }

/* Ganesha */
.ganesha-block { margin-bottom:30px; position:relative; display:inline-block; }
.ganesha-glow { position:absolute; inset:-30px; background:radial-gradient(circle, rgba(212,175,55,0.25) 0%, transparent 70%); border-radius:50%; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.1);opacity:1} }
.ganesha-img { width:200px; height:200px; object-fit:cover; border-radius:50%; border:4px solid var(--gold); box-shadow:0 0 40px rgba(212,175,55,0.5); position:relative; z-index:1; }
.ganesha-mantra { font-family:'Noto Sans Devanagari',sans-serif; font-size:22px; color:var(--gold-light); letter-spacing:3px; margin-top:12px; text-shadow:0 2px 10px rgba(212,175,55,0.6); }

/* Divider */
.divider-img-wrap { margin:20px auto; max-width:600px; height:120px; overflow:hidden; }
.divider-img { width:100%; height:220px; object-fit:cover; object-position:center 60%; opacity:0.75; }

/* Profile Card */
.hero-profile-card { margin-top:10px; }
.profile-photo-ring { position:relative; display:inline-block; margin-bottom:24px; }
.profile-photo-container {
  width:180px; height:180px; border-radius:50%;
  overflow:hidden; position:relative; z-index:2;
  border:5px solid var(--gold); box-shadow:0 0 40px rgba(212,175,55,0.5);
  background: linear-gradient(135deg, var(--deep-maroon), var(--crimson));
  display:flex; align-items:center; justify-content:center;
}
.profile-photo { width:100%; height:100%; object-fit:cover; display:block; }
.profile-initials { display:flex; align-items:center; justify-content:center; font-size:60px; font-weight:700; color:var(--gold); font-family:'Cinzel Decorative',cursive; }
.photo-ring { position:absolute; border-radius:50%; border:2px solid rgba(212,175,55,0.4); animation:spin linear infinite; }
.ring-1 { inset:-12px; animation-duration:8s; }
.ring-2 { inset:-24px; animation-duration:15s; animation-direction:reverse; border-style:dashed; }
.ring-3 { inset:-38px; animation-duration:20s; border-color:rgba(212,175,55,0.2); }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.hero-text {}
.hero-subtitle { font-family:'Cormorant Garamond',serif; font-size:16px; color:rgba(255,255,255,0.7); letter-spacing:3px; text-transform:uppercase; margin-bottom:8px; }
.hero-name { font-family:'Cinzel Decorative',cursive; font-size:clamp(38px,6vw,68px); color:var(--gold); text-shadow:0 4px 20px rgba(212,175,55,0.4); margin-bottom:12px; line-height:1.1; }
.hero-tagline { font-family:'Cormorant Garamond',serif; font-size:18px; color:rgba(255,255,255,0.8); font-style:italic; margin-bottom:24px; letter-spacing:1px; }

.hero-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:32px; }
.badge {
  background:rgba(212,175,55,0.15); border:1px solid rgba(212,175,55,0.5);
  color:var(--gold-light); padding:8px 20px; border-radius:30px;
  font-family:'Cormorant Garamond',serif; font-size:15px; letter-spacing:1px;
  backdrop-filter:blur(10px);
}

.cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--deep-maroon); padding:14px 36px; border-radius:50px;
  text-decoration:none; font-weight:700; font-size:16px;
  font-family:'Cinzel Decorative',cursive; letter-spacing:1px;
  box-shadow:0 8px 30px rgba(212,175,55,0.5);
  transition:var(--transition);
}
.cta-btn svg { width:20px; height:20px; }
.cta-btn:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(212,175,55,0.7); }

.scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); }
.scroll-dot { width:10px; height:10px; background:var(--gold); border-radius:50%; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }

/* ===== SECTIONS ===== */
.section { padding:80px 20px; position:relative; z-index:1; }
.section-alt { background:linear-gradient(135deg, var(--cream) 0%, #FFF0F0 100%); }
.section-inner { max-width:1100px; margin:0 auto; }
.section-header { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; }
.section-symbol { color:var(--gold); font-size:22px; }
.section-title { font-family:'Cinzel Decorative',cursive; font-size:clamp(26px,4vw,42px); color:var(--crimson); text-align:center; letter-spacing:2px; }
.section-subtitle { text-align:center; color:var(--text-mid); font-style:italic; font-size:17px; margin-bottom:50px; font-family:'Cormorant Garamond',serif; }

/* ===== DETAIL CARDS ===== */
.details-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.detail-card {
  background:var(--white); border-radius:var(--radius); padding:24px;
  display:flex; align-items:center; gap:16px;
  box-shadow:var(--shadow); border:1px solid rgba(212,175,55,0.2);
  transition:var(--transition); opacity:0; transform:translateY(20px);
}
.detail-card.animate-in { opacity:1; transform:translateY(0); }
.detail-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(139,0,0,0.15); border-color:var(--gold); }
.detail-icon { font-size:32px; width:56px; height:56px; background:linear-gradient(135deg, var(--gold-pale), #FFE8B0); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.detail-label { display:block; font-size:12px; color:var(--text-light); text-transform:uppercase; letter-spacing:2px; font-family:'Cormorant Garamond',serif; margin-bottom:4px; }
.detail-value { font-size:16px; font-weight:600; color:var(--text-dark); font-family:'Playfair Display',serif; }
.highlight-gold { color:var(--crimson) !important; }
.salary-card { grid-column:1/-1; }

/* ===== TIMELINE ===== */
.timeline { position:relative; max-width:700px; margin:0 auto 50px; }
.timeline::before { content:''; position:absolute; left:30px; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--gold), var(--crimson-light)); border-radius:3px; }
.timeline-item { position:relative; padding-left:80px; margin-bottom:36px; opacity:0; transform:translateX(-20px); transition:var(--transition); }
.timeline-item.animate-in { opacity:1; transform:translateX(0); }
.timeline-dot { position:absolute; left:18px; top:24px; width:26px; height:26px; background:linear-gradient(135deg, var(--gold), var(--crimson)); border-radius:50%; border:3px solid var(--white); box-shadow:0 0 0 3px var(--gold); z-index:1; }
.timeline-card { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border-left:4px solid var(--gold); }
.timeline-icon { font-size:28px; margin-bottom:10px; }
.timeline-title { font-family:'Cinzel Decorative',cursive; font-size:18px; color:var(--crimson); margin-bottom:6px; }
.timeline-org { color:var(--gold); font-weight:600; font-size:14px; margin-bottom:8px; letter-spacing:1px; }
.timeline-desc { color:var(--text-mid); font-size:14px; font-style:italic; }

/* Career */
.career-heading { font-family:'Cinzel Decorative',cursive; text-align:center; color:var(--crimson); font-size:24px; margin-bottom:24px; }
.career-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.career-card { background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:2px solid transparent; position:relative; transition:var(--transition); opacity:0; transform:translateY(20px); text-align:center; }
.career-card.animate-in { opacity:1; transform:translateY(0); }
.career-card.current { border-color:var(--gold); background:linear-gradient(135deg, #FFFDF5, #FFF8DC); }
.career-badge { position:absolute; top:16px; right:16px; background:var(--gold); color:var(--deep-maroon); font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:1px; }
.career-badge.prev { background:var(--crimson-light); color:var(--white); }
.career-logo { font-size:36px; margin-bottom:10px; }
.career-card h4 { font-family:'Cinzel Decorative',cursive; font-size:16px; color:var(--crimson); margin-bottom:8px; }
.career-card p { color:var(--text-mid); font-size:14px; margin-bottom:12px; font-style:italic; }
.career-salary { font-size:28px; font-weight:700; color:var(--gold); font-family:'Cinzel Decorative',cursive; }
.prev-salary { color:var(--text-mid); font-size:22px; }

/* ===== FAMILY ===== */
.family-tree { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:24px; }
.family-card {
  background:var(--white); border-radius:var(--radius); padding:28px;
  display:flex; align-items:center; gap:16px; box-shadow:var(--shadow);
  border-top:5px solid var(--gold); transition:var(--transition);
  opacity:0; transform:translateY(20px);
}
.family-card.animate-in { opacity:1; transform:translateY(0); }
.family-card:hover { transform:translateY(-5px); }
.family-father { border-top-color:var(--crimson); opacity:0.85; }
.family-icon { font-size:42px; width:70px; height:70px; background:var(--gold-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.family-relation { display:block; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--text-light); margin-bottom:4px; }
.family-card h3 { font-family:'Cinzel Decorative',cursive; font-size:15px; color:var(--crimson); margin-bottom:4px; }
.family-card p { font-size:13px; color:var(--text-mid); font-style:italic; }

/* ===== GALLERY ===== */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
.gallery-item { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; cursor:pointer; box-shadow:var(--shadow); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(92,0,17,0.8), transparent); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--transition); }
.gallery-overlay span { color:var(--gold); font-size:20px; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-placeholder { grid-column:1/-1; text-align:center; padding:80px; color:var(--text-light); font-style:italic; }
.gallery-placeholder-icon { font-size:60px; margin-bottom:16px; }
.gallery-hint { font-size:13px; margin-top:8px; opacity:0.6; }

/* ===== CONTACT ===== */
.contact-wrapper { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px; margin-bottom:50px; }
.contact-card {
  background:var(--white); border-radius:var(--radius); padding:32px; text-align:center;
  box-shadow:var(--shadow); border:1px solid rgba(212,175,55,0.2);
  transition:var(--transition); opacity:0; transform:translateY(20px);
}
.contact-card.animate-in { opacity:1; transform:translateY(0); }
.contact-card:hover { transform:translateY(-5px); border-color:var(--gold); }
.contact-icon { font-size:40px; margin-bottom:12px; }
.contact-card h3 { font-family:'Cinzel Decorative',cursive; font-size:16px; color:var(--crimson); margin-bottom:10px; }
.contact-value { color:var(--text-dark); font-size:15px; font-style:italic; text-decoration:none; display:block; }
a.contact-value:hover { color:var(--crimson); }



/* ===== FOOTER ===== */
.footer { background:linear-gradient(135deg, var(--deep-maroon), #2C0008); padding:40px 20px; text-align:center; }
.footer-ganesha { font-family:'Noto Sans Devanagari',sans-serif; font-size:24px; color:var(--gold); margin-bottom:10px; letter-spacing:3px; text-shadow:0 0 20px rgba(212,175,55,0.5); }
.footer-text { color:rgba(255,255,255,0.7); font-style:italic; font-size:14px; margin-bottom:8px; }
.footer-copy { color:rgba(255,255,255,0.4); font-size:12px; letter-spacing:1px; }

/* ===== LIGHTBOX ===== */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.93); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:var(--transition); }
.lightbox.active { opacity:1; pointer-events:all; }
.lightbox-img { max-width:90vw; max-height:88vh; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,0.8); border:3px solid var(--gold); }
.lightbox-close { position:absolute; top:20px; right:28px; background:rgba(212,175,55,0.2); border:none; color:var(--gold); font-size:28px; cursor:pointer; width:48px; height:48px; border-radius:50%; transition:var(--transition); }
.lightbox-close:hover { background:var(--gold); color:var(--deep-maroon); }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:30px; right:30px; background:linear-gradient(135deg, var(--crimson), var(--deep-maroon)); color:var(--white); padding:16px 28px; border-radius:50px; font-size:14px; box-shadow:0 8px 32px rgba(0,0,0,0.4); transform:translateY(100px); opacity:0; transition:var(--transition); z-index:9999; border-left:4px solid var(--gold); }
.toast.show { transform:translateY(0); opacity:1; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  .navbar { padding:12px 20px; }
  .nav-links { display:none; flex-direction:column; position:fixed; inset:0; top:70px; background:rgba(92,0,17,0.98); padding:40px 20px; gap:8px; backdrop-filter:blur(20px); }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }
  .career-cards { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .ganesha-img { width:150px; height:150px; }
  .hero-name { font-size:36px; }
  .section { padding:60px 16px; }
}