/* ==========================================================================
   Ganesh Chaturthi — an immersive darshan  ·  Zillion
   css/ganesh.css   ·   core environment, typography, ceremony UI
   ========================================================================== */

:root{
  --ink:        #06060a;
  --ink-2:      #0a0910;
  --indigo:     #12102a;
  --indigo-2:   #1a1636;
  --gold:       #e8c583;
  --gold-warm:  #f4dcab;
  --amber:      #c98b3a;
  --ember:      #ff9a3c;
  --ivory:      #f6efe3;
  --purple:     #591ecb;
  --purple-lit: #8a5cf0;

  --txt:        rgba(246,239,227,.92);
  --txt-soft:   rgba(246,239,227,.56);
  --txt-faint:  rgba(246,239,227,.34);
  --hair:       rgba(246,239,227,.12);
  --hair-warm:  rgba(232,197,131,.34);

  --font-display:'Plus Jakarta Sans','Neue Montreal','Manrope',-apple-system,sans-serif;
  --font-body:   'Inter','Manrope',-apple-system,sans-serif;
  --font-deva:   'Noto Sans Devanagari','Inter',sans-serif;
  --font-script: 'Dancing Script',cursive;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-soft:   cubic-bezier(.4,.02,.2,1);

  /* written by js/ganesh.js from the live stage geometry */
  --floor-y: 78vh;
  --fig-top: 34vh;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow:hidden;               /* single-screen experience, no page scroll */
  overscroll-behavior:none;
  touch-action:manipulation;
}
body.no-native-cursor,
body.no-native-cursor a,
body.no-native-cursor button{ cursor:none; }

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; }

:focus-visible{
  outline:1px solid var(--hair-warm);
  outline-offset:3px;
  border-radius:6px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ========================================================== environment  */

.stage{ position:fixed; inset:0; overflow:hidden; }

/* deep temple ground — warm charcoal, almost no blue/indigo undertone */
.env-ground{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(201,139,58,.19), transparent 54%),
    radial-gradient(46% 40% at 50% 40%,  rgba(89,30,203,.045), transparent 78%),
    radial-gradient(130% 88% at 50% 4%,  rgba(28,20,14,.7),    transparent 60%),
    linear-gradient(#040404 0%, #070605 44%, #09070a 74%, #0b0808 100%);
  opacity:0;
  transition:opacity 2.4s var(--ease-soft);
}
.env-in .env-ground{ opacity:1; }

/* sanctum arch */
.env-arch,
.env-arch-outer{
  position:absolute; left:50%;
  bottom:calc(100% - var(--floor-y));
  transform:translateX(-50%);
  border:1px solid rgba(232,197,131,.09);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 64% 64% 0 0;
  opacity:0;
  transition:opacity 2.6s var(--ease-soft);
  pointer-events:none;
}
.env-arch{
  width:min(560px,74vw); height:min(600px,64vh);
  background:linear-gradient(to top, rgba(232,197,131,.045), rgba(232,197,131,.01) 46%, transparent 70%);
  box-shadow:0 0 100px rgba(201,139,58,.06) inset;
}
.env-arch-outer{
  width:min(800px,94vw); height:min(720px,74vh);
  border-color:rgba(232,197,131,.05);
}
.env-in .env-arch{ opacity:1; }
.env-in .env-arch-outer{ opacity:.75; }

/* a soft column of light falling through the arch onto the murti — a
   radial taper, not a clip-path polygon: clip-path always crops to a
   crisp edge even on a blurred layer, which read as a pasted-in hard
   rectangle above the crown instead of a soft shaft of light */
.env-beam{
  position:absolute; left:50%; top:-4%;
  width:min(340px,38vw); height:82%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 100% at 50% 0%,
    rgba(255,236,196,.16) 0%, rgba(255,228,178,.08) 32%,
    rgba(232,197,131,.03) 58%, transparent 80%);
  opacity:0;
  transition:opacity 3s var(--ease-soft);
  pointer-events:none;
}
.env-in .env-beam{ opacity:1; }

/* carved stone pillars, flanking the sanctum */
.env-pillar{
  position:absolute; top:6%; bottom:calc(100% - var(--floor-y));
  width:min(11vw,110px);
  opacity:0;
  transition:opacity 2.8s var(--ease-soft);
  pointer-events:none;
}
.env-pillar::before{                /* fluted shaft */
  content:''; position:absolute; inset:0 8% 0 8%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.3) 0 6%, rgba(232,197,131,.05) 6% 9%,
      rgba(0,0,0,.22) 9% 15%),
    linear-gradient(180deg, rgba(38,28,18,.94), rgba(14,10,8,.96) 55%, rgba(8,6,5,.98));
  border-radius:3px;
}
.env-pillar::after{                 /* capital ornament, base catching floor light */
  content:''; position:absolute; inset:0 8% 0 8%;
  background:
    linear-gradient(rgba(232,197,131,.18), rgba(232,197,131,0) 7%),
    linear-gradient(to top, rgba(232,197,131,.14), rgba(232,197,131,0) 9%);
  border-radius:3px;
}
.env-pillar-left{ left:1vw; }
.env-pillar-right{ right:1vw; }
.env-in .env-pillar{ opacity:.88; }

/* the lintel — a carved stone slab spanning the two pillars, so they read
   as one mandap structure (a gateway) instead of two floating columns */
.env-lintel{
  position:absolute; left:1vw; right:1vw; top:6%;
  height:min(3.2vw,28px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20'%3E%3Ccircle cx='9' cy='10' r='4.2' fill='none' stroke='rgba(255,222,168,0.6)' stroke-width='1.3'/%3E%3Ccircle cx='9' cy='10' r='1.3' fill='rgba(255,222,168,0.6)'/%3E%3Crect x='23.5' y='5.5' width='9' height='9' fill='rgba(255,222,168,0.5)' stroke='rgba(255,222,168,0.7)' stroke-width='0.8' transform='rotate(45 28 10)'/%3E%3C/svg%3E") repeat-x center / 36px 100%,
    linear-gradient(180deg, rgba(232,197,131,.16), rgba(232,197,131,.02) 65%),
    linear-gradient(180deg, rgba(40,29,19,.96), rgba(14,10,8,.98));
  border-radius:2px;
  box-shadow:0 3px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(232,197,131,.2), inset 0 -1px 0 rgba(0,0,0,.5);
  opacity:0;
  transition:opacity 2.8s var(--ease-soft);
  pointer-events:none;
}
.env-in .env-lintel{ opacity:.9; }

/* temple bells, hanging either side of the murti at roughly ear height —
   positioned from the same --fig-top the canvas figure uses, so they
   track it at any viewport size without needing JS of their own */
.env-bell{
  position:absolute; top:calc(var(--fig-top) + 66px);
  width:18px; height:40px;
  opacity:0;
  transition:opacity 2.6s var(--ease-soft);
  pointer-events:none;
}
.env-in .env-bell{ opacity:.92; }
.env-bell::before{                  /* hanging chain */
  content:''; position:absolute; left:50%; top:0; width:1px; height:11px;
  background:linear-gradient(rgba(232,197,131,.6), rgba(232,197,131,.15));
  transform:translateX(-50%);
}
.env-bell::after{                   /* the bell's dome */
  content:''; position:absolute; left:1px; right:1px; top:10px; height:20px;
  background:linear-gradient(180deg, rgba(240,208,150,.95), rgba(170,120,60,.92) 55%, rgba(95,60,26,.95));
  border-radius:50% 50% 5px 5px / 68% 68% 10% 10%;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.4), inset 2px 2px 3px rgba(255,235,190,.5), 0 3px 10px rgba(0,0,0,.45);
}
.env-bell i{                        /* the clapper */
  position:absolute; left:50%; bottom:2px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9bf, #a9752f 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.env-bell-left{ left:calc(50% - min(250px,33vw)); }
.env-bell-right{ right:calc(50% - min(250px,33vw)); }

/* small ambient diyas set into the pillars — always warm, non-interactive.
   Each one is a tiny brass bowl (::before) topped by a flame (::after) that
   ignites in place once the environment fades in, then flickers forever. */
.env-lamp{
  position:absolute; width:14px; height:16px;
  opacity:0;
  transition:opacity .4s linear;
  pointer-events:none;
}
.env-in .env-lamp{ opacity:1; }
.env-lamp::before{                  /* bowl */
  content:''; position:absolute; left:1px; right:1px; bottom:0; height:5px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(158,112,58,.95), rgba(64,42,20,.96));
  box-shadow:inset 0 1px 1px rgba(255,214,150,.3), 0 1px 2px rgba(0,0,0,.5);
}
.env-lamp::after{                   /* flame */
  content:''; position:absolute; left:50%; bottom:4px; width:6px; height:11px;
  transform-origin:50% 100%;
  border-radius:50% 50% 50% 50% / 68% 68% 32% 32%;
  background:radial-gradient(circle at 50% 72%, #fff6da 0%, #ffd27a 36%, #ff9a3c 66%, transparent 100%);
  box-shadow:0 0 10px 3px rgba(255,160,70,.5), 0 0 28px 11px rgba(255,140,50,.2);
  animation-name:diya-ignite, diya-flicker;
  animation-duration:.85s, 3.2s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1), ease-in-out;
  animation-iteration-count:1, infinite;
  animation-fill-mode:backwards, none;
}
.env-lamp-1{ left:6.5vw; top:38%; }
.env-lamp-2{ right:6.5vw; top:38%; }
.env-lamp-3{ left:3vw; top:60%; }
.env-lamp-4{ right:3vw; top:60%; }
.env-lamp-1::after{ animation-delay:.2s, 1.05s; }
.env-lamp-2::after{ animation-delay:1.1s, 1.95s; }
.env-lamp-3::after{ animation-delay:1.8s, 2.65s; }
.env-lamp-4::after{ animation-delay:.6s, 1.45s; }
@keyframes diya-ignite{
  0%{ transform:translateX(-50%) scaleY(0); opacity:0; }
  55%{ transform:translateX(-50%) scaleY(1.2); opacity:1; }
  100%{ transform:translateX(-50%) scaleY(1); opacity:1; }
}
@keyframes diya-flicker{
  0%,100%{ opacity:.82; transform:translateX(-50%) scaleY(1) rotate(0deg); }
  30%{ opacity:1;  transform:translateX(-50%) scaleY(1.1) rotate(-3deg); }
  55%{ opacity:.66; transform:translateX(-50%) scaleY(.9) rotate(3deg); }
  78%{ opacity:.95; transform:translateX(-50%) scaleY(1.05) rotate(-2deg); }
}

/* palm silhouettes, low in the corners for depth */
.env-palm{
  position:absolute; bottom:calc(100% - var(--floor-y) - 4%);
  width:min(16vw,170px); height:min(30vh,300px);
  opacity:0;
  transition:opacity 2.8s var(--ease-soft);
  pointer-events:none;
}
.env-palm::before,.env-palm::after{
  content:''; position:absolute; bottom:0; left:50%;
  width:64%; height:78%;
  background:linear-gradient(180deg, rgba(6,10,6,.9), rgba(4,6,4,.75));
  border-radius:0% 100% 10% 100% / 0% 100% 4% 100%;
  transform-origin:bottom center;
}
.env-palm::before{ transform:translateX(-50%) rotate(-18deg); }
.env-palm::after{  transform:translateX(-50%) rotate(14deg) scaleX(-1); }
.env-palm-left{ left:-1vw; }
.env-palm-right{ right:-1vw; transform:scaleX(-1); }
.env-in .env-palm{ opacity:.55; }

/* floor plane + reflection sheen */
.env-floor{
  position:absolute; left:0; right:0;
  top:var(--floor-y); bottom:0;
  background:
    linear-gradient(to bottom, rgba(232,197,131,.075), rgba(232,197,131,.018) 24%, transparent 58%),
    radial-gradient(58% 92% at 50% 0%, rgba(201,139,58,.13), transparent 68%);
  opacity:0;
  transition:opacity 2.4s var(--ease-soft);
}
.env-floor::before{                 /* the mandap's lit front edge — a visible lip
                                        the murti and diyas all read as standing on,
                                        rather than a bare gradient fading into void */
  content:''; position:absolute; left:6%; right:6%; top:-2px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,
    transparent, rgba(232,197,131,.55) 14%, rgba(255,226,174,.9) 50%,
    rgba(232,197,131,.55) 86%, transparent);
  box-shadow:0 1px 10px rgba(201,139,58,.55), 0 -8px 26px -10px rgba(232,197,131,.4);
}
.env-floor::after{                  /* faint horizontal reflection streaks */
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  background:repeating-linear-gradient(180deg,
    rgba(255,210,150,.02) 0px, rgba(255,210,150,.02) 1px,
    transparent 1px, transparent 13px);
  mix-blend-mode:screen;
}
.env-in .env-floor{ opacity:1; }

/* incense haze */
.env-haze{
  position:absolute; inset:-10%;
  background:
    radial-gradient(28% 34% at 24% 62%, rgba(232,197,131,.06), transparent 70%),
    radial-gradient(24% 30% at 76% 54%, rgba(232,197,131,.05),  transparent 70%),
    radial-gradient(34% 26% at 52% 30%, rgba(246,239,227,.036), transparent 72%);
  filter:blur(14px);
  opacity:0;
  transition:opacity 3s var(--ease-soft);
  animation:haze-drift 46s ease-in-out infinite alternate;
}
.env-in .env-haze{ opacity:1; }
@keyframes haze-drift{
  0%   { transform:translate3d(-1.6%,1%,0) scale(1.02); }
  100% { transform:translate3d(2%,-1.4%,0) scale(1.07); }
}

/* vignette + film grain, present from the very first frame */
.env-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(108% 82% at 50% 46%, transparent 42%, rgba(3,3,6,.62) 84%, rgba(2,2,4,.9) 100%);
}
.env-grain{
  position:absolute; inset:-50%;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7.5s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate3d(0,0,0); }
  20%{ transform:translate3d(-1.4%,1.2%,0); }
  40%{ transform:translate3d(1.6%,-1%,0); }
  60%{ transform:translate3d(-1%,-1.6%,0); }
  80%{ transform:translate3d(1.2%,1.4%,0); }
}

/* the one canvas: aura, Ganesha particles, diyas, flames, petals, motes */
#scene{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
}

/* ======================================================= bottom-right ui */

.controls-top{
  position:fixed; bottom:120px; right:30px; z-index:40;
  display:flex; align-items:center; gap:18px;
  opacity:0; transform:translateY(6px);
  transition:opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.ui-in .controls-top{ opacity:1; transform:none; }

.ambient-wrap{
  position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.ambient-toggle{
  position:relative; z-index:1;
  width:40px; height:40px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--hair-warm);
  background:rgba(232,197,131,.05);
  color:var(--gold-warm);
  cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .3s var(--ease);
}
.ambient-toggle:hover{ background:rgba(232,197,131,.11); box-shadow:0 0 30px -10px rgba(201,139,58,.6); }
.ambient-toggle:active{ transform:scale(.94); }
.ambient-toggle.is-muted{ color:var(--txt-faint); border-color:var(--hair); }
.ambient-icon{ display:none; align-items:center; justify-content:center; }
.ambient-icon svg{ width:17px; height:17px; }
.ambient-icon--on{ display:flex; }
.ambient-toggle.is-muted .ambient-icon--on{ display:none; }
.ambient-toggle.is-muted .ambient-icon--off{ display:flex; }

/* two rings around the icon, reacting to the ambient track itself
   (driven by a Web Audio analyser, one ring per frequency band) — so it
   reads as the source of the sound rather than just a mute switch */
.ambient-wave{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease-soft);
}
.ambient-wave.is-active{ opacity:1; }
.ambient-wave .ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(232,197,131,.6);
  --amp:0;
  transform:scale(calc(1 + var(--amp) * .5));
  opacity:calc(.28 + var(--amp) * .6);
  box-shadow:0 0 calc(3px + var(--amp) * 16px) rgba(232,197,131, calc(.25 + var(--amp) * .45));
  transition:transform .09s linear, opacity .09s linear, box-shadow .09s linear;
}
.ambient-wave .ring-2{ inset:-9px; border-width:1px; }

.visit{
  min-height:44px; display:flex; align-items:center;
  font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-faint);
  text-decoration:none;
  transition:color .5s var(--ease);
}
.visit:hover{ color:var(--gold-warm); }

/* ========================================================== darshan copy */

.darshan{
  position:fixed; left:0; right:0; top:0; z-index:20;
  padding:clamp(20px,4.4vh,44px) 24px 0;
  text-align:center;
  pointer-events:none;
}
.darshan > *{
  opacity:0; transform:translateY(14px);
  transition:opacity 1.8s var(--ease-soft), transform 1.8s var(--ease-soft);
}
.copy-in .darshan > *{ opacity:1; transform:none; }
.copy-in .darshan .eyebrow{ transition-delay:0s; }
.copy-in .darshan .deva{     transition-delay:.34s; }
.copy-in .darshan .title{    transition-delay:.62s; }

.eyebrow{
  margin:0 0 14px;
  font-size:10px; font-weight:500;
  letter-spacing:.46em; text-transform:uppercase;
  color:rgba(232,197,131,.62);
}
.deva{
  margin:24px 0 0;
  font-family:var(--font-deva);
  font-size:clamp(24px,3.3vw,38px);
  font-weight:500; line-height:1.32;
  letter-spacing:.012em;
  color:var(--gold-warm);
  text-shadow:0 0 44px rgba(201,139,58,.4);
}
.title{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-size:clamp(12px,1.2vw,15px);
  font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--txt);
}

/* atmospheric side blessings — a quiet script, white, never competing */
.atmos{
  position:fixed; top:50%; z-index:15;
  width:min(22ch,24vw);
  transform:translateY(-50%);
  margin:0;
  font-family:var(--font-script);
  font-weight:600;
  font-size:19px; line-height:1.55; letter-spacing:.01em;
  color:rgba(255,255,255,.78);
  text-shadow:0 0 22px rgba(255,255,255,.16);
  opacity:0;
  pointer-events:none;
  transition:opacity 2.2s var(--ease-soft) .4s;
}
.copy-in .atmos{ opacity:1; }
.atmos-left{ left:clamp(18px,3.4vw,54px); text-align:left; }
.atmos-right{ right:clamp(18px,3.4vw,54px); text-align:right; }

/* ========================================================== ceremony bar */

.ceremony{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  /* .acts is the only flow child now — the credit line used to live here
     too, and every time its logo changed size it silently pushed these
     icons up or down with it (a bottom-anchored, content-hugging column
     couples ALL its children's positions together). .signature now lives
     at position:fixed in its own corner (see below), so this bar's own
     padding is the one and only thing that places the icons, and nothing
     else can ever move them again. */
  padding:0 20px calc(52px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.acts{
  display:flex; align-items:stretch; justify-content:center;
  gap:0;
  padding:0 4px;
  opacity:0; transform:translateY(16px);
  transition:opacity 1.6s var(--ease-soft), transform 1.6s var(--ease-soft), filter .7s var(--ease);
  pointer-events:none;
}
.ui-in .acts{ opacity:1; transform:none; pointer-events:auto; }
.dimmed .acts{ opacity:.3; filter:saturate(.5); pointer-events:none; }

/* a ritual menu, not a nav bar: no pills, no cards — just a quiet
   invitation, separated by thin gold hairlines */
.divider{
  align-self:center;
  width:1px; height:30px;
  background:linear-gradient(rgba(232,197,131,0), rgba(232,197,131,.16), rgba(232,197,131,0));
}
.act{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:44px; min-width:44px; padding:8px 22px;
  color:var(--txt-soft);
  cursor:pointer;
  transition:color .6s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
}
.act .glyph{
  font-size:17px; line-height:1;
  filter:saturate(.55) brightness(1.02);
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.act .label{
  font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  white-space:nowrap;
}
.act .sub{
  font-size:9px; letter-spacing:.04em; text-transform:none;
  color:var(--txt-faint);
  white-space:nowrap;
  opacity:.72;
  transition:opacity .5s var(--ease), color .5s var(--ease);
}
.act:hover:not([disabled]),
.act:focus-visible:not([disabled]){
  color:var(--gold-warm);
  transform:translateY(-2px);
}
.act:hover:not([disabled]) .glyph{ filter:saturate(1) brightness(1.16); transform:scale(1.08); }
.act:hover:not([disabled]) .sub{ opacity:1; color:var(--txt-soft); }
.act:active:not([disabled]){ transform:translateY(0); }
.act.is-active{ color:var(--gold-warm); }
.act.is-active .sub{ opacity:1; color:rgba(232,197,131,.7); }
.act[disabled]{
  opacity:.5;
  color:var(--txt-faint);
  cursor:default;
}
.act[disabled] .glyph{ filter:saturate(.3) brightness(.92); }
.act[disabled] .sub{ opacity:.6; }

/* credit line — fixed top-right, entirely outside the ceremony bar's own
   flex column now, so resizing the logo can never move the icons again */
.signature{
  position:fixed; bottom:54px; right:30px; z-index:40;
  max-width:min(46vw,320px);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  text-align:right;
  color:var(--txt-faint);
  opacity:0; transform:translateY(6px);
  margin:0;
  transition:opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
  pointer-events:none;
}
.ui-in .signature{ opacity:1; transform:none; }
.signature .heart{ color:#e0708a; }
.signature-logo{
  display:inline-block;
  height:48px; width:auto;
  vertical-align:middle;
  margin:-3px 0 0 5px;
  filter:drop-shadow(0 1px 10px rgba(139,92,246,.4));
}

/* skip the opening, appears only mid-intro */
.skip{
  position:fixed; right:26px; bottom:26px; z-index:40;
  padding:10px 14px; min-height:44px;
  display:flex; align-items:center;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,239,227,.26);
  cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity 1.4s var(--ease-soft), color .5s var(--ease);
}
.skip.show{ opacity:1; pointer-events:auto; }
.skip:hover{ color:rgba(232,197,131,.7); }
.ui-in .skip{ opacity:0; pointer-events:none; }

/* offering toast */
.toast{
  position:fixed; left:50%; z-index:35;
  bottom:calc(100% - var(--floor-y) - 24px);
  transform:translate(-50%,10px);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(246,239,227,.74);
  text-shadow:0 0 30px rgba(201,139,58,.6);
  opacity:0; pointer-events:none;
  transition:opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ========================================================== overlays     */

.veil{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(5,5,9,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  backdrop-filter:blur(22px) saturate(1.1);
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease-soft);
}
.veil.open{ opacity:1; pointer-events:auto; }

.panel{
  position:relative;
  width:100%; max-width:520px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:38px 38px 34px;
  border:1px solid var(--hair);
  border-radius:24px;
  background:linear-gradient(rgba(20,17,30,.92), rgba(9,8,14,.94));
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(246,239,227,.05);
  transform:translateY(18px) scale(.985);
  opacity:0;
  transition:transform .9s var(--ease), opacity .9s var(--ease-soft);
  text-align:center;
}
.veil.open .panel{ transform:none; opacity:1; }
.panel::before{
  content:''; position:absolute; left:16%; right:16%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,197,131,.5),transparent);
}
.panel--wide{ max-width:740px; }

.panel .kicker{
  margin:0 0 18px;
  font-size:9.5px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(232,197,131,.6);
}
.panel h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(17px,2vw,21px);
  font-weight:600; letter-spacing:.01em;
  color:var(--txt);
}
.panel .sanskrit{
  margin:20px auto 0;
  max-width:24ch;
  font-family:var(--font-deva);
  font-size:clamp(19px,2.4vw,26px);
  font-weight:500; line-height:1.6;
  color:var(--gold-warm);
  text-shadow:0 0 40px rgba(201,139,58,.34);
}
.panel .note{
  margin:14px 0 0;
  font-size:11.5px; line-height:1.7; letter-spacing:.03em;
  color:var(--txt-faint);
}
.panel .status{
  min-height:16px; margin:16px 0 0;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,197,131,.66);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.panel .status.show{ opacity:1; }

.closer{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--txt-faint);
  cursor:pointer;
  transition:color .5s var(--ease), background .5s var(--ease);
}
.closer:hover{ color:var(--gold-warm); background:rgba(246,239,227,.05); }
.closer svg{ width:13px; height:13px; }

/* transport */
.transport{
  margin:30px 0 0;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.play{
  position:relative;
  width:62px; height:62px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair-warm);
  border-radius:50%;
  color:var(--gold-warm);
  background:rgba(232,197,131,.05);
  cursor:pointer;
  transition:background .6s var(--ease), box-shadow .6s var(--ease), transform .4s var(--ease);
}
.play:hover{ background:rgba(232,197,131,.11); box-shadow:0 0 44px -10px rgba(201,139,58,.6); }
.play:active{ transform:scale(.96); }
.play svg{ width:16px; height:18px; }
.play .ico-pause{ display:none; }
.play.playing .ico-play{ display:none; }
.play.playing .ico-pause{ display:block; }
.play.playing::after{
  content:''; position:absolute; inset:-9px;
  border:1px solid rgba(232,197,131,.26);
  border-radius:50%;
  animation:breathe 3.4s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1);    opacity:.5; }
  50%    { transform:scale(1.07); opacity:.12; }
}
.step{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair);
  border-radius:50%;
  color:var(--txt-soft);
  cursor:pointer;
  transition:border-color .5s var(--ease), color .5s var(--ease), opacity .4s var(--ease);
}
.step:hover:not([disabled]){ border-color:var(--hair-warm); color:var(--gold-warm); }
.step[disabled]{ opacity:.26; cursor:default; }
.step svg{ width:11px; height:11px; }

/* pill chooser — track picks, speed picks */
.picks{
  margin:26px 0 0;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.pick{
  min-height:44px; padding:11px 15px;
  border:1px solid rgba(246,239,227,.09);
  border-radius:999px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-faint);
  cursor:pointer;
  transition:border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease);
}
.pick:hover{ color:var(--txt-soft); border-color:var(--hair); }
.pick[aria-selected="true"]{
  color:var(--gold-warm);
  border-color:var(--hair-warm);
  background:rgba(232,197,131,.06);
}

/* story */
.chapter-art{
  position:relative;
  aspect-ratio:16/9;
  margin:0 0 26px;
  border:1px solid rgba(246,239,227,.07);
  border-radius:16px;
  overflow:hidden;
  background:#0a0912;
}
.chapter-art .art-fallback{
  position:absolute; inset:0;
  transition:opacity 1s var(--ease-soft), background 1.4s var(--ease-soft);
}
.chapter-art .art-fallback::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(246,239,227,.5) .6px, transparent .7px);
  background-size:16px 16px;
  opacity:.14;
  mix-blend-mode:screen;
}
.chapter-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s var(--ease-soft);
}
.chapter-art img.ready{ opacity:1; }
.chapter-art .glaze{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.72), transparent 62%);
}

/* story: a single continuous narration, so the art is a small, fixed
   album-art thumbnail rather than a wide cycling chapter still — the
   source portrait is tall, and the panel has a scrubber, transport and
   speed picker to fit under it without spilling past the viewport */
.story-art{
  width:104px; height:104px; margin:0 auto 22px;
  aspect-ratio:1/1; border-radius:20px;
  background:#0a0912;
}
.story-art .art-fallback{
  background:radial-gradient(120% 140% at 50% 30%, #3a2450 0%, #1b1330 42%, #0a0912 100%);
}
.story-art img{
  object-fit:cover; object-position:50% 12%;
  opacity:1;
}
.story-art .glaze{ background:linear-gradient(to top, rgba(6,6,10,.45), transparent 56%); }

/* scrub bar + elapsed/duration */
.scrubber{ margin:28px 0 0; }
.seek{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; margin:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold-warm) var(--seek-pct,0%), rgba(246,239,227,.14) 0);
  cursor:pointer;
}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold-warm);
  box-shadow:0 0 0 4px rgba(232,197,131,.16), 0 2px 8px rgba(0,0,0,.5);
  transition:box-shadow .3s var(--ease);
}
.seek::-webkit-slider-thumb:hover{ box-shadow:0 0 0 6px rgba(232,197,131,.22), 0 2px 8px rgba(0,0,0,.5); }
.seek::-moz-range-track{ height:3px; border-radius:999px; background:rgba(246,239,227,.14); }
.seek::-moz-range-progress{ height:3px; border-radius:999px; background:var(--gold-warm); }
.seek::-moz-range-thumb{
  width:13px; height:13px; border:0; border-radius:50%;
  background:var(--gold-warm);
  box-shadow:0 0 0 4px rgba(232,197,131,.16), 0 2px 8px rgba(0,0,0,.5);
}
.seek:disabled{ opacity:.4; cursor:default; }
.times{
  margin-top:9px;
  display:flex; justify-content:space-between;
  font-size:10.5px; letter-spacing:.08em; font-variant-numeric:tabular-nums;
  color:var(--txt-faint);
}

/* ±15s nudge buttons — same body as .step, text instead of an icon */
.nudge{ font-size:10px; font-weight:700; letter-spacing:.01em; }

.speed{ margin-top:22px; }

/* ========================================================== cursor       */

.cur-dot,.cur-ring{
  position:fixed; top:0; left:0; z-index:90;
  pointer-events:none;
  will-change:transform;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.cur-dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:var(--gold-warm);
  box-shadow:0 0 14px rgba(232,197,131,.9);
}
.cur-ring{
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1px solid rgba(232,197,131,.34);
  border-radius:50%;
  transition:opacity .5s var(--ease), width .4s var(--ease), height .4s var(--ease),
             margin .4s var(--ease), border-color .4s var(--ease);
}
.cursor-on .cur-dot,.cursor-on .cur-ring{ opacity:1; }
.cursor-on.cur-hot .cur-ring{
  width:48px; height:48px; margin:-24px 0 0 -24px;
  border-color:rgba(232,197,131,.62);
}
.cur-ripple{
  position:fixed; z-index:89;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border:1px solid rgba(232,197,131,.6);
  border-radius:50%;
  pointer-events:none;
  animation:ripple .7s var(--ease) forwards;
}
@keyframes ripple{
  to{ transform:scale(4.4); opacity:0; border-width:.5px; }
}

/* ========================================================== motion pref  */

@media (prefers-reduced-motion:reduce){
  .env-grain,.env-haze{ animation:none; }
  .env-lamp::after{ animation:none; opacity:1; transform:translateX(-50%) scaleY(1); }
  .play.playing::after{ animation:none; opacity:.3; }
  .env-ground,.env-arch,.env-arch-outer,.env-floor,.env-haze,
  .env-pillar,.env-palm,.env-beam,.env-lintel,.env-bell{ transition-duration:.35s; }
  .darshan > *,.acts,.signature,.controls-top,.atmos{ transition-duration:.35s; }
  .copy-in .darshan > *,.copy-in .atmos{ transition-delay:0s !important; }
  .panel{ transition-duration:.2s; }
}