/* Home page only: "a day at the temple". One fixed stage; the story scrolls over it.
   Everything is scoped to body.home so the other pages are untouched. */
body.home { --wash:rgba(20,16,24,.72); background:var(--char); color:#fff; }
body.home[data-phase="gate"]  { --wash:rgba(20,16,24,.72); }
body.home[data-phase="dawn"]  { --wash:rgba(255,150,60,.42); }
body.home[data-phase="noon"]  { --wash:rgba(255,226,150,.30); }
body.home[data-phase="dusk"]  { --wash:rgba(153,0,17,.50); }
body.home[data-phase="night"] { --wash:rgba(10,10,28,.74); }
body.home[data-phase="offer"] { --wash:rgba(26,26,26,.82); }

body.home .nav .pill { color:var(--char); }

.stage { position:fixed; inset:0; z-index:0; background:var(--char); }
.stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.stage img.on { opacity:1; }
.stage .wash { position:absolute; inset:0; background:var(--wash); transition:background 1.4s ease; }
.stage .vig { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,.55) 100%); }
.stage .arc { position:absolute; left:0; right:0; top:100px; width:100%; height:150px; pointer-events:none; }
.stage .arc path { fill:none; stroke:rgba(255,255,255,.25); stroke-width:1.5; stroke-dasharray:3 7; }
#orb { fill:var(--yellow); filter:drop-shadow(0 0 14px rgba(255,213,79,.9)); transition:fill .6s; }

/* chapter rail */
.rail { position:fixed; right:1rem; top:50%; translate:0 -50%; z-index:25; display:flex; flex-direction:column; gap:.9rem; }
.rail a { display:block; width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.7); position:relative; transition:background .2s, transform .2s; }
.rail a.on { background:var(--yellow); border-color:var(--yellow); transform:scale(1.25); }
.rail a span { position:absolute; right:22px; top:50%; translate:0 -50%; white-space:nowrap; font:500 .78rem var(--body); color:#fff; background:rgba(26,26,26,.88); padding:.1rem .6rem; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .15s; }
.rail a:hover span, .rail a:focus-visible span { opacity:1; }
@media (max-width:700px){ .rail{ display:none; } }

body.home main { position:relative; z-index:5; }
.chap { min-height:100svh; display:flex; align-items:center; padding:3rem clamp(1.2rem,6vw,5rem) 4rem; }
.chap.right { justify-content:flex-end; }
.scard { max-width:30rem; background:rgba(20,12,14,.62); backdrop-filter:blur(6px); border-left:4px solid var(--gold); padding:clamp(1.3rem,3vw,2.2rem); border-radius:0 6px 6px 0; }
.scard h1 { font-size:clamp(2rem,5.2vw,3.5rem); color:#fff; } .scard h2 { font-size:clamp(1.7rem,3.6vw,2.6rem); color:#fff; }
.scard p { margin:0 0 1rem; color:#f2ebe4; }
.hour { font:600 .85rem var(--body); color:var(--yellow) !important; margin:0 0 .5rem !important; }
.when { display:inline-block; padding:.15rem .8rem; border:1px solid var(--gold); border-radius:999px; font-size:.95rem; color:var(--yellow); font-weight:600; margin-bottom:1rem; }
.when.tbc { font-style:italic; font-weight:400; font-size:.88rem; }
.hero-card { max-width:44rem; background:none; border:0; padding:0; backdrop-filter:none; }
.hero-card h1 { text-shadow:0 2px 30px rgba(0,0,0,.7); text-wrap:balance; }
.lede { color:var(--yellow) !important; font-size:1.15rem; }
.quick { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin:1.4rem 0 0 !important; font-size:.92rem; }
.quick a { color:#fff; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; } .quick a:hover { color:var(--yellow); }
.scrollcue { margin-top:1.8rem; font-size:.9rem; color:#e7d9c5; }
.scrollcue i { display:block; width:2px; height:46px; background:linear-gradient(var(--yellow), transparent); margin:.6rem 0 0 .4rem; animation:drip 2s ease-in-out infinite; }
@keyframes drip { 0%{ transform:scaleY(.2); transform-origin:top; opacity:.4 } 60%{ transform:scaleY(1); transform-origin:top; opacity:1 } 100%{ opacity:.2 } }

.sloka-ch { text-align:center; justify-content:center; }
.sloka-ch .scard { max-width:46rem; border:0; border-top:4px solid var(--gold); border-radius:6px; background:rgba(20,12,14,.7); }
.sloka-ch .dev { font:600 clamp(1.4rem,3.2vw,2.1rem)/1.75 "Noto Serif Devanagari",serif; color:var(--yellow); margin:0 0 .6rem; }
.sloka-ch .trn { font-style:italic; color:#d9cdbf; } .sloka-ch .mean { font-size:.98rem; max-width:54ch; margin-inline:auto; }

/* nine lamps: a tall track, a sticky panel; scroll position decides which lamp is lit */
.track { height:620vh; position:relative; }
.pin { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:5.5rem 1.2rem 2rem; text-align:center; }
.pin h2 { color:var(--yellow); font-size:clamp(1.4rem,3.2vw,2.2rem); }
.pin .sub { margin:0; color:#e7d9c5; max-width:46ch; } .pin .sub a { color:var(--yellow); }
.lamps { display:flex; gap:clamp(.5rem,2vw,1.4rem); margin:1rem 0 1.6rem; flex-wrap:wrap; justify-content:center; }
.lamp { width:46px; background:none; border:0; cursor:pointer; color:#fff; padding:0; text-align:center; font:inherit; }
.lamp .flame { display:block; width:14px; height:26px; margin:0 auto -4px; border-radius:50% 50% 50% 50% / 70% 70% 30% 30%; background:#4a4038; opacity:.55; transition:all .5s; }
.lamp .base { display:block; height:14px; border-radius:2px 2px 20px 20px; background:#6a5a40; transition:background .5s; }
.lamp b { display:block; font:400 .8rem var(--head); margin-top:.2rem; color:#bfae98; }
.lamp.lit .flame { background:radial-gradient(ellipse at 50% 70%, #fff6c8, var(--gold) 55%, transparent 80%); opacity:1; filter:drop-shadow(0 0 12px var(--yellow)); }
.lamp.lit .base { background:var(--gold); } .lamp.lit b { color:var(--yellow); } .lamp.now .flame { transform:scale(1.2); }
.form { max-width:36rem; width:100%; background:rgba(20,12,14,.68); backdrop-filter:blur(6px); border-top:4px solid var(--gold); border-radius:6px; padding:1.4rem 1.8rem; min-height:15.5rem; }
.form .n { font:600 .85rem var(--body); color:var(--yellow); }
.form h3 { font-size:clamp(1.8rem,4vw,2.6rem); margin:.1em 0; color:#fff; } .form .ml { font:600 1.15rem "Noto Serif Malayalam",serif; color:#ffd9d9; display:block; margin-bottom:.6rem; }
.form p { margin:0 0 .6rem; color:#f2ebe4; font-size:.98rem; } .form .mantra { font:600 1.2rem "Noto Serif Devanagari",serif; color:var(--yellow); margin:0; }

.scard.dark { max-width:34rem; } .scard .events { margin-top:1rem; }
.fin { background:linear-gradient(transparent, var(--char) 22%); padding:7rem clamp(1.2rem,6vw,5rem) 2rem; }
.go { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:1120px; margin:0 auto; }
.go a { text-decoration:none; color:#fff; padding:1.1rem 1.2rem; border:2px solid var(--gold); background:rgba(20,12,14,.6); border-radius:4px; transition:background .15s; }
.go a:hover { background:var(--gold); color:var(--char); } .go a b { display:block; font:400 1.2rem var(--head); } .go a span { font-size:.88rem; opacity:.85; }
@media (max-width:860px){ .go{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .go{ grid-template-columns:1fr; } }
body.home footer.site { position:relative; z-index:5; }
@media (max-width:700px){ .chap, .chap.right { align-items:flex-end; justify-content:center; padding-bottom:3rem; } .scard { max-width:none; } }
@media (prefers-reduced-motion:reduce){ .scrollcue i { animation:none; } .stage img, .stage .wash { transition:none; } }