/* ==========================================================
   Hero Slider Styles
   ========================================================== */

.hero-slider {
  position: relative;
  height: 530px;
  overflow: hidden;
}

/* Slides */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Gradient backgrounds per slide */
.slide-1 .bg-layer { background: linear-gradient(135deg, #8B4513 0%, #D2691E 25%, #FF8C00 55%, #FFD700 100%); }
.slide-2 .bg-layer { background: linear-gradient(135deg, #4A0E0E 0%, #8B1A1A 40%, #C41E3A 70%, #FF6B35 100%); }
.slide-3 .bg-layer { background: linear-gradient(135deg, #1a0533 0%, #4B0082 40%, #8B0057 70%, #C41E3A 100%); }

/* Dark overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(80,5,5,0.45) 60%,
    rgba(110,0,0,0.78) 100%
  ),
  url("../images/banner1-new.png");

  background-size: cover;/*cover;*/
  background-position: center;
  background-repeat: no-repeat;;
}

/* Temple graphic (left) */
.hero-temple-graphic {
  position: absolute;
  left: 2%;
  bottom: 0; top: 0;
  width: 44%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 3;
}
.temple-svg-wrap {
  width: 100%;
  max-width: 390px;
  opacity: 0.82;
  filter: drop-shadow(0 0 30px rgba(255,200,0,0.35));
}

/* Goddess graphic (right) */
.hero-goddess {
  position: absolute;
  right: 2%;
  bottom: 0; top: -20px;
  width: 42%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 3;
}
.goddess-img-wrap {
  width: 100%;
  max-width: 350px;
  filter: drop-shadow(0 0 40px rgba(255,215,0,0.55));
}

/* Bokeh */
.bokeh-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.bokeh {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: bokehFloat linear infinite;
}

/* Hero text content */
.hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: left;
  padding: 30px 68px 85px;
  z-index: 6;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--gold-ll);
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7), 0 0 30px rgba(255,200,50,0.4);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: var(--cream);
  letter-spacing: 0.18em;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}
.hero-subtitle span { margin: 0 12px; color: var(--gold-l); }

/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(155,27,27,0.65);
  border: 2px solid var(--gold);
  color: var(--gold-l);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.95rem;
}
.slider-arrow:hover { background: var(--gold); color: var(--crimson-d); }
.slider-prev { left: 16px; }
.slider-next { right: 16px; }

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 9px;
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--gold);
}
.slider-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-slider   { height: 410px; }
  .hero-temple-graphic { width: 48%; }
  .hero-goddess  { width: 46%; }
}
@media (max-width: 575px) {
  .hero-slider  { height: 360px; }
  .hero-temple-graphic { display: none; }
  .hero-goddess { width: 58%; right: 0; }
  .hero-title   { font-size: 1.4rem; gap: 8px; }
}