/* =========================================================
   Shri Bhagwati Sewa Foundation — Shared Styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600&family=Tiro+Devanagari+Sanskrit&display=swap');

:root{
  /* Recolored to the jewel-tone palette from bhagwati-site_V8 (kept our
     dark-sanctum structure, fonts and layout — only the hues changed). */
  --ink:#241108;        /* V8 --ink */
  --ink-2:#170B05;       /* darkened variant of V8 --ink, for our two-tier gradients */
  --crimson:#8E1B32;     /* V8 --crimson */
  --crimson-2:#611221;   /* V8 --crimson-deep */
  --saffron:#E8671E;     /* V8 --saffron */
  --gold:#D4AF37;        /* V8 --gold (already matched) */
  --gold-light:#FFD966;  /* V8 --gold-bright */
  --ivory:#FFF8EC;       /* V8 --cream */
  --ivory-dim:#FDEFD6;   /* V8 --cream-dim */
  --peacock:#0E6E7A;     /* V8 --peacock */
  --marigold:#E8A317;    /* V8 --marigold */
  --lotus:#1C7A5E;       /* V8 --emerald, standing in for our old pink accent slot */
  --plum-text:#4A2534;   /* V8 --plum-text, primary body text on the cream base */
  --plum-dim:#7A5568;    /* softer variant for secondary/paragraph text on cream */

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Noto Sans','Noto Sans Devanagari', sans-serif;
  --font-sacred:'Tiro Devanagari Sanskrit', serif;

  --radius:2px;
  --nav-h:76px;
}

/* ---------- Aarti / Evening mode ---------- */
body.aarti-mode{
  --ink:#1A0704;
  --ink-2:#120503;
  --crimson:#A32B44;
  --gold:#FFD966;
  --gold-light:#FFE9A3;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--plum-text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .8s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .4em;
  color:var(--crimson-2);
  letter-spacing:.01em;
}
p{ margin:0 0 1em; color:var(--plum-dim); }
.sacred{ font-family:var(--font-sacred); }

/* Headings/paragraphs inside the dark anchor regions (hero, nav, footer,
   door intro) stay light — everything else sits on the cream base and
   needs the dark plum/crimson ink instead. */
.hero h1,.hero h2,.hero h3,.hero h4,
.site-nav h1,.site-nav h2,.site-nav h3,.site-nav h4,
.footer h1,.footer h2,.footer h3,.footer h4,
.door-intro h1,.door-intro h2,.door-intro h3,.door-intro h4{
  color:var(--gold-light);
}
.footer p{ color:var(--ivory-dim); }
.hero p{ color:var(--ivory-dim); }

::selection{ background:var(--marigold); color:var(--ink); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--marigold);
  outline-offset:3px;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.section{ position:relative; padding:110px 0; }
@media (max-width:768px){
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:2rem; }
  .mt-lg{ margin-top:1.6rem; }
}

/* ---------------------------------------------------------
   Jewel-tone color-blocked sections (V8-style): each major section
   gets its own hued wash + a top accent rule, so the page reads as
   distinct jewel-toned rooms rather than one uniform dark field.
   The eyebrow label picks up the section's accent color too.
   --------------------------------------------------------- */
.section-crimson{
  background:linear-gradient(180deg, rgba(142,27,50,.16), transparent 70%), var(--ivory);
  border-top:1px solid rgba(142,27,50,.4);
}
.section-crimson .eyebrow{ color:var(--crimson); }

.section-peacock{
  background:linear-gradient(180deg, rgba(14,110,122,.16), transparent 70%), var(--ivory);
  border-top:1px solid rgba(14,110,122,.4);
}
.section-peacock .eyebrow{ color:var(--peacock); }

.section-marigold{
  background:linear-gradient(180deg, rgba(232,163,23,.18), transparent 70%), var(--ivory);
  border-top:1px solid rgba(232,163,23,.4);
}
.section-marigold .eyebrow{ color:#B87A0E; }

.section-emerald{
  background:linear-gradient(180deg, rgba(28,122,94,.16), transparent 70%), var(--ivory);
  border-top:1px solid rgba(28,122,94,.4);
}
.section-emerald .eyebrow{ color:var(--lotus); }

/* =========================================================
   Featured section treatment ("Our Story") — a genuine golden
   tile, not just a gold outline: warm metallic-gold fill with
   bronze/maroon text sitting directly on it for real contrast.
   ========================================================= */
:root{ --bronze:#6B3F14; }
.section-featured{
  background:linear-gradient(180deg, #F6E3A8, #E8C158 55%, #C99A2E 100%);
  border-top:3px solid var(--crimson-2);
  border-bottom:3px solid var(--crimson-2);
}
.story-frame{
  position:relative;
  max-width:1180px; margin:0 auto; padding:56px 44px;
  border:2px solid var(--crimson-2);
  border-radius:6px;
  background:
    radial-gradient(circle 5px at 16px 16px, var(--crimson-2) 62%, transparent 64%),
    radial-gradient(circle 5px at calc(100% - 16px) 16px, var(--crimson-2) 62%, transparent 64%),
    radial-gradient(circle 5px at 16px calc(100% - 16px), var(--crimson-2) 62%, transparent 64%),
    radial-gradient(circle 5px at calc(100% - 16px) calc(100% - 16px), var(--crimson-2) 62%, transparent 64%),
    linear-gradient(165deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 60%);
  background-repeat:no-repeat;
  box-shadow:0 0 0 6px rgba(97,18,33,.12), 0 30px 70px -30px rgba(60,30,5,.4);
}
.story-frame::before{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(97,18,33,.4); border-radius:3px;
}
/* Embossed/etched-in-gold look: color stays close to the tile's own gold
   tone (not a contrasting hue), with a light+dark bevel shadow doing the
   work of making it read as engraved metal rather than printed text. */
.story-frame .eyebrow{
  color:#B5860F;
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(75,40,5,.45);
  letter-spacing:.16em;
}
.story-frame .section-head h2{
  font-size:clamp(2.5rem,5vw,3.5rem);
  color:var(--crimson-2);
}
.story-frame .section-head p{ color:var(--bronze); }
.story-frame .quote-block .sacred{ color:var(--crimson-2); }
.story-frame .quote-block cite{ color:var(--bronze); }
.story-divider{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  margin:.3em auto 1.1em; width:100%; max-width:280px;
}
.story-divider span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--crimson-2)); }
.story-divider span:last-child{ background:linear-gradient(90deg, var(--crimson-2), transparent); }
.story-divider i{ color:var(--crimson-2); font-style:normal; font-size:.9rem; }
@media (max-width:700px){
  .story-frame{ padding:40px 20px; }
}

.eyebrow{
  font-family:var(--font-sacred);
  color:var(--saffron);
  font-size:1.05rem;
  letter-spacing:.06em;
  display:block;
  margin-bottom:.6em;
}
.section-head{ max-width:640px; margin:0 auto 3.2rem; text-align:center; }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  letter-spacing:.03em; text-transform:uppercase;
  padding:.95em 2.1em;
  border:1px solid var(--gold);
  color:var(--gold-light);
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  border-radius:var(--radius);
  cursor:pointer;
  position:relative;
  isolation:isolate;
  transition:color .35s ease, transform .25s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--gold),#a97e22);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.btn:hover{ color:var(--ink); transform:translateY(-2px); }
.btn:hover::before{ transform:scaleY(1); }
.btn.solid{ background:linear-gradient(180deg,var(--gold),#a97e22); color:var(--ink); }
/* Default ghost button assumes it's sitting on cream content sections:
   dark crimson text on a soft white fill. Inside the dark hero it's
   overridden back to light (see .hero .btn.ghost below), matching how
   V8 treats the same button differently depending on its background. */
.btn.ghost{ border-color:var(--gold); color:var(--crimson-2); background:rgba(255,255,255,.65); }
.btn.ghost::before{ background:rgba(255,255,255,.5); }
.btn.ghost:hover{ color:var(--crimson-2); }
.hero .btn.ghost{ border-color:rgba(255, 248, 236,.35); color:var(--ivory); background:transparent; }
.hero .btn.ghost::before{ background:rgba(255, 248, 236,.12); }
.hero .btn.ghost:hover{ color:var(--ivory); }

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:linear-gradient(135deg, var(--crimson) 0%, var(--crimson-2) 45%, var(--peacock) 100%);
  border-bottom:1px solid rgba(212,175,55,.35);
  box-shadow:0 10px 30px rgba(20,5,10,.25);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:1.4em; }
.brand{ display:flex; align-items:center; flex:none; }
.brand-logo-plate{
  display:flex; align-items:center; justify-content:center;
  background:var(--ivory);
  border-radius:10px;
  padding:1px 8px;
  height:75px; width:auto; max-width:170px; box-sizing:border-box; flex:none;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.55);
  transition:transform .25s ease;
}
.brand:hover .brand-logo-plate{ transform:scale(1.03); }
/* object-fit:contain means whatever logo file gets dropped in — square icon
   or wide horizontal lockup — always scales to fit this fixed box instead
   of stretching the nav bar to match its native aspect ratio. */
.brand-logo{ width:100%; height:100%; object-fit:contain; display:block; flex:none; }
@media (max-width:560px){
  .brand-logo-plate{ height:56px; max-width:130px; padding:1px 6px; }
}
.nav-links{ display:flex; align-items:center; gap:1.9em; list-style:none; margin:0; padding:0; }
.nav-links a:not(.connect-pill):not(.donate-pill){
  font-size:.84rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ivory-dim);
  position:relative; padding-bottom:4px; white-space:nowrap;
}
.nav-links a:not(.connect-pill):not(.donate-pill)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--gold-light); }
.nav-links li.nav-mobile-actions{ list-style:none; }

.nav-actions{ display:flex; align-items:center; gap:.55em; flex:none; }

/* All nav action controls (language toggle, WhatsApp, Instagram, Donate)
   share one fixed height, radius, icon-circle size and font-size so none
   of them reads as visually "bigger" or "smaller" than the others. */
:root{ --pill-h:38px; --pill-icon:24px; --pill-font:.76rem; --pill-radius:19px; }

/* Language switch */
.lang-toggle{
  display:flex; align-items:center; height:var(--pill-h);
  border:1px solid rgba(212,175,55,.4); border-radius:var(--pill-radius);
  padding:3px; background:rgba(212,175,55,.06); flex:none; box-sizing:border-box;
}
.lang-toggle button{
  height:100%; display:flex; align-items:center;
  border:none; background:transparent; color:var(--ivory-dim); font-family:var(--font-body);
  font-size:var(--pill-font); font-weight:600; letter-spacing:.05em; padding:0 .9em;
  border-radius:calc(var(--pill-radius) - 3px); cursor:pointer; transition:.25s;
}
.lang-toggle button.active{
  background:linear-gradient(180deg,var(--gold),#a97e22); color:var(--ink);
}

/* Connect pills (WhatsApp / Instagram) + Donate pill share this base */
.connect-pill,.donate-pill{
  display:flex; align-items:center; height:var(--pill-h); box-sizing:border-box;
  gap:.5em; padding:0 .95em 0 .42em;
  border-radius:var(--pill-radius); color:var(--ivory);
  font-size:var(--pill-font); font-weight:600; letter-spacing:.02em; white-space:nowrap;
  transition:.25s ease; flex:none;
}
.connect-pill{ border:1px solid rgba(255, 248, 236,.22); }
.connect-pill .dot,.donate-pill .plate{
  width:var(--pill-icon); height:var(--pill-icon); border-radius:50%;
  display:grid; place-items:center; flex:none; color:#fff;
}
.connect-pill.wa .dot{ background:#25D366; }
.connect-pill.ig .dot{ background:radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.connect-pill.wa:hover{ border-color:#25D366; background:rgba(37,211,102,.1); }
.connect-pill.ig:hover{ border-color:#d6249f; background:rgba(214,36,159,.1); }

/* Donation / Seva icon-button */
.donate-pill{
  border:1px solid var(--gold); color:var(--gold-light);
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.03));
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.donate-pill .plate{
  background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, #8a661f 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.donate-pill:hover{ background:linear-gradient(180deg,var(--gold),#a97e22); color:var(--ink); transform:translateY(-1px); }

.nav-toggle{ display:none; background:none; border:none; color:var(--ivory); font-size:1.6rem; cursor:pointer; flex:none; }

@media (max-width:1180px){
  .connect-pill .lbl{ display:none; }
  .connect-pill{ padding:0; width:var(--pill-h); justify-content:center; }
}
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 0 0; flex-direction:column; justify-content:center;
    background:var(--ink-2); gap:2.2em; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease; z-index:480;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle{ display:block; }
  .donate-pill .lbl-full{ display:none; }
  .donate-pill{ padding:0; width:var(--pill-h); justify-content:center; }
  .nav-actions{ gap:.4em; }
}
@media (max-width:560px){
  .brand .name{ font-size:1rem; }
  :root{ --pill-h:34px; --pill-icon:22px; }
}

/* Below this width even icon-only pills can't fit alongside the brand
   name and hamburger, so WhatsApp/Instagram/Donate move into the
   full-screen mobile menu instead of the persistent top bar. */
.nav-mobile-actions{ display:none; }
@media (max-width:600px){
  .nav-actions > .connect-pill,
  .nav-actions > .donate-pill{ display:none; }
  .nav-mobile-actions{
    display:flex; flex-direction:column; align-items:stretch; gap:1em;
    margin-top:2.2em; width:min(280px, 80vw);
  }
  .nav-mobile-actions .connect-pill,
  .nav-mobile-actions .donate-pill{
    width:100%; justify-content:center; height:48px;
  }
  .nav-mobile-actions .connect-pill .lbl,
  .nav-mobile-actions .donate-pill .lbl-full{ display:inline; }
}

/* =========================================================
   Marigold scroll garland (desktop: right rail)
   ========================================================= */
.garland-rail{
  position:fixed; top:var(--nav-h); right:14px; bottom:0; width:26px; z-index:400;
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.garland-track{ position:relative; width:2px; height:100%; background:rgba(212,175,55,.3); }
.garland-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--marigold),var(--saffron));
  transition:height .08s linear;
}
.garland-flowers{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:22px; padding-top:4px;
}
.garland-flowers span{
  font-size:13px; opacity:.28; filter:grayscale(1);
  transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.garland-flowers span.lit{ opacity:1; filter:grayscale(0); transform:scale(1.15); }
@media (max-width:900px){ .garland-rail{ display:none; } }

/* =========================================================
   Diya cursor + sparks (desktop only, injected by JS)
   ========================================================= */
.diya-cursor{
  position:fixed; top:0; left:0; width:22px; height:22px; pointer-events:none; z-index:9999;
  transform:translate(-50%,-70%);
  filter:drop-shadow(0 0 6px rgba(232, 163, 23,.85)) drop-shadow(0 0 14px rgba(232, 103, 30,.5));
  will-change:transform;
}
.spark{
  position:fixed; top:0; left:0; width:5px; height:5px; border-radius:50% 50% 50% 4px;
  background:var(--marigold); pointer-events:none; z-index:9998;
  animation:spark-rise .8s ease-out forwards;
}
.spark:nth-of-type(odd){ background:var(--lotus); border-radius:4px 50% 50% 50%; }
@keyframes spark-rise{
  0%{ opacity:.9; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--dx,0px),-26px) scale(.3); }
}
@media (hover:none), (pointer:coarse){
  .diya-cursor, .spark{ display:none !important; }
}
/* Robust, site-wide native-cursor hiding: a single rule beats per-element
   inline overrides and also covers elements added later (lightbox, embeds, etc). */
html.custom-cursor-on, html.custom-cursor-on *{ cursor:none !important; }

/* =========================================================
   Temple door / curtain intro (3D hinge or fabric sweep)
   ========================================================= */
.door-intro{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 103, 30,.18), transparent 60%),
    var(--ink-2);
  perspective:2600px;
}
.door-scene{
  display:flex; flex-direction:column; align-items:center;
  width:min(1000px, 92vw);
}

/* Carved pediment / toran sitting above the doors, so the scene reads as
   an actual temple entrance rather than a floating rectangle. */
.door-pediment{
  width:104%; height:64px; margin-bottom:-14px; z-index:1;
  border-radius:220px 220px 0 0 / 60px 60px 0 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.35), transparent 70%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 45%, #8a661f 100%);
  box-shadow:0 -2px 0 1px rgba(0,0,0,.3), 0 10px 30px -6px rgba(0,0,0,.7);
  position:relative;
}
.door-pediment::before{
  content:""; position:absolute; left:50%; top:38px; transform:translateX(-50%);
  width:20px; height:26px; border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,var(--gold-light),#8a661f);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}

.door-frame{
  position:relative; width:100%; height:min(88vh, 860px);
  display:flex; transform-style:preserve-3d;
  border-radius:210px 210px 8px 8px / 118px 118px 8px 8px;
  overflow:hidden; z-index:2;
  box-shadow:0 0 0 9px #140503, 0 0 0 12px rgba(212,175,55,.6), 0 60px 140px -40px rgba(0,0,0,.9);
}

/* Warm light bleeding through the seam right as the doors crack open */
.door-seam-glow{
  position:absolute; top:0; bottom:0; left:50%; width:140px; margin-left:-70px; z-index:1;
  background:radial-gradient(ellipse at center, rgba(232, 163, 23,.9), rgba(232, 163, 23,.15) 45%, transparent 72%);
  opacity:0; transition:opacity 1.4s ease;
  pointer-events:none;
}
.door-frame.opening .door-seam-glow{ opacity:1; transition-delay:.15s; }

.door-intro .leaf{
  flex:1; position:relative; overflow:hidden;
  transition:transform 3.1s cubic-bezier(.76,0,.18,1);
  transform-style:preserve-3d;
}
.door-intro .leaf.left{ transform-origin:left center; }
.door-intro .leaf.right{ transform-origin:right center; }

/* --- Style: carved wooden doors (default) ---
   Studs sit in two fixed, evenly-spaced columns per leaf (real hardware
   rows) rendered as background radial-gradients rather than randomly
   scattered elements, so the panel reads as designed, not decorated. */
.door-frame.style-doors .leaf{
  --stud: radial-gradient(circle 5px at center, var(--gold-light) 0%, var(--gold) 55%, #5c421a 100%);
  background-image:
    var(--stud), var(--stud), var(--stud), var(--stud), var(--stud),
    var(--stud), var(--stud), var(--stud), var(--stud), var(--stud),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(178deg, rgba(255,255,255,.025) 0 60px, rgba(0,0,0,.05) 60px 130px),
    radial-gradient(ellipse 340px 220px at 20% 12%, rgba(0,0,0,.22), transparent 60%),
    radial-gradient(ellipse 340px 220px at 82% 90%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(100deg,#4e1f16,#2c0f09 45%,#4e1f16 100%);
  background-position:
    18% 12%, 82% 12%, 18% 32%, 82% 32%, 18% 52%,
    82% 52%, 18% 72%, 82% 72%, 18% 90%, 82% 90%,
    0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 70px rgba(0,0,0,.6), inset 0 0 0 2px rgba(212,175,55,.25);
}
.door-frame.style-doors .leaf::before{
  content:""; position:absolute; inset:26px;
  border:2px solid rgba(212,175,55,.5);
  border-radius:2px;
  box-shadow:inset 0 0 0 9px rgba(0,0,0,.2), inset 0 2px 14px rgba(0,0,0,.5), inset 0 -2px 10px rgba(255,255,255,.04);
}
.door-frame.style-doors .leaf::after{
  content:""; position:absolute; inset:58px;
  border:1px solid rgba(212,175,55,.32);
  background:
    radial-gradient(circle at 50% 50%, rgba(212,175,55,.05), transparent 55%);
}
.door-frame.style-doors .ring{
  position:absolute; top:50%; width:58px; height:58px; transform:translateY(-50%);
  border-radius:50%;
}
.door-frame.style-doors .ring::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--gold-light), transparent 40%), radial-gradient(circle at 62% 68%, #4a350f, transparent 55%);
  box-shadow:0 3px 10px rgba(0,0,0,.6), inset 0 0 0 3px #8a661f;
}
.door-frame.style-doors .ring::after{
  content:""; position:absolute; inset:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2c1c07, #140b03 70%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8);
}
.door-frame.style-doors .leaf.left .ring{ right:24px; }
.door-frame.style-doors .leaf.right .ring{ left:24px; }
.door-frame.style-doors .leaf.left{ box-shadow:inset -22px 0 44px rgba(0,0,0,.55); }
.door-frame.style-doors .leaf.right{ box-shadow:inset 22px 0 44px rgba(0,0,0,.55); }

/* --- Style: velvet curtains (alternate) --- */
.door-frame.style-curtain .leaf{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.32) 0 10px, rgba(255,255,255,.05) 10px 16px,
      rgba(0,0,0,.14) 16px 30px, rgba(255,255,255,.02) 30px 42px),
    radial-gradient(ellipse 500px 900px at 50% -10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(100deg,#63101f,#3a0710 50%,#63101f 100%);
  box-shadow:inset 0 0 100px rgba(0,0,0,.65);
}
.door-frame.style-curtain .leaf::before{
  content:""; position:absolute; left:0; right:0; top:0; height:50px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 3px, transparent 3px 22px),
    linear-gradient(180deg, var(--gold-light), var(--gold) 60%, #8a661f);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.door-frame.style-curtain .leaf::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34px;
  background:repeating-linear-gradient(115deg, var(--gold) 0 3px, transparent 3px 15px);
  opacity:.9;
}

/* --- Style: real carved-gold door photograph ---
   Both leaves reference the SAME full photo. background-size:auto 100%
   scales it to the frame's height without distortion; anchoring one leaf
   to its left edge and the other to its right edge naturally shows each
   leaf's own outer slice (elephant carving) while the photo's center
   (the deity) stays hidden behind the seam until the doors swing open. */
.door-frame.style-photo .leaf{
  background-image:url('assets/door-gold.jpg');
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-color:#1a0f04;
}
.door-frame.style-photo .leaf.left{ background-position:left center; box-shadow:inset -30px 0 55px rgba(0,0,0,.55); }
.door-frame.style-photo .leaf.right{ background-position:right center; box-shadow:inset 30px 0 55px rgba(0,0,0,.55); }
.door-frame.style-photo .leaf::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.3), transparent 18% 82%, rgba(0,0,0,.35));
}
.door-frame.style-photo .ring{
  position:absolute; top:50%; width:44px; height:44px; transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3cf, #d9ac3f 55%, #6f4f17 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.65), inset 0 0 0 3px rgba(0,0,0,.35);
}
.door-frame.style-photo .leaf.left .ring{ right:18px; }
.door-frame.style-photo .leaf.right .ring{ left:18px; }

.carve{ display:none; } /* legacy selector kept harmless if referenced elsewhere */

.door-intro .center-glow{
  position:absolute; inset:0; margin:auto; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
  color:var(--gold-light); font-family:var(--font-sacred);
  font-size:clamp(1.6rem,4.4vw,2.6rem); text-align:center; pointer-events:none;
  opacity:1; transition:opacity .7s ease; text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.door-intro .center-glow small{
  font-family:var(--font-body); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--saffron);
}

.door-frame.opening .leaf.left{ transform:rotateY(-108deg); }
.door-frame.opening .leaf.right{ transform:rotateY(108deg); }
.door-intro.opening .center-glow{ opacity:0; }
.door-intro.hidden{ display:none; }
.door-skip{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:4; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory-dim); border:1px solid rgba(255, 248, 236,.3); padding:.6em 1.3em;
  border-radius:20px; background:rgba(0,0,0,.25); cursor:pointer;
}
@media (max-width:700px){
  .door-frame{ border-radius:120px 120px 8px 8px / 74px 74px 8px 8px; }
  .door-pediment{ height:44px; border-radius:150px 150px 0 0 / 40px 40px 0 0; }
  .door-frame.style-doors .ring{ width:44px; height:44px; }
}

/* =========================================================
   Rangoli divider
   ========================================================= */
.rangoli-divider{
  display:flex; justify-content:center; padding:10px 0 0;
  opacity:0; transform:scale(.7) rotate(-8deg);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.rangoli-divider.in-view{ opacity:1; transform:scale(1) rotate(0deg); }
.rangoli-divider svg{ width:64px; height:64px; }
.rangoli-divider path,.rangoli-divider circle{ stroke:var(--gold); }

/* =========================================================
   Hero (home)
   ========================================================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 103, 30,.16), transparent 55%),
    linear-gradient(180deg,var(--ink-2), var(--ink) 60%);
}
.hero-bg-pattern{
  position:absolute; inset:0; opacity:.35; mix-blend-mode:screen;
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,.05) 0 2px, transparent 2px 26px);
}
.hero-arch{
  position:relative; z-index:2; margin:0 auto; margin-top:calc(var(--nav-h) + 26px);
  width:min(460px, 82vw);
  border:1px solid var(--gold);
  border-radius:220px 220px 8px 8px;
  padding:10px;
  box-shadow:0 0 0 1px rgba(212,175,55,.15), 0 40px 90px -30px rgba(0,0,0,.8);
}
.hero-arch-inner{
  border:1px solid rgba(212,175,55,.5);
  border-radius:210px 210px 4px 4px;
  overflow:hidden;
  position:relative;
  aspect-ratio:3 / 4;
}
.hero-arch-inner img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
}
.hero-arch-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36, 17, 8,0) 62%, rgba(20,6,8,.55) 100%);
}
.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-particles i{
  position:absolute; bottom:-10%; display:block; border-radius:50%;
  background:radial-gradient(circle, var(--marigold), transparent 70%);
  opacity:.6; animation:float-up linear infinite;
}
@keyframes float-up{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-115vh) translateX(var(--drift,20px)); opacity:0; }
}
.hero-copy{ position:relative; z-index:2; text-align:center; margin-top:34px; }
.hero-copy .eyebrow{ justify-content:center; display:flex; }
.hero-copy h1{
  font-size:clamp(2.4rem,6vw,4.2rem);
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 60%, #a97e22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy .hero-subtitle{
  font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:500; color:var(--saffron);
  margin:-.2em 0 .9em; letter-spacing:.02em;
}
.hero-copy p{ max-width:660px; margin-inline:auto; }
.hero-cta{ display:flex; gap:1em; justify-content:center; flex-wrap:wrap; margin-top:1.6em; padding-bottom:70px; }
.bell-scroll{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ivory-dim);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  animation:bell-sway 2.6s ease-in-out infinite;
}
@keyframes bell-sway{ 0%,100%{ transform:translateX(-50%) rotate(-4deg); } 50%{ transform:translateX(-50%) rotate(4deg); } }

/* =========================================================
   Sacred journey / manuscript cards
   ========================================================= */
.manuscript-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;
}
@media (max-width:760px){ .manuscript-grid{ grid-template-columns:1fr; } }
.leaf-card{
  position:relative; padding:2.2rem 2rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(212,175,55,.4);
  border-bottom:4px solid var(--gold);
  border-radius:4px 22px 4px 22px;
  box-shadow:0 16px 34px rgba(20,5,10,.12);
}
.leaf-card::before{
  content:""; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.22); border-radius:2px 18px 2px 18px; pointer-events:none;
}
.leaf-card .num{
  font-family:var(--font-sacred); color:var(--saffron); font-size:1.6rem; display:block; margin-bottom:.3em;
}
.leaf-card h3{ font-size:1.5rem; }

.quote-block{
  text-align:center; max-width:760px; margin:4rem auto 0; padding:2.6rem 1rem;
  border-top:1px solid rgba(212,175,55,.4); border-bottom:1px solid rgba(212,175,55,.4);
}
.quote-block .sacred{ font-size:clamp(1.3rem,3vw,1.8rem); color:var(--crimson-2); display:block; margin-bottom:.5em; white-space:pre-line; }
.quote-block cite{ font-style:normal; color:var(--saffron); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }

/* =========================================================
   Gallery masonry
   ========================================================= */
.masonry{
  columns:3 260px; column-gap:1.1rem;
}
@media (max-width:700px){ .masonry{ columns:1 260px; } }
.masonry figure{
  margin:0 0 1.1rem; break-inside:avoid; position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,.35); border-radius:2px;
}
.masonry figure img{ width:100%; display:block; transition:transform .6s ease, filter .6s ease; }
.masonry figure:hover img{ transform:scale(1.06); filter:saturate(1.15); }
.masonry figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9em 1em;
  background:linear-gradient(0deg, rgba(20,6,8,.92), transparent);
  font-size:.78rem; letter-spacing:.06em; color:var(--gold-light);
  opacity:0; transform:translateY(8px); transition:.35s ease;
}
.masonry figure:hover figcaption{ opacity:1; transform:translateY(0); }
.masonry figure.feature{ grid-column:span 2; }

.lightbox{
  position:fixed; inset:0; background:rgba(10,3,4,.94); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:5vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-height:90vh; max-width:100%; border:1px solid var(--gold); }
.lightbox-close{
  position:absolute; top:22px; right:26px; color:var(--ivory); font-size:1.8rem; cursor:pointer;
  border:1px solid rgba(255, 248, 236,.4); width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
}

/* Instagram embed block */
.insta-panel{
  border:1px dashed rgba(212,175,55,.5); border-radius:6px; padding:2.4rem;
  text-align:center; background:rgba(255,255,255,.6);
}
.insta-embed-frame{
  border:1px solid rgba(212,175,55,.45); border-radius:6px; padding:1.4rem;
  margin-bottom:1.8rem; min-height:220px;
  background:
    linear-gradient(180deg, rgba(212,175,55,.08), transparent 55%),
    rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.2);
}
.insta-fallback{ display:flex; flex-direction:column; align-items:center; gap:1em; }

/* =========================================================
   Festival cards (scroll invitations)
   ========================================================= */
.festival-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.6rem; }
.scroll-card{
  position:relative; padding:2rem 1.8rem 2.2rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(212,175,55,.4); border-bottom:4px solid var(--gold); border-radius:4px;
  box-shadow:0 16px 34px rgba(20,5,10,.12);
}
.scroll-card::before, .scroll-card::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); width:34px; height:10px;
  background:var(--gold); border-radius:3px; box-shadow:0 0 0 2px var(--ivory);
}
.scroll-card::before{ top:-6px; }
.scroll-card::after{ bottom:-6px; }
.scroll-card .date{ color:var(--saffron); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.5em; }
.scroll-card h3{ font-size:1.5rem; }

/* =========================================================
   Seva / donate offerings
   ========================================================= */
.seva-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; }
.thali{
  padding:2rem 1.6rem; text-align:center;
  border:1px solid rgba(212,175,55,.4);
  background:radial-gradient(circle at 50% 0%, rgba(232, 163, 23,.14), transparent 60%), rgba(255,255,255,.9);
  border-radius:50% 50% 6px 6px / 22% 22% 6px 6px;
  box-shadow:0 16px 34px rgba(20,5,10,.1);
}
.thali .amt{ font-family:var(--font-display); font-size:2.1rem; color:var(--crimson-2); display:block; margin:.2em 0; }
.thali h4{ margin-bottom:.2em; font-size:1.15rem; }
.thali p{ font-size:.86rem; }

/* =========================================================
   Blessing / mandala
   ========================================================= */
.blessing-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; text-align:center; }
.mandala{ width:170px; height:170px; cursor:pointer; transition:transform .6s ease; }
.mandala.spin{ animation:mandala-spin 1.1s ease-out; }
@keyframes mandala-spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.mandala circle,.mandala path{ stroke:var(--gold); }
.blessing-card{
  max-width:560px; padding:2rem 2.2rem; border:1px solid rgba(212,175,55,.4);
  background:rgba(255,255,255,.9); border-radius:4px; min-height:120px;
  display:flex; flex-direction:column; justify-content:center; gap:.6em;
  box-shadow:0 16px 34px rgba(20,5,10,.1);
}
.blessing-card .sacred{ font-size:1.35rem; color:var(--crimson-2); }
.blessing-card .translation{ font-size:.88rem; color:var(--plum-dim); }
.blessing-actions{ display:flex; gap:.8em; justify-content:center; }

/* =========================================================
   Prayer counter
   ========================================================= */
.prayer-panel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2.4rem;
  padding:2.4rem; border:1px solid rgba(212,175,55,.4); border-radius:6px;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  box-shadow:0 16px 34px rgba(20,5,10,.1);
}
.prayer-action{ text-align:center; }
.prayer-action button{
  width:74px; height:74px; border-radius:50%; border:1px solid var(--gold);
  background:radial-gradient(circle, rgba(232, 163, 23,.22), transparent 70%);
  font-size:1.8rem; cursor:pointer; color:var(--crimson-2); transition:transform .25s ease;
}
.prayer-action button:active{ transform:scale(.88); }
.prayer-action .label{ display:block; margin-top:.6em; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plum-dim); }
.prayer-count{ text-align:center; }
.prayer-count .n{ font-family:var(--font-display); font-size:2.6rem; color:var(--crimson-2); display:block; }
.prayer-count .label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--plum-dim); }

/* =========================================================
   Testimonials
   ========================================================= */
.scrolls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; }
.wax-card{
  position:relative; padding:2rem 1.8rem; background:rgba(255,255,255,.92);
  border:1px solid rgba(212,175,55,.4); border-bottom:4px solid var(--gold); border-radius:2px;
  box-shadow:0 16px 34px rgba(20,5,10,.12);
}
.wax-card .seal{
  position:absolute; top:-16px; right:22px; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--lotus), #611221 70%);
  border:1px solid rgba(0,0,0,.3);
}
.wax-card p{ font-style:italic; color:var(--plum-dim); }
.wax-card .who{ font-style:normal; color:var(--saffron); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }

/* =========================================================
   Forms (contact)
   ========================================================= */
.field{ margin-bottom:1.3rem; text-align:left; }
.field label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plum-dim); margin-bottom:.5em; }
.field input,.field textarea,.field select{
  width:100%; background:rgba(255,255,255,.75); border:1px solid rgba(212,175,55,.45);
  color:var(--plum-text); padding:.85em 1em; font-family:var(--font-body); font-size:.95rem; border-radius:2px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); outline:none; }

.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
.info-list li{ display:flex; gap:1em; align-items:flex-start; }
.info-list .ic{ width:42px; height:42px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; flex:none; color:var(--crimson-2); background:rgba(255,255,255,.6); }

/* =========================================================
   Footer courtyard
   ========================================================= */
.footer{
  position:relative; padding:90px 0 40px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 103, 30,.14), transparent 60%),
    linear-gradient(135deg, var(--crimson-2), var(--ink) 60%);
  border-top:3px solid var(--gold);
}
.lamp-row{ display:flex; justify-content:center; gap:26px; margin-bottom:2.6rem; }
.lamp{ width:2px; height:34px; background:linear-gradient(180deg,var(--gold),transparent); position:relative; }
.lamp::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--marigold);
  box-shadow:0 0 12px 4px rgba(232, 163, 23,.7);
  animation:flicker 2.4s ease-in-out infinite;
}
.lamp:nth-child(even)::after{ animation-delay:.6s; }
@keyframes flicker{ 0%,100%{ opacity:1; transform:translateX(-50%) scale(1);} 50%{ opacity:.7; transform:translateX(-50%) scale(.85);} }

.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:1.1rem; color:var(--gold-light); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7em; }
.footer-links a{ color:var(--ivory-dim); font-size:.9rem; }
.footer-links a:hover{ color:var(--gold-light); }
.footer-bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(212,175,55,.18);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em;
  font-size:.78rem; color:var(--ivory-dim); letter-spacing:.03em;
}

/* =========================================================
   WhatsApp / Instagram floating buttons
   ========================================================= */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:600;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#1f7a5c; color:#fff; box-shadow:0 10px 26px -6px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.2);
}
.wa-float:hover{ transform:translateY(-3px); }
.ig-float{
  position:fixed; right:22px; bottom:88px; z-index:600;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color:#fff; box-shadow:0 10px 26px -6px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.2);
}
.ig-float:hover{ transform:translateY(-3px); }
@media (max-width:900px){
  .wa-float{ right:16px; bottom:16px; }
  .ig-float{ right:16px; bottom:82px; }
}

/* =========================================================
   Festival ribbon
   ========================================================= */
.festival-ribbon{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:490;
  text-align:center; padding:.55em 1em; font-size:.82rem; letter-spacing:.05em;
  background:linear-gradient(90deg, var(--crimson), var(--lotus), var(--crimson));
  color:var(--ivory); display:none;
}
body.festival-active .festival-ribbon{ display:block; }
body.festival-active{ --nav-extra:34px; }
body.festival-active .site-nav{ top:0; }

/* page-load fade */
/* Opacity-only on purpose: a `transform` on <body> — even translateY(0) held by
   fill-mode:both — silently makes <body> the containing block for every
   position:fixed element (cursor, nav, WhatsApp button, door intro, garland
   rail), so they stop tracking the real viewport. Keep this transform-free. */
.page-fade{ animation:page-fade .9s ease forwards; }
@keyframes page-fade{ from{ opacity:0; } to{ opacity:1; } }

/* utility */
.center{ text-align:center; }
.mt-lg{ margin-top:3rem; }
.small{ font-size:.85rem; }