/* Homepage hero: mandala, glow, rays, headline animation */
/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(160deg,#12331f 0%,#1f4a2c 45%,#356b3a 100%)}
#leaf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3}

/* mandala backdrop */
.mandala{position:absolute;top:50%;left:50%;width:min(88vh,760px);height:min(88vh,760px);z-index:1;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.82);animation:mandalaIn 2.6s .25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mandalaIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mandala .ring{transform-origin:200px 200px}
.mandala .r1{animation:spinCW 95s linear infinite}
.mandala .r2{animation:spinCCW 140s linear infinite}
.mandala .r3{animation:spinCW 62s linear infinite}
.mandala .r4{animation:spinCCW 180s linear infinite}
@keyframes spinCW{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}
.mandala path,.mandala circle{fill:none;vector-effect:non-scaling-stroke}
.mandala .r1 path{stroke:rgba(255,223,138,.34);stroke-width:.9}
.mandala .r2 path{stroke:rgba(198,226,182,.26);stroke-width:.7}
.mandala .r3 path{stroke:rgba(255,223,138,.22);stroke-width:.7}
.mandala .r4 circle{stroke:rgba(198,226,182,.2);stroke-width:.6}
.mandala .halo{stroke:rgba(255,223,138,.16);stroke-width:.6}

/* warm glow that follows the cursor */
.hero-glow{position:absolute;left:50%;top:45%;width:620px;height:620px;border-radius:50%;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.75;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,231,160,.20),rgba(255,214,120,.07) 42%,transparent 68%)}
.hero .rays{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:1;background:
  radial-gradient(120% 90% at 78% -10%,rgba(255,224,138,.55),transparent 55%),
  radial-gradient(80% 60% at 20% 110%,rgba(21,64,35,.9),transparent 60%);
  mix-blend-mode:screen;pointer-events:none}
.hero .sun{position:absolute;top:-160px;right:-80px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,231,160,.85),rgba(255,214,120,.25) 45%,transparent 70%);
  filter:blur(6px);z-index:1;animation:sunbreath 9s ease-in-out infinite}
@keyframes sunbreath{50%{transform:scale(1.08);opacity:.85}}
.hero-content{position:relative;z-index:5;color:#f4f1e4;max-width:760px;padding:120px 0 90px}
.hero .shloka{color:#ffe6a6;font-size:1.15rem;letter-spacing:.04em;opacity:0;transform:translateY(18px);animation:rise .9s .1s forwards}
.hero h1{color:#fff;font-size:clamp(2.8rem,7vw,5.6rem);margin:.15em 0 .12em;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.hero h1 .leaf-i{color:#ffdf8a}
.hero .lead{font-size:1.15rem;max-width:56ch;color:#e9ecdd;opacity:.95}
.hero .rotator{height:1.7em;overflow:hidden;font-family:'Cormorant Garamond';font-size:clamp(1.4rem,3vw,2.1rem);color:#ffe6a6;margin:.2em 0 1.1em}
.hero .rotator span{display:block;animation:rotate 9s infinite}
@keyframes rotate{0%,25%{transform:translateY(0)}33%,58%{transform:translateY(-1.7em)}66%,92%{transform:translateY(-3.4em)}100%{transform:translateY(-5.1em)}}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;opacity:0;transform:translateY(18px);animation:rise .9s .5s forwards}
.hero h1,.hero .lead,.hero .rotator{opacity:0;transform:translateY(22px);animation:rise .9s forwards}
.hero h1{animation-delay:.2s}.hero .rotator{animation-delay:.32s}.hero .lead{animation-delay:.42s}
@keyframes rise{to{opacity:1;transform:none}}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;color:#f4f1e4;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{animation:bob 1.8s infinite}
@keyframes bob{50%{transform:translateY(7px)}}