/* ============================================
   NYARBUDA CHARITABLE TRUST - Premium Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
  --maroon: #800020;
  --maroon-dark: #5c0018;
  --maroon-light: #a0002e;
  --saffron: #FF6600;
  --saffron-light: #FF8C33;
  --gold: #D4A017;
  --gold-light: #F0C75E;
  --cream: #FFF8E7;
  --cream-dark: #F5EDD6;
  --white: #FFFFFF;
  --text-dark: #2D1810;
  --text-body: #4A3228;
  --text-muted: #7A6458;
  --shadow-sm: 0 2px 8px rgba(128, 0, 32, 0.08);
  --shadow-md: 0 4px 20px rgba(128, 0, 32, 0.12);
  --shadow-lg: 0 8px 40px rgba(128, 0, 32, 0.16);
  --shadow-gold: 0 4px 20px rgba(212, 160, 23, 0.25);
  --gradient-maroon: linear-gradient(135deg, #800020, #5c0018);
  --gradient-saffron: linear-gradient(135deg, #FF6600, #FF8C33);
  --gradient-gold: linear-gradient(135deg, #D4A017, #F0C75E);
  --gradient-divine: linear-gradient(135deg, #800020 0%, #a0002e 50%, #FF6600 100%);
  --font-display: 'Cormorant Garamond', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --font-sanskrit: 'Tiro Devanagari Sanskrit', serif;
  --border-radius: 12px;
  --border-radius-lg: 20px;
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Height of the fixed navbar. This is a sensible default; main.js measures
   the real navbar height on load/resize and updates this value so the
   content offset below always matches the header at every screen size. */
:root { --nav-h: 74px; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background-color: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Reserve space for the fixed navbar so no page content (heading, hero
     or section) is ever hidden behind the header. Tied to --nav-h so it
     adjusts automatically when the header height changes responsively. */
  padding-top: var(--nav-h);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--maroon);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

p { margin-bottom: 1rem; }

a {
  color: var(--maroon);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--saffron); }

/* --- Temple Pattern Background --- */
.temple-pattern {
  position: relative;
}
.temple-pattern::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(212, 160, 23, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(128, 0, 32, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* --- Decorative Om / Lotus SVG Pattern --- */
.mandala-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23800020' fill-opacity='0.03'%3E%3Cpath d='M30 30m-20 0a20 20 0 1 0 40 0a20 20 0 1 0-40 0' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* --- Section Styles --- */
.section-padding { padding: 100px 0; }
.section-padding-sm { padding: 60px 0; }

.section-title {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
.section-title h2 {
  display: inline-block;
  position: relative;
  padding-bottom: 15px;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 3px;
  background: var(--gradient-gold);
  border-radius: 2px;
}
.section-title .subtitle {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.1rem;
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 1px;
}

/* --- Decorative Divider --- */
.divider-ornate {
  text-align: center;
  margin: 40px 0;
  position: relative;
}
.divider-ornate::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-ornate span {
  position: relative;
  background: var(--cream);
  padding: 0 20px;
  color: var(--gold);
  font-size: 1.5rem;
}

/* --- Navbar --- */
.navbar-trust {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 160, 23, 0.2);
  padding: 10px 0;
  transition: var(--transition);
  z-index: 1050;
}
.navbar-trust.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-md);
  padding: 5px 0;
}
.navbar-trust .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.navbar-trust .navbar-brand img {
  height: 50px;
  width: auto;
  transition: var(--transition);
}
.navbar-trust.scrolled .navbar-brand img {
  height: 40px;
}
.navbar-trust .brand-text {
  font-family: var(--font-heading);
  color: var(--maroon);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.navbar-trust .brand-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.navbar-trust .nav-link {
  font-family: var(--font-body);
  color: var(--text-dark) !important;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 10px !important;
  position: relative;
  letter-spacing: 0.3px;
  transition: var(--transition);
  white-space: nowrap;
}
.navbar-trust .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--gradient-gold);
  transition: var(--transition);
  border-radius: 1px;
}
.navbar-trust .nav-link:hover::after,
.navbar-trust .nav-link.active::after {
  width: 60%;
}
.navbar-trust .nav-link:hover,
.navbar-trust .nav-link.active {
  color: var(--maroon) !important;
}

/* --- Navbar Programs Dropdown --- */
.navbar-trust .nav-dropdown {
  position: relative;
}

/* Hide Books nav item (hidden until ready to launch) */
.navbar-trust .nav-books-item {
  display: none !important;
}
.navbar-trust .nav-dropdown > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.navbar-trust .nav-dropdown > .nav-link .fa-chevron-down {
  font-size: 0.55rem;
  transition: transform 0.3s ease;
  margin-left: 2px;
}
.navbar-trust .nav-dropdown:hover > .nav-link .fa-chevron-down {
  transform: rotate(180deg);
}
.navbar-trust .nav-dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--white);
  border: 1px solid rgba(212, 160, 23, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(128, 0, 32, 0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1060;
}
.navbar-trust .nav-dropdown:hover > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.navbar-trust .nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--white);
  border-top: 1px solid rgba(212, 160, 23, 0.2);
  border-left: 1px solid rgba(212, 160, 23, 0.2);
}
.navbar-trust .nav-dropdown-menu .nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-dark);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.navbar-trust .nav-dropdown-menu .nav-dropdown-item i {
  color: var(--gold);
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.navbar-trust .nav-dropdown-menu .nav-dropdown-item:hover {
  background: linear-gradient(135deg, rgba(128, 0, 32, 0.06), rgba(212, 160, 23, 0.06));
  color: var(--maroon);
  padding-left: 18px;
}
.navbar-trust .nav-dropdown-menu .nav-dropdown-item.active {
  background: linear-gradient(135deg, rgba(128, 0, 32, 0.08), rgba(212, 160, 23, 0.08));
  color: var(--maroon);
}
.navbar-trust .nav-dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.2), transparent);
  margin: 4px 8px;
}

/* Hamburger custom */
.navbar-trust .navbar-toggler {
  border: none;
  padding: 4px 8px;
  box-shadow: none !important;
}
.navbar-trust .navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 28px; height: 20px;
  display: inline-block;
}
.navbar-trust .navbar-toggler-icon::before,
.navbar-trust .navbar-toggler-icon::after,
.navbar-trust .navbar-toggler-icon span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: var(--transition);
}
.navbar-trust .navbar-toggler-icon::before { top: 0; }
.navbar-trust .navbar-toggler-icon span { top: 9px; }
.navbar-trust .navbar-toggler-icon::after { top: 18px; }

/* --- Deeksha Name Banner (below navbar) --- */
.deeksha-banner {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  padding: 8px 0;
  border-bottom: 2px solid rgba(212, 160, 23, 0.3);
  position: relative;
  z-index: 1049;
  overflow: hidden;
  white-space: nowrap;
}
.deeksha-banner-track {
  display: inline-flex;
  animation: deekshaScroll 22s linear infinite;
  will-change: transform;
}
.deeksha-banner-track span {
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.6vw, 1rem);
  letter-spacing: 0.5px;
  line-height: 1.4;
  padding: 0 4rem;
  display: inline-block;
}
@keyframes deekshaScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Hero Section --- */
.hero-section {
  /* Fill the viewport *below* the fixed navbar + deeksha banner (body already offsets by
     --nav-h), so the hero never sits under the header. */
  min-height: calc(100vh - var(--nav-h) - 40px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(128, 0, 32, 0.03) 0%, rgba(255, 248, 231, 1) 40%, rgba(255, 248, 231, 1) 60%, rgba(212, 160, 23, 0.05) 100%);
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.08) 0%, transparent 70%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 0, 32, 0.05) 0%, transparent 70%);
  animation: heroGlow 10s ease-in-out infinite alternate-reverse;
}
@keyframes heroGlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.2) translate(20px, -20px); opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content .hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(128, 0, 32, 0.1), rgba(212, 160, 23, 0.1));
  border: 1px solid rgba(212, 160, 23, 0.3);
  padding: 8px 24px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--maroon);
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.hero-content h1 {
  font-family: var(--font-heading);
  color: var(--maroon);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.hero-content h1 .gold-text {
  color: var(--gold);
  display: block;
}
.hero-content .hero-description {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.8;
  max-width: 600px;
}
.hero-image-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-image-wrapper .hero-img-frame {
  position: relative;
  display: inline-block;
  padding: 8px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, var(--gold), var(--saffron), var(--gold));
  box-shadow: var(--shadow-lg), 0 0 60px rgba(212, 160, 23, 0.15);
}
.hero-image-wrapper .hero-img-frame img {
  width: 100%;
  max-width: 420px;
  border-radius: calc(var(--border-radius-lg) - 4px);
  display: block;
}
.hero-image-wrapper .glow-ring {
  position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  border-radius: 30px;
  border: 2px solid rgba(212, 160, 23, 0.2);
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* --- Home Page Featured Media (Parts 8 & 9) --- */
.hero-media { text-align: center; }
.hero-media .hero-img-frame img {
  max-width: 460px;
  width: 100%;
  object-fit: contain;
}

/* --- Adaptive Featured Photos (Phase 4: 1 / 2 / 3 photos) --- */
.hero-photos { display: grid; gap: 16px; justify-items: center; }
.hero-photos .hero-photo { margin: 0; width: 100%; }
.hero-photos .hero-photo .hero-img-frame {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-photos .hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius-lg);
}
.hero-photos .hero-photo-cap {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

/* 1 photo: one large framed image, keeps the glow ring */
.hero-photos[data-count="1"] { grid-template-columns: 1fr; }
.hero-photos[data-count="1"] .hero-photo { max-width: 460px; }

/* 2 photos: stacked vertically, larger */
.hero-photos[data-count="2"] { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 24px; }
.hero-photos[data-count="2"] .hero-photo { max-width: 100%; }
.hero-photos[data-count="2"] .hero-photo img { aspect-ratio: auto; height: auto; }

/* 3 photos: all three stacked vertically, equal size, original aspect ratio */
.hero-photos[data-count="3"] {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
  gap: 24px;
}
.hero-photos[data-count="3"] .hero-photo { max-width: 100%; }
.hero-photos[data-count="3"] .hero-photo img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* The glow ring only decorates the primary (first) photo */
.hero-photos .hero-photo .glow-ring {
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border-radius: calc(var(--border-radius-lg) + 6px);
  border: 2px solid rgba(212, 160, 23, 0.25);
  pointer-events: none;
  animation: glowPulse 3s ease-in-out infinite;
}

@media (max-width: 575.98px) {
  /* Stack everything on very small screens for readability */
  .hero-photos[data-count="2"],
  .hero-photos[data-count="3"] { grid-template-columns: 1fr; max-width: 100%; }
}

.hero-video-block { margin-top: 30px; }
.hero-video-title {
  font-family: var(--font-display);
  color: var(--maroon);
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.hero-video-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.hero-video-frame {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.hero-video-frame video,
.hero-video-frame iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--border-radius-lg);
}

/* Text-only founder card (photo removed by request) */
.founder-card-text { display: flex; flex-direction: column; align-items: center; }
.founder-card .founder-emblem {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  box-shadow: 0 6px 22px rgba(128, 0, 32, 0.28);
}

/* --- Buttons --- */
.btn-trust {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 32px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-maroon {
  background: var(--gradient-maroon);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(128, 0, 32, 0.3);
}
.btn-maroon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(128, 0, 32, 0.4);
  color: var(--white);
}
.btn-gold {
  background: var(--gradient-gold);
  color: var(--maroon-dark);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(212, 160, 23, 0.4);
  color: var(--maroon-dark);
}
.btn-outline-trust {
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--maroon);
}
.btn-outline-trust:hover {
  background: var(--maroon);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-saffron {
  background: var(--gradient-saffron);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}
.btn-saffron:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 102, 0, 0.4);
  color: var(--white);
}

/* --- Premium Cards --- */
.card-premium {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 40px 30px;
  border: 1px solid rgba(212, 160, 23, 0.15);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.card-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transition: var(--transition);
}
.card-premium:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(212, 160, 23, 0.3);
}
.card-premium:hover::before {
  transform: scaleX(1);
}
.card-premium .card-icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
  background: linear-gradient(135deg, rgba(128, 0, 32, 0.08), rgba(212, 160, 23, 0.08));
  color: var(--maroon);
  transition: var(--transition);
}
.card-premium:hover .card-icon {
  background: var(--gradient-maroon);
  color: var(--white);
  transform: scale(1.1);
}
.card-premium h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.card-premium p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* --- Glassmorphism Card --- */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  transition: var(--transition);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-md);
}

/* --- Program Cards --- */
.program-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(212, 160, 23, 0.12);
  transition: var(--transition);
  height: 100%;
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.program-card .program-img {
  height: 220px;
  background: linear-gradient(135deg, rgba(128, 0, 32, 0.1), rgba(212, 160, 23, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.program-card .program-img i {
  font-size: 3rem;
  color: var(--gold);
  transition: var(--transition);
}
.program-card:hover .program-img i {
  transform: scale(1.2);
  color: var(--maroon);
}
.program-card .program-body {
  padding: 25px;
}
.program-card .program-body h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.program-card .program-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 15px;
}

/* --- Gallery --- */
.gallery-filters .filter-btn {
  background: transparent;
  border: 2px solid rgba(128, 0, 32, 0.15);
  color: var(--text-body);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin: 4px;
}
.gallery-filters .filter-btn:hover,
.gallery-filters .filter-btn.active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--white);
}
.gallery-item {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
  transition: var(--transition);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item .gallery-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, rgba(128,0,32,0.08), rgba(212,160,23,0.08));
}
.gallery-item .gallery-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(128, 0, 32, 0.8), transparent);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
}
.gallery-overlay i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 2rem;
  opacity: 0;
  transition: var(--transition);
}
.gallery-item:hover .gallery-overlay i { opacity: 1; }

/* --- Gallery Event Cards (dynamic / CMS-driven) --- */
.gallery-event-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(212, 160, 23, 0.14);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.gallery-event-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212, 160, 23, 0.4);
}
.gallery-event-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.gallery-event-cover {
  margin-bottom: 0;
  border-radius: 0;
}
.gallery-event-cover .category-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(128, 0, 32, 0.9);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gallery-event-body {
  padding: 18px 20px 22px;
}
.gallery-event-body h4 {
  font-family: var(--font-display);
  color: var(--maroon);
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.gallery-event-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.gallery-event-counts {
  font-size: 0.85rem;
  color: var(--text-body);
  font-weight: 600;
}

/* Detail view sub-headings + video tiles */
.detail-subhead {
  font-family: var(--font-display);
  color: var(--maroon);
  border-bottom: 2px solid rgba(212, 160, 23, 0.25);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.video-frame {
  position: relative;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(128,0,32,0.9), rgba(92,0,24,0.95));
}
.video-frame .gallery-img { height: 260px; }
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(212, 160, 23, 0.92);
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  z-index: 3;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  transition: var(--transition);
  pointer-events: none;
}
.video-frame:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--gold);
}
.video-embed {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* --- Lightbox --- */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: var(--border-radius);
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 30px;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  transition: var(--transition);
  background: none;
  border: none;
  z-index: 10000;
}
.lightbox-close:hover { color: var(--gold); transform: rotate(90deg); }

/* --- Contact Cards --- */
.contact-info-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(212, 160, 23, 0.12);
  transition: var(--transition);
  height: 100%;
}
.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.contact-info-card .contact-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(128,0,32,0.08), rgba(212,160,23,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.4rem;
  color: var(--maroon);
  transition: var(--transition);
}
.contact-info-card:hover .contact-icon {
  background: var(--gradient-maroon);
  color: var(--white);
}
.contact-info-card h5 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.contact-info-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* --- Contact Form --- */
.contact-form .form-control {
  border: 1px solid rgba(128, 0, 32, 0.12);
  border-radius: var(--border-radius);
  padding: 14px 18px;
  font-size: 0.95rem;
  background: var(--white);
  transition: var(--transition);
}
.contact-form .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

/* --- Map Placeholder --- */
.map-placeholder {
  width: 100%;
  height: 350px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 2px solid rgba(212, 160, 23, 0.2);
  background: linear-gradient(135deg, rgba(128,0,32,0.05), rgba(212,160,23,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder i { font-size: 3rem; color: var(--gold); margin-bottom: 10px; }

/* --- Footer --- */
.footer-trust {
  background: var(--gradient-maroon);
  color: rgba(255, 255, 255, 0.85);
  padding: 80px 0 0;
  position: relative;
}
.footer-trust::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-gold);
}
.footer-trust h5 {
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.footer-trust p, .footer-trust a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}
.footer-trust a:hover { color: var(--gold-light); }
.footer-trust .footer-links { list-style: none; padding: 0; }
.footer-trust .footer-links li { margin-bottom: 10px; }
.footer-trust .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.footer-trust .footer-links a:hover { padding-left: 5px; }
.footer-trust .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  margin-right: 8px;
  transition: var(--transition);
}
.footer-trust .social-icons a:hover {
  background: var(--gold);
  color: var(--maroon-dark);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  margin-top: 40px;
  text-align: center;
}
.footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-maroon);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* --- Page Header (Inner Pages) --- */
.page-header {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  /* body already clears the fixed navbar via padding-top: var(--nav-h),
     so this only needs normal internal spacing. */
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4A017' fill-opacity='0.06'%3E%3Cpath d='M40 40m-30 0a30 30 0 1 0 60 0a30 30 0 1 0-60 0' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}
.page-header h1 {
  color: var(--white);
  position: relative;
  z-index: 2;
}
.page-header .breadcrumb-trust {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}
.page-header .breadcrumb-trust a {
  color: var(--gold-light);
}
.page-header .breadcrumb-trust span {
  color: rgba(255,255,255,0.5);
}

/* --- FAQ --- */
.faq-accordion .accordion-item {
  border: 1px solid rgba(212, 160, 23, 0.15);
  border-radius: var(--border-radius) !important;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--maroon);
  background: var(--white);
  font-size: 1rem;
  padding: 18px 24px;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(128,0,32,0.04), rgba(212,160,23,0.04));
  color: var(--maroon);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: var(--gold); }
.faq-accordion .accordion-button::after {
  background-image: none;
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--gold);
  transition: var(--transition);
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: var(--maroon);
}
.faq-accordion .accordion-body {
  padding: 0 24px 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* --- Scroll Animations --- */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* --- Founders Section --- */
.founder-card {
  text-align: center;
  padding: 30px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(212, 160, 23, 0.15);
  transition: var(--transition);
}
.founder-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.founder-card img {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--gold);
  margin-bottom: 20px;
  box-shadow: var(--shadow-gold);
}
.founder-card h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.founder-card .founder-role {
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
}

/* --- Stats Counter --- */
.stat-item {
  text-align: center;
  padding: 30px 20px;
}
.stat-item .stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item .stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- WhatsApp Float --- */
.whatsapp-float {
  position: fixed;
  bottom: 30px; left: 30px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 998;
  transition: var(--transition);
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: var(--white);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

/* --- Video Badge on Gallery Items --- */
.video-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(128, 0, 32, 0.85);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: var(--transition);
}
.gallery-item:hover .video-badge {
  background: var(--gold);
  color: var(--maroon-dark);
  transform: scale(1.1);
}

/* --- Video Lightbox --- */
#videoLightbox video {
  outline: none;
}

/* ============================================================
   LANGUAGE SWITCHER (English / తెలుగు) + Telugu webfont
   ------------------------------------------------------------
   Injected at the far right of the public navbar by i18n.js.
   Sits after the six nav links on desktop and inside the mobile
   menu on small screens, without disturbing the existing layout.
   ============================================================ */
.lang-switch { margin-left: 6px; }
.lang-switch .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 50px;
  padding: 6px 14px !important;
  color: var(--maroon) !important;
  background: rgba(212, 160, 23, 0.06);
}
.lang-switch .lang-toggle:hover {
  background: var(--gradient-gold);
  color: var(--maroon-dark) !important;
}
/* Remove the shared nav-link underline animation on the pill. */
.lang-switch .lang-toggle::after {
  position: static;
  width: auto;
  height: auto;
  background: none;
  content: '';
  border: 0;
  margin-left: 2px;
  vertical-align: middle;
}
.lang-switch .lang-current { font-weight: 700; }
.lang-switch .lang-menu {
  min-width: 150px;
  border: 1px solid rgba(212, 160, 23, 0.3);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  padding: 6px;
}
.lang-switch .lang-menu .lang-opt {
  border-radius: 8px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 8px 12px;
}
.lang-switch .lang-menu .lang-opt:hover { background: var(--cream); }
.lang-switch .lang-menu .lang-opt.active {
  background: var(--gradient-gold);
  color: var(--maroon-dark);
}

/* Telugu Unicode rendering: when the site is in Telugu, prefer the
   Noto Telugu families for real, searchable, accessible text on
   every OS (Windows / Android / iPhone / desktop). English fonts
   remain the primary faces and are used as Latin fallbacks. */
body.lang-te,
body.lang-te .nav-link,
body.lang-te p,
body.lang-te li,
body.lang-te span,
body.lang-te label,
body.lang-te input,
body.lang-te textarea,
body.lang-te select,
body.lang-te button,
body.lang-te .btn-trust,
body.lang-te .subtitle,
body.lang-te .accordion-button,
body.lang-te .brand-text {
  font-family: 'Noto Sans Telugu', var(--font-body), sans-serif;
}
body.lang-te h1,
body.lang-te h2,
body.lang-te h3,
body.lang-te h4,
body.lang-te h5,
body.lang-te h6,
body.lang-te .section-title h2,
body.lang-te .hero-content h1 {
  font-family: 'Noto Serif Telugu', var(--font-heading), serif;
}
/* Telugu glyphs need a touch more line height to breathe. */
body.lang-te { line-height: 1.85; }

/* --- Responsive --- */
@media (max-width: 991px) {
  /* body padding-top: var(--nav-h) already clears the header; on small
     screens the hero no longer needs to fill the viewport. */
  .hero-section { padding-top: 30px; min-height: auto; }
  .hero-image-wrapper { margin-top: 40px; }
  .section-padding { padding: 60px 0; }
  .navbar-trust .navbar-collapse {
    background: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 10px;
    box-shadow: var(--shadow-md);
  }
  /* In the mobile menu the pill aligns left with the nav links. */
  .lang-switch { margin-left: 0; margin-top: 6px; }
  .lang-switch .lang-toggle { display: inline-flex; width: auto; }
  .lang-switch .lang-menu { box-shadow: none; border-color: rgba(212,160,23,0.2); }
}
@media (max-width: 767px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  .section-padding { padding: 40px 0; }
  .card-premium { padding: 25px 20px; }
  .hero-content h1 { font-size: 1.6rem; }
  .stat-item .stat-number { font-size: 2rem; }
  .page-header { padding: 40px 0; }
  .deeksha-banner { padding: 6px 0; }
  .deeksha-banner-track span { font-size: clamp(0.6rem, 2.8vw, 0.8rem); padding: 0 2rem; }
}
@media (max-width: 575px) {
  .btn-trust { padding: 10px 24px; font-size: 0.85rem; }
  .gallery-item .gallery-img { height: 180px; }
}

/* --- Preloader --- */
.preloader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}
.preloader-inner {
  text-align: center;
}
.preloader-inner .om-symbol {
  font-size: 3rem;
  color: var(--gold);
  animation: preloaderPulse 1.5s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}
.preloader-inner p {
  font-family: var(--font-display);
  color: var(--maroon);
  margin-top: 15px;
  font-size: 1rem;
  letter-spacing: 2px;
}

/* ============================================================
   WEBSITE LAUNCH / CURTAIN RAISER
   ============================================================ */

/* --- Launch Overlay (covers entire viewport) --- */
.launch-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  overflow: hidden;
}

/* --- Launch Screen --- */
.launch-screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #3d0012 0%, #1a0008 60%, #0d0004 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.8s ease;
}
.launch-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
.launch-screen-inner {
  text-align: center;
  padding: 16px 20px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.launch-ornament-top {
  font-size: 2.4rem;
  color: var(--gold-light);
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(212, 160, 23, 0.5);
  animation: launchGlow 3s ease-in-out infinite;
}
@keyframes launchGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(212, 160, 23, 0.3); }
  50% { text-shadow: 0 0 40px rgba(212, 160, 23, 0.7), 0 0 60px rgba(240, 199, 94, 0.3); }
}

/* --- Goddess Frame --- */
.launch-goddess-frame {
  position: relative;
  display: block;
  margin: 0 auto 12px;
  padding: 6px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, var(--gold), var(--saffron), var(--gold));
  box-shadow: 0 0 40px rgba(212, 160, 23, 0.3), 0 0 80px rgba(212, 160, 23, 0.1);
  width: 200px;
  max-width: 200px;
  overflow: hidden;
}
.launch-goddess-glow {
  position: absolute;
  top: -12px; left: -12px; right: -12px; bottom: -12px;
  border-radius: calc(var(--border-radius-lg) + 12px);
  border: 2px solid rgba(212, 160, 23, 0.25);
  animation: launchGlowRing 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes launchGlowRing {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}
.launch-goddess-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: calc(var(--border-radius-lg) - 4px);
}

/* --- Ornaments & Text --- */
.launch-ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto;
  max-width: 200px;
}
.launch-ornament-divider::before,
.launch-ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.launch-ornament-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  margin: 0 10px;
}
.launch-invitation {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1rem;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  opacity: 0.9;
}
.launch-title {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2px;
  text-shadow: 0 2px 10px rgba(212, 160, 23, 0.3);
  letter-spacing: 1px;
}
.launch-subtitle {
  font-family: var(--font-body);
  color: rgba(240, 199, 94, 0.7);
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* --- Launch Button --- */
.launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
  color: var(--maroon-dark);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 160, 23, 0.4), 0 0 40px rgba(212, 160, 23, 0.15);
  transition: all 0.3s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.launch-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}
.launch-btn:hover::before {
  left: 100%;
}
.launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(212, 160, 23, 0.6), 0 0 60px rgba(212, 160, 23, 0.2);
}
.launch-btn:active {
  transform: translateY(0);
}
.launch-btn-icon {
  font-size: 1.3rem;
}

.launch-ornament-bottom {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 20px;
  color: rgba(212, 160, 23, 0.3);
  font-size: 0.8rem;
}

/* --- Curtains --- */
.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.curtain-left {
  left: 0;
  background:
    linear-gradient(90deg,
      #3d0012 0%,
      #5c0018 20%,
      #6d0020 40%,
      #5c0018 60%,
      #4a0015 80%,
      #3d0012 100%);
  transform: translateX(0);
}
.curtain-left::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.15));
}
.curtain-right {
  right: 0;
  background:
    linear-gradient(270deg,
      #3d0012 0%,
      #5c0018 20%,
      #6d0020 40%,
      #5c0018 60%,
      #4a0015 80%,
      #3d0012 100%);
  transform: translateX(0);
}
.curtain-right::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(270deg, transparent, rgba(212, 160, 23, 0.15));
}

/* Fabric fold lines */
.curtain-left::before,
.curtain-right::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 60px,
    rgba(0,0,0,0.08) 60px,
    rgba(0,0,0,0.08) 62px,
    transparent 62px,
    transparent 120px,
    rgba(255,255,255,0.03) 120px,
    rgba(255,255,255,0.03) 122px
  );
  pointer-events: none;
}

/* Gold trim at inner edges */
.curtain-left .curtain-trim,
.curtain-right .curtain-trim {
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-light), var(--gold), var(--gold-light), var(--gold));
  opacity: 0.6;
}
.curtain-left .curtain-trim { right: 0; }
.curtain-right .curtain-trim { left: 0; }

/* Curtain open state */
.curtain-left.open { transform: translateX(-100%); }
.curtain-right.open { transform: translateX(100%); }

/* --- Thank You Message --- */
.thank-you-msg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(61, 0, 18, 0.95) 0%, rgba(26, 0, 8, 0.98) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.thank-you-msg.visible {
  opacity: 1;
  pointer-events: auto;
}
.thank-you-msg.fade-out {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.thank-you-inner {
  text-align: center;
  padding: 30px;
  max-width: 650px;
}
.thank-you-ornament {
  font-size: 2rem;
  color: var(--gold-light);
  margin-bottom: 20px;
  text-shadow: 0 0 20px rgba(212, 160, 23, 0.5);
}
.thank-you-blessing {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1.15rem;
  margin-bottom: 12px;
  opacity: 0.9;
}
.thank-you-grate {
  font-family: var(--font-body);
  color: rgba(255, 248, 231, 0.8);
  font-size: 1rem;
  margin-bottom: 8px;
}
.thank-you-name {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 2px 15px rgba(212, 160, 23, 0.4);
  letter-spacing: 1px;
}
.thank-you-action {
  font-family: var(--font-body);
  color: rgba(255, 248, 231, 0.8);
  font-size: 1rem;
  margin-bottom: 20px;
}
.thank-you-ornament-bottom {
  color: rgba(212, 160, 23, 0.4);
  font-size: 1rem;
}

/* --- Launch Screen Responsive --- */
@media (max-width: 768px) {
  .launch-goddess-img {
    width: 170px;
    height: 170px;
  }
  .launch-title {
    font-size: 1.5rem;
  }
  .launch-btn {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
  .thank-you-name {
    font-size: 1.6rem;
  }
  .thank-you-blessing {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .launch-goddess-img {
    width: 140px;
    height: 140px;
  }
  .launch-title {
    font-size: 1.3rem;
  }
  .launch-subtitle {
    font-size: 0.8rem;
    letter-spacing: 2px;
  }
  .launch-btn {
    padding: 10px 22px;
    font-size: 0.85rem;
    letter-spacing: 1px;
  }
  .thank-you-name {
    font-size: 1.3rem;
  }
  .thank-you-inner {
    padding: 20px 15px;
  }
}