/* ═══════════════════════════════════════════════════════════════
   home.css — Homepage-specific styles & 2-Column Hero + Marquee
   ─────────────────────────────────────────────────────────────
   Requires: tokens.css, base.css, components.css
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   HERO SECTION (2-Column Desktop Layout)
   ══════════════════════════════════════════════ */

.hero {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-sanctum-maroon) 0%,
    var(--color-maroon-deep) 40%,
    var(--color-night-indigo) 100%
  );
  color: var(--color-text-on-dark);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  overflow: hidden;
  min-height: 85vh;
  min-height: 85dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1160px;
  padding-inline: var(--content-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

@media (min-width: 700px) {
  .hero__content {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    text-align: left;
  }
}

/* Left column (Ganesha idol & Navagraha ring) */
.hero__col-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (min-width: 700px) {
  .hero__col-left {
    justify-content: flex-start;
  }
}

/* Right column (Title, subtitle, phone & CTA) */
.hero__col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 600px;
}

@media (min-width: 700px) {
  .hero__col-right {
    align-items: flex-start;
  }
}

.hero__image-wrap {
  position: relative;
  margin-bottom: 0;
  cursor: default;
}

/* Breathing Sanctum Aura Halo */
.gopuram-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(201, 152, 46, 0.28) 0%,
    rgba(201, 152, 46, 0.12) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: halo-breathe 5s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-temple-brass);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4),
               0 0 30px rgba(201, 152, 46, 0.2);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--text-4xl);
  }
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(242, 232, 213, 0.9);
  margin-bottom: 0;
  line-height: var(--leading-normal);
}

.hero__phone {
  font-family: var(--font-label);
  font-size: var(--text-2xl);
  color: var(--color-temple-brass);
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* Hide hero CTAs on mobile (since fixed bottom bar handles mobile conversion) */
@media (max-width: 767px) {
  .hero__cta-group {
    display: none !important;
  }
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  max-width: 320px;
}

@media (min-width: 640px) {
  .hero__cta-group {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .hero__cta-group {
    display: flex;
    justify-content: flex-start;
  }
}

/* Micro-animation: golden shine sweep on WhatsApp CTA */
.cta-button--whatsapp {
  position: relative;
  overflow: hidden;
}

.cta-button--whatsapp::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: rotate(25deg) translateX(-250%);
  animation: shine-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes shine-sweep {
  0%, 75% { transform: rotate(25deg) translateX(-350%); }
  100% { transform: rotate(25deg) translateX(350%); }
}


/* ══════════════════════════════════════════════
   AUSPICIOUS MARQUEE (Running Ticker After Hero)
   ══════════════════════════════════════════════ */

.auspicious-marquee {
  background: var(--color-maroon-deep);
  border-top: 2px solid var(--color-temple-brass);
  border-bottom: 2px solid var(--color-temple-brass);
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 10;
  padding: 16px 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.auspicious-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
  align-items: center;
}

.auspicious-marquee__track:hover {
  animation-play-state: paused;
}

.auspicious-marquee__text {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: #FCE8A1;
  letter-spacing: 0.05em;
  line-height: 1.6;
  white-space: nowrap;
  padding-right: 64px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .auspicious-marquee__track {
    animation: none;
  }
}


/* ══════════════════════════════════════════════
   WHY CHOOSE US SECTION
   ══════════════════════════════════════════════ */

.why-section {
  background-color: var(--color-bg-primary);
}


/* ══════════════════════════════════════════════
   SERVICES SECTION
   ══════════════════════════════════════════════ */

.services-section {
  background-color: var(--color-ivory-cool);
}

.services-section .service-card__title {
  font-size: var(--text-lg);
}

/* Service Card Icon Micro-Animation on hover */
.service-card:hover .service-card__icon {
  transform: translateY(-3px) scale(1.08) rotate(3deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ══════════════════════════════════════════════
   TESTIMONIALS SECTION
   ══════════════════════════════════════════════ */

.testimonials-section {
  background-color: var(--color-bg-primary);
  overflow: hidden;
  position: relative;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 75%;
  background: radial-gradient(circle, rgba(229, 184, 74, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.testimonials-section .container {
  position: relative;
  z-index: 1;
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.testimonials-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-light);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-fast),
              transform var(--transition-fast);
}

.testimonials-nav__dot--active {
  background-color: var(--color-temple-brass);
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(201, 152, 46, 0.4);
}

/* Hide 3 dots on desktop view where all cards fit side by side */
@media (min-width: 1024px) {
  .testimonials-nav {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════
   CONTACT SECTION
   ══════════════════════════════════════════════ */

.contact-section {
  background: linear-gradient(
    180deg,
    var(--color-ivory-cool) 0%,
    var(--color-bg-primary) 100%
  );
}


/* ══════════════════════════════════════════════
   DECORATIVE STARS (hero background)
   ══════════════════════════════════════════════ */

.star-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.star-field__star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--color-brass-pale);
  border-radius: var(--radius-full);
  opacity: 0;
  animation: star-twinkle 4s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.6; }
}

.star-field__star:nth-child(1)  { left: 10%; top: 15%; animation-delay: 0s; }
.star-field__star:nth-child(2)  { left: 25%; top: 8%;  animation-delay: 0.7s; }
.star-field__star:nth-child(3)  { left: 45%; top: 20%; animation-delay: 1.3s; }
.star-field__star:nth-child(4)  { left: 60%; top: 5%;  animation-delay: 0.3s; }
.star-field__star:nth-child(5)  { left: 75%; top: 18%; animation-delay: 2.1s; }
.star-field__star:nth-child(6)  { left: 88%; top: 12%; animation-delay: 1.8s; }
.star-field__star:nth-child(7)  { left: 15%; top: 70%; animation-delay: 0.5s; }
.star-field__star:nth-child(8)  { left: 35%; top: 80%; animation-delay: 1.0s; }
.star-field__star:nth-child(9)  { left: 55%; top: 75%; animation-delay: 2.5s; }
.star-field__star:nth-child(10) { left: 70%; top: 85%; animation-delay: 1.5s; }
.star-field__star:nth-child(11) { left: 90%; top: 70%; animation-delay: 0.9s; }
.star-field__star:nth-child(12) { left: 5%;  top: 45%; animation-delay: 2.0s; }
.star-field__star:nth-child(13) { left: 92%; top: 40%; animation-delay: 1.2s; }
.star-field__star:nth-child(14) { left: 30%; top: 55%; animation-delay: 3.0s; }
.star-field__star:nth-child(15) { left: 50%; top: 90%; animation-delay: 0.4s; }
.star-field__star:nth-child(16) { left: 82%; top: 55%; animation-delay: 2.8s; }
.star-field__star:nth-child(17) { left: 18%; top: 35%; animation-delay: 1.7s; }
.star-field__star:nth-child(18) { left: 65%; top: 45%; animation-delay: 3.2s; width: 3px; height: 3px; }
.star-field__star:nth-child(19) { left: 40%; top: 30%; animation-delay: 0.6s; width: 3px; height: 3px; }
.star-field__star:nth-child(20) { left: 78%; top: 28%; animation-delay: 2.3s; }


/* ══════════════════════════════════════════════
   PLACEHOLDER NOTICE (for missing client data)
   ══════════════════════════════════════════════ */

.placeholder-notice {
  display: inline-block;
  background: repeating-linear-gradient(
    45deg,
    rgba(201, 152, 46, 0.08),
    rgba(201, 152, 46, 0.08) 10px,
    rgba(201, 152, 46, 0.04) 10px,
    rgba(201, 152, 46, 0.04) 20px
  );
  border: 1px dashed var(--color-temple-brass);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ══════════════════════════════════════════════
   PARALLAX & SCROLL-REVEAL SYSTEM
   ══════════════════════════════════════════════ */

/* 1. Staggered Temple-Rise Entrance Animation */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.97);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 2. Floating Vedic Yantra / Mandala Background Parallax */
.parallax-mandala {
  position: absolute;
  width: 440px;
  height: 440px;
  pointer-events: none;
  opacity: 0.055;
  color: var(--color-temple-brass);
  z-index: 0;
  transition: transform 0.1s linear;
}

.parallax-mandala--right {
  top: 10%;
  right: -120px;
}

.parallax-mandala--left {
  bottom: 5%;
  left: -140px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax-mandala {
    display: none;
  }
}