/* =====================================================================
   enhance.css — Home hero carousel + astrology animation
   Self-contained add-on. Does NOT modify style.css.
   Uses existing theme tokens with safe fallbacks.
   ===================================================================== */
:root{
  --e-saffron: var(--saffron, #E8A13A);
  --e-kumkum:  var(--kumkum, #B5341F);
  --e-indigo:  var(--indigo, #17143a);
  --e-gold:    var(--gold, #D4AF37);
}

/* ---------------- HERO CAROUSEL ---------------- */
.hero-carousel{ position:relative; overflow:hidden; background:#0b0a26; }
.hero-carousel .swiper{ height:min(84vh,720px); min-height:460px; }
.hero-carousel .swiper-slide{ overflow:hidden; }

.hero-slide{
  position:relative; height:100%;
  display:grid; place-items:center; text-align:center;
  color:#fff; padding:4.5rem 1.25rem;
}
.hero-slide__bg{ position:absolute; inset:0; z-index:0; }
.hero-slide.s1 .hero-slide__bg{ background:linear-gradient(135deg,#1a1246 0%,#3a1a53 55%,#7a2a2a 100%); }
.hero-slide.s2 .hero-slide__bg{ background:linear-gradient(135deg,#0e1a3a 0%,#20325e 55%,#8a5a1a 100%); }
.hero-slide.s3 .hero-slide__bg{ background:linear-gradient(135deg,#241046 0%,#4a1e50 55%,#9a6b1a 100%); }

/* rotating chakra/zodiac watermark (pure CSS, no image needed) */
.hero-slide__wheel{
  position:absolute; top:50%; left:50%; width:660px; height:660px;
  transform:translate(-50%,-50%); z-index:1; opacity:.16; pointer-events:none;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(212,175,55,.55) 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle, transparent 32%, rgba(212,175,55,.35) 33% 34%, transparent 35% 55%, rgba(212,175,55,.25) 56% 57%, transparent 58%);
  -webkit-mask:radial-gradient(circle, #000 68%, transparent 70%);
          mask:radial-gradient(circle, #000 68%, transparent 70%);
  animation:e-spin 70s linear infinite;
}
.hero-slide__veil{
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(6,5,24,.55) 78%),
             linear-gradient(180deg, rgba(6,5,24,.35), rgba(6,5,24,.15));
}
.hero-slide__content{ position:relative; z-index:4; max-width:820px; }

.hc-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-en,'Fraunces',serif);
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(212,175,55,.5);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.1rem;
  backdrop-filter:blur(4px);
}
.hc-kicker i{ color:var(--e-gold); }
.hc-title{
  font-size:clamp(1.8rem,4.6vw,3.4rem); line-height:1.15; font-weight:700; margin:0 0 .75rem;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.hc-title .accent{ color:var(--e-gold); }
.hc-sub{
  font-size:clamp(.98rem,1.7vw,1.15rem); line-height:1.7;
  color:rgba(255,255,255,.88); max-width:620px; margin:0 auto 1.6rem;
}
.hc-cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.hc-cta .btn{ font-weight:600; }

/* Swiper controls (scoped classes so they don't clash with the testimonials slider) */
.hero-carousel .hero-prev,
.hero-carousel .hero-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(212,175,55,.5);
  border-radius:50%; transition:background .2s ease, transform .2s ease;
}
.hero-carousel .hero-prev:hover,
.hero-carousel .hero-next:hover{ background:var(--e-saffron); transform:translateY(-50%) scale(1.06); }
.hero-carousel .hero-prev{ left:18px; }
.hero-carousel .hero-next{ right:18px; }
.hero-carousel .hero-pagination{
  position:absolute; left:0; right:0; bottom:22px; z-index:10;
  display:flex; gap:.5rem; justify-content:center;
}
.hero-carousel .hero-pagination .swiper-pagination-bullet{
  width:10px; height:10px; background:rgba(255,255,255,.5); opacity:1; border-radius:999px;
  transition:width .25s ease, background .25s ease;
}
.hero-carousel .hero-pagination .swiper-pagination-bullet-active{ width:28px; background:var(--e-gold); }

@media (max-width:575.98px){
  .hero-carousel .hero-prev, .hero-carousel .hero-next{ display:none; }
}

/* ---------------- ASTROLOGY ANIMATION LAYER ---------------- */
.astro-anim{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }

/* orbiting planets */
.astro-orbit{
  position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:360px; height:360px; opacity:.5;
}
.astro-orbit .sun{
  position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe6a8, var(--e-saffron));
  box-shadow:0 0 34px rgba(232,161,58,.65);
}
.astro-orbit .ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:1px dashed rgba(212,175,55,.35); border-radius:50%;
}
.astro-orbit .ring.r1{ width:150px; height:150px; animation:e-orbit 16s linear infinite; }
.astro-orbit .ring.r2{ width:250px; height:250px; animation:e-orbit 28s linear infinite; }
.astro-orbit .ring.r3{ width:350px; height:350px; animation:e-orbit 44s linear infinite; }
.astro-orbit .planet{
  position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--e-saffron); box-shadow:0 0 14px rgba(232,161,58,.85);
}
.astro-orbit .r2 .planet{ background:#c9a2ff; box-shadow:0 0 14px rgba(201,162,255,.85); }
.astro-orbit .r3 .planet{ background:#8fd3ff; box-shadow:0 0 14px rgba(143,211,255,.85); }

/* floating zodiac glyphs */
.astro-glyph{
  position:absolute; bottom:-40px;
  font-size:clamp(16px,2vw,30px); color:rgba(212,175,55,.4);
  text-shadow:0 0 12px rgba(212,175,55,.35);
  animation:e-float linear infinite; will-change:transform,opacity;
}

/* keep page-banner text above the animation */
.page-banner .container{ position:relative; z-index:2; }
.page-banner .astro-orbit{ width:240px; height:240px; opacity:.4; right:-40px; }

@keyframes e-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes e-orbit{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes e-float{
  0%{ transform:translateY(0) rotate(0); opacity:0; }
  12%{ opacity:.55; }
  88%{ opacity:.55; }
  100%{ transform:translateY(-360px) rotate(40deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-slide__wheel, .astro-orbit .ring, .astro-glyph{ animation:none !important; }
  .astro-glyph{ display:none; }
}