/* Sanatan Bliss — animated hub heroes (Patch 37) · हब दृश्य */

/* ── sound toggle (shared) ─────────────────────────────── */
.sbh-sound { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 600 .74rem/1 var(--font-body, system-ui, sans-serif); letter-spacing: .02em; cursor: pointer;
  color: #f5e6c4; background: rgba(255,255,255,.08); border: 1px solid rgba(245,194,107,.45); backdrop-filter: blur(6px); transition: background .2s, color .2s, box-shadow .2s; }
.sbh-sound:hover { background: rgba(255,255,255,.16); }
.sbh-sound .sbh-on { display: none; }
.sbh-sound[aria-pressed="true"] { color: #2a1400; background: linear-gradient(135deg, #fff1c1, #f5c26b); border-color: transparent; box-shadow: 0 0 0 4px rgba(245,194,107,.18); }
.sbh-sound[aria-pressed="true"] .sbh-on { display: inline; }
.sbh-sound[aria-pressed="true"] .sbh-off { display: none; }
.sbh-sound[aria-pressed="true"] .sbh-sound-ic { animation: sbhRingBell 1.6s ease-in-out infinite; transform-origin: 50% 10%; }
.sbh-sound.is-waiting::after { content: 'tap anywhere'; margin-left: 4px; font-weight: 500; opacity: .75; }
.sbh-sound-ic { display: inline-flex; }
@keyframes sbhRingBell { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 25% { transform: rotate(-12deg); } 40% { transform: rotate(6deg); } }

/* ── MANTRA hub: the sanctum panel ─────────────────────── */
.smh-hero-inner:has(.sbh-mantra) { grid-template-columns: 1fr minmax(340px, 440px); align-items: center; }
.smh-today-card.sbh-mantra { padding: 0; border-radius: 22px; overflow: hidden; position: relative;
  background: radial-gradient(120% 80% at 50% 30%, #23295e 0%, #141a44 45%, #0b1030 100%);
  box-shadow: 0 30px 60px -20px rgba(14,21,56,.55), inset 0 0 0 1px rgba(212,166,74,.22); }
.sbh-m-stage { position: relative; }
.sbh-m-svg { display: block; width: 100%; height: auto; }
.sbh-om-tap { position: absolute; left: 50%; top: 51%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.sbh-om-tap:focus-visible { outline: 2px solid #f5c26b; outline-offset: 4px; }
.sbh-m-info { position: relative; padding: 4px 26px 24px; text-align: center; }
.sbh-m-info .smh-today-label { margin-bottom: 8px; }
.sbh-m-info .smh-today-deva { font-size: 1.9rem; }
.sbh-m-info .smh-today-btn { margin-top: 12px; }
.sbh-mantra .sbh-sound { top: 14px; right: 14px; }

.sbh-stars circle { fill: #fff2cf; opacity: .5; animation: sbhTw var(--tw) ease-in-out var(--td) infinite alternate; }
@keyframes sbhTw { from { opacity: .15; } to { opacity: .8; } }
.sbh-ring { fill: none; stroke: #f5c26b; stroke-width: 1.2; transform-box: view-box; transform-origin: 220px 168px; opacity: 0; animation: sbhRing 6.4s cubic-bezier(.2,.6,.3,1) var(--d) infinite; }
@keyframes sbhRing { 0% { transform: scale(.7); opacity: 0; } 12% { opacity: .55; } 100% { transform: scale(2.9); opacity: 0; } }
.sbh-orbit { transform-box: view-box; transform-origin: 220px 168px; animation: sbhSpin 140s linear infinite; }
.sbh-syl-w { transform-box: fill-box; transform-origin: center; animation: sbhSpin 140s linear infinite reverse; }
@keyframes sbhSpin { to { transform: rotate(360deg); } }
.sbh-syl { font-family: var(--smh-font-deva, 'Tiro Devanagari Hindi', serif); font-size: 19px; fill: #f5e6c4; opacity: .42; }
.sbh-mglow { transform-box: fill-box; transform-origin: center; animation: sbhBreath 5.2s ease-in-out infinite; }
@keyframes sbhBreath { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.sbh-om { font-family: var(--smh-font-deva, 'Tiro Devanagari Hindi', serif); font-size: 118px; filter: drop-shadow(0 0 18px rgba(245,194,107,.45)); }
.sbh-thread { fill: none; stroke: rgba(212,166,74,.35); stroke-width: 1; }
.sbh-bead { fill: #8a4b1f; stroke: #c98b4a; stroke-width: .8; transition: fill .35s, r .35s, filter .35s; }
.sbh-bead.is-on { fill: #ffe39a; stroke: #fff4cf; r: 7.4px; filter: drop-shadow(0 0 6px #f5c26b); }
.sbh-bead.was-on { fill: #c7853f; }
.sbh-guru { fill: #a3602a; stroke: #e4b46a; stroke-width: 1.2; }
.sbh-tassel { fill: none; stroke: #c1121f; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.sbh-mantra.is-om .sbh-om { animation: sbhOmPulse 1.6s ease-out; }
@keyframes sbhOmPulse { 0% { filter: drop-shadow(0 0 18px rgba(245,194,107,.45)); } 30% { filter: drop-shadow(0 0 38px rgba(255,226,150,.95)); } 100% { filter: drop-shadow(0 0 18px rgba(245,194,107,.45)); } }

@media (max-width: 768px) {
  .smh-hero-inner:has(.sbh-mantra) { grid-template-columns: 1fr; }
  .smh-today-card.sbh-mantra { max-width: 440px; width: 100%; margin: 8px auto 0; }
}

/* ── AARTI hub: thali, light, petals, incense ──────────── */
.aarti-hero.has-fan:has(.sbh-thali) { overflow: hidden; }
.ah-fan:has(.sbh-thali) { isolation: isolate; }
.sbh-light { position: absolute; z-index: 20; inset: -30px -60px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(130px 120px at var(--lx, 50%) var(--ly, 40%), rgba(255,214,130,.55), rgba(255,160,40,.18) 55%, transparent 75%); }
.sbh-thali { position: absolute; z-index: 30; left: 0; top: 0; width: 132px; pointer-events: none; transform: translate(-50%, 120px); will-change: transform; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.sbh-thali-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbh-fl { transform-box: fill-box; transform-origin: 50% 90%; animation: sbhFlick var(--fd) ease-in-out infinite alternate; }
@keyframes sbhFlick { 0% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.92, 1.08) skewX(3deg); } 70% { transform: scale(1.05, .94) skewX(-3deg); } 100% { transform: scale(.96, 1.04) skewX(1deg); } }
.sbh-halo2 { animation: sbhHalo 2.4s ease-in-out infinite alternate; }
@keyframes sbhHalo { from { opacity: .7; } to { opacity: 1; } }
.sbh-petals { position: absolute; z-index: 25; inset: -40px -40px 0; pointer-events: none; overflow: hidden; }
.sbh-petal { position: absolute; top: -20px; left: var(--x); width: 12px; height: 9px; border-radius: 70% 30% 70% 30%;
  background: radial-gradient(circle at 30% 30%, #ffd166, #f77f00 70%); opacity: 0; animation: sbhFall var(--du) linear var(--dl) infinite; }
.sbh-petal:nth-child(3n) { background: radial-gradient(circle at 30% 30%, #ffe08a, #ffb703 70%); }
.sbh-petal:nth-child(4n) { background: radial-gradient(circle at 30% 30%, #ff8fab, #d62828 75%); }
@keyframes sbhFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .95; } 50% { transform: translate(calc(var(--r) * 26px), 180px) rotate(calc(var(--r) * 200deg)); } 90% { opacity: .9; } 100% { transform: translate(calc(var(--r) * -10px), 360px) rotate(calc(var(--r) * 400deg)); opacity: 0; } }
.sbh-incense { position: absolute; z-index: 1; left: 2%; bottom: -6px; width: 46px; height: auto; pointer-events: none; overflow: visible; }
.sbh-smoke { fill: none; stroke: rgba(255,240,225,.38); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 24 300; animation: sbhSmoke 7s linear infinite; filter: blur(1.2px); }
.sbh-smoke2 { stroke: rgba(255,240,225,.24); animation-delay: -3.5s; }
@keyframes sbhSmoke { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -320; } }
.sbh-ember { animation: sbhHalo 1.2s ease-in-out infinite alternate; }

.sbh-aarti-ctl { position: absolute; z-index: 40; right: max(18px, 3vw); bottom: 18px; display: flex; align-items: center; gap: 10px; }
.sbh-aarti-ctl .sbh-sound { position: static; }
.sbh-conch img { display: block; width: 58px; height: auto; }
.sbh-conch { border: 0; padding: 4px; background: transparent; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition: transform .25s; }
.sbh-conch:hover { transform: rotate(-8deg) scale(1.06); }
.sbh-conch.is-blow { animation: sbhBlow 1.8s ease-out; }
@keyframes sbhBlow { 0% { transform: scale(1); } 20% { transform: scale(1.12) rotate(-10deg); } 100% { transform: scale(1); } }
.sbh-conch:focus-visible { outline: 2px solid #f5c842; border-radius: 12px; }

@media (max-width: 860px) {
  .sbh-thali { width: 96px; }
  .sbh-incense { display: none; }
  .sbh-aarti-ctl { position: static; justify-content: center; margin-top: 4px; }
}

/* still version for visitors who switch motion off */
@media (prefers-reduced-motion: reduce) {
  .sbh-ring, .sbh-orbit, .sbh-syl-w, .sbh-mglow, .sbh-stars circle, .sbh-fl, .sbh-halo2, .sbh-petal, .sbh-smoke, .sbh-ember, .sbh-sound-ic { animation: none !important; }
  .sbh-ring:first-child { opacity: .35; transform: scale(1.6); }
  .sbh-petal { display: none; }
}

/* ── FESTIVALS hub: wheel of the year (Patch 38) ───────── */
.page-hero.has-wheel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px;
  padding: 36px max(24px, 5vw); place-items: center stretch; }
.page-hero.has-wheel .page-hero-bg { background: radial-gradient(60% 70% at 74% 50%, color-mix(in srgb, var(--s1) 70%, #f5c26b 12%), transparent 70%), linear-gradient(160deg, var(--s1) 0%, var(--s2) 100%); transition: background 1s; }
.page-hero.has-wheel .hero-ring { left: 74%; }
.page-hero.has-wheel .page-hero-content { text-align: left; max-width: 620px; padding: 24px 0; justify-self: start; }
.page-hero.has-wheel .page-hero-divider { margin: 18px 0; }
.page-hero.has-wheel .sb-year-switch { justify-content: flex-start !important; }
.sbh-wheel { position: relative; z-index: 2; width: min(100%, 470px); justify-self: center; }
.sbh-w-stage { position: relative; }
.sbh-w-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbh-w-rim { fill: rgba(10,6,20,.35); stroke: rgba(245,194,107,.55); stroke-width: 1.5; }
.sbh-w-ticks path { stroke: rgba(245,194,107,.45); stroke-width: 1; }
.sbh-w-rot { transform-box: view-box; transform-origin: 250px 250px; transform: rotate(var(--rot, 0deg)); }
.sbh-up { transform-box: fill-box; transform-origin: center; transform: rotate(calc(-1 * var(--rot, 0deg))); }
.sbh-seg { cursor: pointer; outline: none; }
.sbh-seg-bg { fill: rgba(255,255,255,.04); stroke: rgba(245,194,107,.28); stroke-width: 1; transition: fill .3s; }
.sbh-seg:nth-child(odd) .sbh-seg-bg { fill: rgba(255,255,255,.075); }
.sbh-seg:hover .sbh-seg-bg, .sbh-seg:focus-visible .sbh-seg-bg { fill: rgba(245,194,107,.18); }
.sbh-seg.is-sel .sbh-seg-bg { fill: rgba(245,194,107,.24); stroke: rgba(255,226,150,.85); }
.sbh-seg.is-cur .sbh-seg-bg { fill: url(#sbhWGold); stroke: #ffe39a; stroke-width: 1.6; animation: sbhCur 3.2s ease-in-out infinite; }
@keyframes sbhCur { 0%, 100% { filter: drop-shadow(0 0 4px rgba(245,194,107,.35)); } 50% { filter: drop-shadow(0 0 14px rgba(245,194,107,.8)); } }
.sbh-seg .sbh-up > * { transition: transform .3s; }
.sbh-seg:hover .sbh-up, .sbh-seg.is-sel .sbh-up { filter: drop-shadow(0 0 6px rgba(255,226,150,.6)); }
.sbh-mon { font: 700 11px/1 var(--font-body, system-ui, sans-serif); letter-spacing: .14em; fill: rgba(255,240,210,.7); }
.sbh-seg.is-cur .sbh-mon { fill: #ffe39a; }
.sbh-w-hubring { fill: rgba(12,6,22,.72); stroke: rgba(245,194,107,.6); stroke-width: 1.4; }
.sbh-w-ptr { fill: #ffd166; filter: drop-shadow(0 0 6px rgba(255,209,102,.8)); }
.sbh-w-hub { position: absolute; left: 50%; top: 50%; width: 42%; transform: translate(-50%, -50%); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sbh-w-k { font: 700 .62rem/1.2 var(--font-body, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #f5c26b; }
.sbh-w-hi { font-family: var(--font-hindi, 'Tiro Devanagari Hindi', serif); font-size: clamp(1.05rem, 2.1vw, 1.45rem); line-height: 1.25; color: #fff4cf; margin-top: 2px; }
.sbh-w-en { font-family: var(--font-display, serif); font-style: italic; font-size: .92rem; line-height: 1.2; color: rgba(255,255,255,.85); }
.sbh-w-d { font-size: .72rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.sbh-w-d b { color: #7ef0a8; font-weight: 700; }
.sbh-w-go { margin-top: 6px; font-size: .72rem; font-weight: 700; color: #ffd166; text-decoration: none; }
.sbh-w-go:hover { text-decoration: underline; }
.sbh-w-all { margin-top: 2px; border: 0; background: none; padding: 2px 4px; font-size: .66rem; color: rgba(255,255,255,.6); cursor: pointer; }
.sbh-w-all:hover { color: #fff; }
.sbh-wheel .sbh-sound { top: 0; right: 0; }
.sbh-w-hub.is-swap > * { animation: sbhSwap .35s ease; }
@keyframes sbhSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .page-hero.has-wheel { grid-template-columns: 1fr; padding: 24px 18px 8px; }
  .page-hero.has-wheel .sbh-wheel { order: -1; width: min(100%, 360px); }
  .page-hero.has-wheel .page-hero-content { text-align: center; justify-self: center; padding-top: 4px; }
  .page-hero.has-wheel .page-hero-divider { margin: 14px auto; }
  .page-hero.has-wheel .sb-year-switch { justify-content: center !important; }
  .sbh-wheel .sbh-sound { position: relative; top: auto; right: auto; left: 50%; transform: translateX(-50%); margin-top: 8px; }
  .page-hero.has-wheel .hero-ring { left: 50%; }
  .sbh-w-hi { font-size: 1.05rem; } .sbh-w-en { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .sbh-seg.is-cur .sbh-seg-bg { animation: none; } }

/* ── TEMPLES hub: dawn at the shikhara (Patch 39) ──────── */
.page-hero.has-temple { place-items: center start; min-height: clamp(460px, 62vh, 600px); }
.page-hero.has-temple .hero-bg, .page-hero.has-temple .hero-stars, .page-hero.has-temple .hero-ring, .page-hero.has-temple .hero-gopuram { display: none; }
.page-hero.has-temple .hero-content { text-align: left; max-width: 600px; margin: 0; padding: 40px max(24px, 5vw); position: relative; z-index: 3; }
.page-hero.has-temple .hero-divider { margin-left: 0; }
.page-hero.has-temple .hero-search { margin-left: 0; }
.page-hero.has-temple .hero-stats { justify-content: flex-start; }
.page-hero.has-temple .hero-stats > .hs-sep:first-child { display: none; }
.sbh-temple { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sbh-t-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sbh-t-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,6,20,.82) 0%, rgba(8,6,20,.62) 34%, rgba(8,6,20,.18) 58%, transparent 74%); }
.sbh-temple .sbh-sound { top: 16px; right: 18px; }

/* phase palettes */
.sbh-temple { --sil: #2a1426; --hill1: #3b1d36; --hill2: #5a2b4a; --band: rgba(255,210,150,.16); --w0: #7a3a52; --w1: #24112a; }
.sbh-temple[data-phase="dawn"] .sbh-ts0 { stop-color: #1b1640; } .sbh-temple[data-phase="dawn"] .sbh-ts1 { stop-color: #7a2f5e; } .sbh-temple[data-phase="dawn"] .sbh-ts2 { stop-color: #f39a52; }
.sbh-temple[data-phase="day"]  { --sil: #5a2f22; --hill1: #6e3b2a; --hill2: #8f5a3c; --band: rgba(255,230,190,.22); --w0: #c98a55; --w1: #5a3324; }
.sbh-temple[data-phase="day"]  .sbh-ts0 { stop-color: #3d3a78; } .sbh-temple[data-phase="day"] .sbh-ts1 { stop-color: #b8705a; } .sbh-temple[data-phase="day"] .sbh-ts2 { stop-color: #f7c97e; }
.sbh-temple[data-phase="dusk"] { --sil: #22101f; --hill1: #34152c; --hill2: #55223f; --w0: #8a3448; --w1: #1e0c1c; }
.sbh-temple[data-phase="dusk"] .sbh-ts0 { stop-color: #1f1240; } .sbh-temple[data-phase="dusk"] .sbh-ts1 { stop-color: #8c2f4c; } .sbh-temple[data-phase="dusk"] .sbh-ts2 { stop-color: #f2703c; }
.sbh-temple[data-phase="night"] { --sil: #0d0f24; --hill1: #121633; --hill2: #1a2046; --band: rgba(170,190,255,.10); --w0: #1b2552; --w1: #070a1a; }
.sbh-temple[data-phase="night"] .sbh-ts0 { stop-color: #04081c; } .sbh-temple[data-phase="night"] .sbh-ts1 { stop-color: #0e1a40; } .sbh-temple[data-phase="night"] .sbh-ts2 { stop-color: #273a72; }
.sbh-tw0 { stop-color: var(--w0); } .sbh-tw1 { stop-color: var(--w1); }
.sbh-ts0, .sbh-ts1, .sbh-ts2 { transition: stop-color 2s; }
.sbh-sil { fill: var(--sil); transition: fill 2s; }
.sbh-hill1 { fill: var(--hill1); } .sbh-hill2 { fill: var(--hill2); }
.sbh-bands path { stroke: var(--band); stroke-width: 2; }
.sbh-pole { stroke: var(--sil); stroke-width: 3; }
.sbh-flag { fill: #e85d04; transform-box: fill-box; transform-origin: 0% 50%; animation: sbhFlag 1.4s ease-in-out infinite alternate; }
@keyframes sbhFlag { 0% { transform: scaleX(1) skewY(0); } 50% { transform: scaleX(.86) skewY(6deg); } 100% { transform: scaleX(1.04) skewY(-4deg); } }
.sbh-door { fill: #1a0a10; transition: fill 2s; }
.sbh-win { fill: rgba(0,0,0,.35); transition: fill 2s; }
.sbh-tree { fill: none; stroke: var(--sil); stroke-width: 5; stroke-linecap: round; }
.sbh-bell { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: 50% 0%; animation: sbhBellIdle 6s ease-in-out infinite; }
.sbh-bell-b { fill: #e0a83a; }
.sbh-bell:focus-visible .sbh-bell-b { stroke: #fff; stroke-width: 1.5; }
.sbh-bell.is-ring { animation: sbhBellRing 1.8s ease-out; }
@keyframes sbhBellIdle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes sbhBellRing { 0% { transform: rotate(0); } 12% { transform: rotate(22deg); } 30% { transform: rotate(-18deg); } 48% { transform: rotate(12deg); } 66% { transform: rotate(-7deg); } 84% { transform: rotate(3deg); } 100% { transform: rotate(0); } }

/* sun / moon / stars by phase */
.sbh-t-sun, .sbh-t-moon { transition: transform 2s, opacity 1.5s; }
.sbh-t-sun { transform: translate(780px, 410px); }
.sbh-temple[data-phase="dawn"] .sbh-t-sun { animation: sbhRise 40s ease-out forwards; }
@keyframes sbhRise { from { transform: translate(780px, 440px); } to { transform: translate(790px, 360px); } }
.sbh-temple[data-phase="day"] .sbh-t-sun { transform: translate(700px, 245px); }
.sbh-temple[data-phase="dusk"] .sbh-t-sun { transform: translate(1150px, 420px); }
.sbh-temple[data-phase="night"] .sbh-t-sun { opacity: 0; }
.sbh-t-moon { transform: translate(730px, 240px); opacity: 0; }
.sbh-temple[data-phase="night"] .sbh-t-moon { opacity: 1; }
.sbh-t-stars circle { fill: #fff6dc; opacity: 0; }
.sbh-temple[data-phase="night"] .sbh-t-stars circle { animation: sbhTw var(--tw) ease-in-out var(--td) infinite alternate; }
.sbh-temple[data-phase="dusk"] .sbh-t-stars circle:nth-child(3n) { opacity: .4; }

/* lamps + lit door at dusk / night */
.sbh-lamp, .sbh-fdiyas { opacity: 0; transition: opacity 1.5s; }
.sbh-temple[data-phase="dusk"] .sbh-lamp, .sbh-temple[data-phase="night"] .sbh-lamp,
.sbh-temple[data-phase="night"] .sbh-fdiyas, .sbh-temple[data-phase="dusk"] .sbh-fdiyas { opacity: 1; }
.sbh-lamp-g { fill: url(#sbhTLamp); animation: sbhHalo 1.6s ease-in-out var(--ld, 0s) infinite alternate; }
.sbh-lamp-f { fill: #ffd166; }
.sbh-lamp-b { fill: #b5501c; }
.sbh-temple[data-phase="dusk"] .sbh-door, .sbh-temple[data-phase="night"] .sbh-door { fill: #ffb547; filter: drop-shadow(0 0 12px rgba(255,170,60,.85)); }
.sbh-temple[data-phase="night"] .sbh-win, .sbh-temple[data-phase="dusk"] .sbh-win { fill: #ffcf73; }
.sbh-fdiya { animation: sbhBob var(--fd) ease-in-out infinite alternate; }
@keyframes sbhBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* water */
.sbh-ripples path { stroke: rgba(255,230,190,.28); stroke-width: 2; stroke-linecap: round; animation: sbhRipple 9s linear infinite; }
.sbh-temple[data-phase="night"] .sbh-ripples path { stroke: rgba(200,215,255,.22); }
@keyframes sbhRipple { from { transform: translateX(0); } to { transform: translateX(-60px); } }
/* birds (not at night) */
.sbh-bird { fill: none; stroke: var(--sil); stroke-width: 2.2; stroke-linecap: round; }
.sbh-birds { animation: sbhFly 26s linear infinite; }
.sbh-bird { animation: sbhFlap .6s ease-in-out var(--bd) infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sbhFly { from { transform: translate(-120px, 40px); } to { transform: translate(1300px, -60px); } }
@keyframes sbhFlap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
.sbh-temple[data-phase="night"] .sbh-birds { display: none; }

@media (max-width: 760px) {
  .page-hero.has-temple { display: flex; flex-direction: column; min-height: 0; }
  .page-hero.has-temple .sbh-temple { position: relative; inset: auto; height: 250px; width: 100%; flex: none; }
  .sbh-t-svg { left: auto; right: 0; width: 175%; }
  .sbh-temple .sbh-sound { right: auto; left: 14px; }
  .page-hero.has-temple .hero-content { text-align: center; padding: 22px 18px 34px; max-width: none; }
  .page-hero.has-temple .hero-divider { margin: 16px auto; }
  .page-hero.has-temple .hero-stats { justify-content: center; }
  .page-hero.has-temple { background: linear-gradient(180deg, #1b1236, #0d0918); }
  .sbh-t-shade { background: linear-gradient(180deg, transparent 60%, rgba(13,9,24,.9) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sbh-flag, .sbh-bell, .sbh-birds, .sbh-bird, .sbh-ripples path, .sbh-fdiya, .sbh-lamp-g, .sbh-t-stars circle { animation: none !important; }
  .sbh-temple[data-phase="night"] .sbh-t-stars circle { opacity: .6; }
  .sbh-temple[data-phase="dawn"] .sbh-t-sun { animation: none; transform: translate(790px, 380px); }
}

/* ── DEITY hubs: darshan (Patch 40) ────────────────────── */
.sbh-darshan { position: relative; width: 100%; max-width: 320px; margin: 0 auto; isolation: isolate; }
.sbh-d-art { position: relative; z-index: 2; }
.sbh-d-art img { display: block; }
.sbh-d-halo { position: absolute; z-index: 0; left: 50%; top: 46%; width: 175%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--sbd-acc, #f5c26b) 55%, transparent) 0%, color-mix(in srgb, var(--sbd-acc, #f5c26b) 18%, transparent) 38%, transparent 66%);
  animation: sbhDHalo 6s ease-in-out infinite; }
@keyframes sbhDHalo { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.sbh-d-sym { position: absolute; z-index: 3; left: 50%; top: 50%; width: 132%; height: auto; transform: translate(-50%, -53%); pointer-events: none; overflow: visible;
  fill: none; stroke: color-mix(in srgb, #ffe2a0 75%, var(--sbd-acc, #f5c26b)); stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sbd-acc, #f5c26b) 60%, transparent)); }
.sbh-d-ring { stroke-width: 1.6; opacity: .75; }
.sbh-d-ring2 { stroke-width: 1; opacity: .45; stroke-dasharray: 1; }
.sbh-d-crest { stroke-width: 9; }
.sbh-d-crest-bg { fill: color-mix(in srgb, var(--sbd-acc, #f5c26b) 22%, #140a24); stroke-width: 7; }
.sbh-d-sym circle, .sbh-d-sym path, .sbh-d-sym ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sbhDraw 3.6s cubic-bezier(.45,.05,.3,1) .3s forwards; }
.sbh-d-crest > :nth-child(2n) { animation-delay: 1.1s; } .sbh-d-crest > :nth-child(3n) { animation-delay: 1.5s; }
.sbh-d-ring2 { animation-delay: .8s !important; }
.sbh-d-crest-bg { stroke-dashoffset: 0 !important; animation: none !important; }
@keyframes sbhDraw { to { stroke-dashoffset: 0; } }
.sbh-darshan.is-drawn .sbh-d-sym { animation: sbhDGlow 5s ease-in-out infinite; }
@keyframes sbhDGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.sbh-darshan.is-play .sbh-d-sym { animation: sbhDFlash 2.4s ease-out; }
@keyframes sbhDFlash { 0% { opacity: .85; } 25% { opacity: 1; filter: drop-shadow(0 0 16px #ffe2a0); } 100% { opacity: .85; } }
.sbh-d-tap { position: absolute; z-index: 3; inset: 0; border: 0; background: transparent; cursor: pointer; border-radius: 160px 160px 24px 24px; }
.sbh-d-tap:focus-visible { outline: 2px solid #ffe2a0; outline-offset: 4px; }
.sbh-darshan .sbh-sound { top: auto; bottom: -14px; right: -12px; z-index: 4; }
@media (max-width: 860px) { .sbh-darshan { max-width: 200px; } .sbh-darshan .sbh-sound { right: -40px; bottom: -6px; } }
@media (prefers-reduced-motion: reduce) {
  .sbh-d-halo, .sbh-darshan.is-drawn .sbh-d-sym { animation: none; }
  .sbh-d-sym circle, .sbh-d-sym path, .sbh-d-sym ellipse { animation: none; stroke-dashoffset: 0; }
}

/* ── DEITIES hub (/deity/): darshan gallery (Patch 42) ─── */
.sdh-hero.has-gallery { background: radial-gradient(900px 420px at 50% 88%, rgba(245,166,35,.28), transparent 70%), linear-gradient(170deg, #2a0b2e 0%, #4a1236 50%, #1c0816 100%); border-bottom: 0; color: #fff; padding: 48px 20px 30px; }
.sdh-hero.has-gallery .sdh-hero-bg, .sdh-hero.has-gallery .diya-float { display: none; }
.sdh-hero.has-gallery .hero-ring { border-color: rgba(245,194,107,.12); }
.sdh-hero.has-gallery .sdh-kicker { color: #f5c26b; }
.sdh-hero.has-gallery .sdh-h1 { color: #fff; }
.sdh-hero.has-gallery .sdh-h1 em { color: #ffd98a; }
.sdh-hero.has-gallery .sdh-hero-sub { color: rgba(255,255,255,.78); }
.sdh-hero.has-gallery .sdh-stat-n { color: #ffd98a; }
.sdh-hero.has-gallery .sdh-stat-l { color: rgba(255,240,210,.7); }
.sdh-hero.has-gallery .sdh-stat-sep { background: rgba(245,194,107,.3); }
.sbh-gallery { position: relative; max-width: 1100px; margin: 30px auto 0; }
.sbh-g-row { display: flex; justify-content: center; align-items: flex-end; height: 300px; padding-top: 40px; }
.sbh-g-arch { position: relative; flex: none; width: 118px; aspect-ratio: 4/5; margin: 0 -6px; border-radius: 70px 70px 14px 14px; border: 3px solid #e9b949; overflow: visible;
  transform: translateY(calc(var(--ao) * var(--ao) * 5px)) rotate(calc(var(--o) * 2.2deg)); z-index: calc(20 - var(--ao)); box-shadow: 0 14px 28px rgba(0,0,0,.45);
  filter: brightness(.72) saturate(.9); transition: filter .9s, box-shadow .9s, transform .4s; }
.sbh-g-arch img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 66px 66px 11px 11px; }
.sbh-g-arch.is-today { width: 170px; margin: 0 4px; border-width: 4px; border-color: #ffd98a; filter: none; box-shadow: 0 0 0 6px rgba(255,217,138,.16), 0 0 46px rgba(255,190,90,.55), 0 18px 34px rgba(0,0,0,.5); z-index: 30; }
.sbh-g-arch.is-lit { filter: brightness(1.08) saturate(1.05); box-shadow: 0 0 0 4px rgba(255,217,138,.22), 0 0 40px rgba(255,190,90,.75), 0 14px 28px rgba(0,0,0,.45); }
.sbh-g-arch:hover, .sbh-g-arch:focus-visible { filter: none; transform: translateY(calc(var(--ao) * var(--ao) * 5px - 8px)) rotate(calc(var(--o) * 2.2deg)); outline: none; }
.sbh-g-arch::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 18px; height: 22px; transform: translateX(-50%); opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle at 50% 70%, #fff3c4 0, #ffb347 40%, transparent 70%); filter: blur(.5px); }
.sbh-g-arch.is-lit::after, .sbh-g-arch.is-today::after { opacity: 1; }
.sbh-g-crest { position: absolute; left: 50%; top: -58px; width: 54px; height: 54px; transform: translateX(-50%); fill: none; stroke: #ffe2a0; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,200,110,.7)); }
.sbh-g-crest-bg { fill: #3a1236; stroke-width: 9; }
.sbh-g-cap { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; }
.sbh-g-k { font: 700 .7rem/1.2 var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #f5c26b; }
.sbh-g-n { font-family: var(--font-display, serif); font-size: 1.5rem; color: #fff; }
.sbh-g-n span { font-family: var(--font-hindi, serif); color: #ffd98a; font-size: 1.2rem; }
.sbh-g-cap.is-swap > * { animation: sbhSwap .35s ease; }
.sbh-gallery .sbh-sound { top: -6px; right: 0; }
@media (max-width: 860px) {
  .sbh-g-row { height: 200px; padding-top: 36px; overflow: visible; }
  .sbh-g-arch { transform: translateY(calc(var(--ao) * var(--ao) * 3px)) rotate(calc(var(--o) * 2deg)); }
  .sbh-g-arch { width: 74px; margin: 0 -10px; }
  .sbh-g-arch.is-today { width: 112px; }
  .sbh-g-arch[style*="--ao:4"], .sbh-g-arch[style*="--ao:3"] { display: none; }
  .sbh-g-crest { width: 40px; height: 40px; top: -44px; }
  .sbh-g-cap { margin-top: 30px; } .sbh-g-n { font-size: 1.2rem; }
  .sbh-gallery .sbh-sound { position: relative; top: auto; right: auto; left: 50%; transform: translateX(-50%); margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sbh-g-arch { transition: none; } }
@media (min-width: 1025px) {
  .sdh-hero.has-gallery { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 10px; padding: 34px max(24px, 4vw) 26px; }
  .sdh-hero.has-gallery .sdh-hero-inner { text-align: left; margin: 0; max-width: 520px; }
  .sdh-hero.has-gallery .sdh-rule { text-align: left; }
  .sdh-hero.has-gallery .sdh-rule svg { margin-left: -4px; }
  .sdh-hero.has-gallery .sdh-hero-sub { margin-left: 0; }
  .sdh-hero.has-gallery .sdh-hero-stats { justify-content: flex-start; }
  .sdh-hero.has-gallery .sdh-stat:first-child { padding-left: 0; }
  .sbh-gallery { margin: 0; width: 100%; }
  .sbh-g-row { height: 290px; padding-top: 56px; }
  .sbh-g-arch { width: 96px; margin: 0 -7px; transform: translateY(calc(var(--ao) * var(--ao) * 4px)) rotate(calc(var(--o) * 2.6deg)); }
  .sbh-g-arch:hover, .sbh-g-arch:focus-visible { transform: translateY(calc(var(--ao) * var(--ao) * 4px - 8px)) rotate(calc(var(--o) * 2.6deg)); }
  .sbh-g-arch.is-today { width: 150px; }
  .sbh-g-arch[style*="--ao:4"] { display: none; }
  .sbh-g-cap { margin-top: 30px; }
  .sbh-gallery .sbh-sound { top: 0; right: 4px; }
}

/* ── MOON hubs: Panchang · Ekadashi · Amavasya (Patch 43) ─ */
.page-hero.has-moon { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 20px; padding: 26px max(24px, 5vw); min-height: 0 !important; place-items: center stretch; }
.page-hero.has-moon .page-hero-bg { background: radial-gradient(55% 75% at 76% 45%, rgba(120,140,220,.28), transparent 70%), linear-gradient(165deg, #0d1233 0%, #1c1446 45%, #2a0f2e 100%); }
.sbh-m-amavasya { --mtint: 1; }
.page-hero.has-moon:has(.sbh-m-amavasya) .page-hero-bg { background: radial-gradient(55% 75% at 76% 45%, rgba(255,170,60,.16), transparent 70%), linear-gradient(165deg, #05071a 0%, #0f0d2a 55%, #1a0a16 100%); }
.page-hero.has-moon:has(.sbh-m-ekadashi) .page-hero-bg { background: radial-gradient(55% 75% at 76% 45%, rgba(110,200,150,.20), transparent 70%), linear-gradient(165deg, #0b1e2c 0%, #13284a 50%, #1e1238 100%); }
.page-hero.has-moon .hero-ring { left: 76%; }
.page-hero.has-moon .diya-float { display: none; }
.page-hero.has-moon .page-hero-content { text-align: left; max-width: 620px; padding: 20px 0; justify-self: start; }
.page-hero.has-moon .page-hero-divider { margin: 16px 0; }
.page-hero.has-moon .sb-year-switch { justify-content: flex-start !important; }
.sbh-moonscene { position: relative; z-index: 2; width: min(100%, 380px); justify-self: center; }
.sbh-moon-stage { position: relative; }
.sbh-moon-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbh-mglow2 { animation: sbhBreath 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sbh-tring { fill: none; stroke: rgba(245,226,180,.22); stroke-width: 1; }
.sbh-tb { stroke-width: 1; transition: r .4s, fill .4s; }
.sbh-tb.is-sh { fill: #f3e6bf; stroke: #fff8e0; opacity: .8; }
.sbh-tb.is-kr { fill: #24306a; stroke: #6b7cc4; opacity: .9; }
.sbh-tb.is-purnima { fill: #fffbea; filter: drop-shadow(0 0 5px #fff3c4); }
.sbh-tb.is-amavasya { fill: #05071a; stroke: #f5c26b; stroke-width: 1.6; }
.sbh-m-ekadashi .sbh-tb.is-ekadashi { fill: #7ee2a0; stroke: #e8fff0; r: 7px; filter: drop-shadow(0 0 6px rgba(126,226,160,.8)); }
.sbh-m-amavasya .sbh-tb.is-amavasya { r: 9px; filter: drop-shadow(0 0 8px rgba(245,194,107,.8)); }
.sbh-tb.is-past { opacity: .45; }
.sbh-tl { font: 600 11px/1 var(--font-hindi, serif); fill: rgba(255,240,210,.55); }
.sbh-tl-c { fill: rgba(255,240,210,.7); }
.sbh-tmark { fill: none; stroke: #ffd166; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(255,209,102,.9)); transition: cx .2s linear, cy .2s linear; }
.sbh-moon { cursor: pointer; outline: none; }
.sbh-mdark { fill: #222a52; stroke: rgba(207,216,255,.18); }
.sbh-crat circle { fill: rgba(120,110,90,.18); }
.sbh-moon.is-tap .sbh-mlit { animation: sbhMoonTap 1.6s ease-out; }
@keyframes sbhMoonTap { 30% { filter: drop-shadow(0 0 24px #fff3c4); } }
.sbh-mlit { filter: drop-shadow(0 0 14px rgba(255,243,196,.45)); }
.sbh-moon-card { margin: -34px auto 0; max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 18px; border-radius: 16px;
  background: rgba(10,8,30,.55); border: 1px solid rgba(245,194,107,.35); backdrop-filter: blur(8px); color: #fff; position: relative; z-index: 3; }
.sbh-mc-k { font: 700 .64rem/1.2 var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #f5c26b; }
.sbh-mc-n { font-family: var(--font-display, serif); font-size: 1.35rem; line-height: 1.2; }
.sbh-mc-hi { font-family: var(--font-hindi, serif); color: #ffd98a; font-size: 1rem; }
.sbh-mc-d { font-size: .78rem; color: rgba(255,255,255,.75); }
.sbh-mc-d b { color: #7ef0a8; }
.sbh-mc-phase { font-size: .72rem; color: rgba(207,216,255,.8); }
.sbh-moonscene .sbh-sound { top: 0; right: 0; }
.sbh-tulsi ellipse { transform-box: fill-box; transform-origin: 50% 100%; animation: sbhLeaf 4s ease-in-out infinite alternate; }
@keyframes sbhLeaf { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (max-width: 900px) {
  .page-hero.has-moon { grid-template-columns: 1fr; padding: 22px 18px 10px; }
  .page-hero.has-moon .sbh-moonscene { order: -1; width: min(100%, 340px); }
  .page-hero.has-moon .page-hero-content { text-align: center; justify-self: center; }
  .page-hero.has-moon .page-hero-divider { margin: 14px auto; }
  .page-hero.has-moon .sb-year-switch { justify-content: center !important; }
  .page-hero.has-moon .hero-ring { left: 50%; }
  .sbh-moonscene .sbh-sound { position: relative; top: auto; right: auto; left: 50%; transform: translateX(-50%); margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sbh-mglow2, .sbh-tulsi ellipse { animation: none; } }

/* ── STOTRA · BHAJAN · PUJA VIDHI (Patch 44) ───────────── */
.has-scene { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 20px; padding: 30px max(24px, 5vw) !important; min-height: 0 !important; text-align: left; }
.has-scene > .page-hero-content, .has-scene > .hero-content, .has-scene > .sb-sd-hero-in { text-align: left; max-width: 620px; margin: 0; padding: 18px 0; justify-self: start; position: relative; z-index: 2; }
.has-scene .page-hero-divider, .has-scene .hero-divider { margin-left: 0; margin-right: auto; }
.has-scene .hero-stats, .has-scene .hero-badges, .has-scene .sb-sd-stats { justify-content: flex-start; margin-left: 0; }
.has-scene .sb-sd-div { margin-left: 0; }
.has-scene .hero-om-bg, .has-scene .float-item, .has-scene .hero-leaves { display: none; }
.has-scene .hero-ring { left: 74%; }
.sbh-scene { position: relative; z-index: 2; width: min(100%, 440px); justify-self: center; }
.sbh-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbh-scene .sbh-sound { top: 0; right: 0; }
.sbh-cap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; min-height: 44px; text-align: center; }
.sbh-cap-k { font: 700 .66rem/1.2 var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #f5c26b; }
.sbh-cap-n { font-family: var(--font-display, serif); font-size: 1.25rem; color: #fff; }
.sbh-cap-n span { font-family: var(--font-hindi, serif); color: #ffd98a; font-size: 1.05rem; }
.sbh-cap.is-swap > * { animation: sbhSwap .35s ease; }
/* stotra */
.sbh-sl { opacity: 0; animation: sbhLine 16s ease-in-out infinite; animation-delay: calc(var(--li) * 1.6s); }
@keyframes sbhLine { 0% { opacity: 0; transform: translateY(4px); } 6%, 72% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; } }
.sbh-sl-d { font-family: var(--font-hindi, 'Tiro Devanagari Hindi', serif); font-size: 23px; fill: #5a2410; }
.sbh-sl-r { font-family: var(--font-display, serif); font-style: italic; font-size: 12.5px; fill: #8a5a2a; }
.sbh-st-btn { position: absolute; left: 9%; top: 19%; width: 82%; height: 52%; border: 0; background: transparent; cursor: pointer; z-index: 3; border-radius: 16px; }
.sbh-st-btn:focus-visible { outline: 2px solid #f5c26b; }
/* bhajan */
.sbh-sw { font-family: var(--font-hindi, serif); font-size: 22px; fill: #ffd98a; opacity: 0; animation: sbhNote 5.6s ease-out var(--sd) infinite; }
@keyframes sbhNote { 0% { opacity: 0; transform: translate(0, 30px); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--sx), -200px); } }
.sbh-dholak, .sbh-manjira { cursor: pointer; outline: none; }
.sbh-dholak.is-hit .sbh-dh-hit { animation: sbhHit .35s ease-out; }
@keyframes sbhHit { 0% { opacity: .55; } 100% { opacity: 0; } }
.sbh-dholak.is-hit { animation: sbhNudge .25s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes sbhNudge { 50% { transform: scale(1.02); } }
.sbh-mj-l, .sbh-mj-r { transform-box: fill-box; transform-origin: 50% 50%; }
.sbh-manjira.is-hit .sbh-mj-l { animation: sbhMjL .4s ease-out; } .sbh-manjira.is-hit .sbh-mj-r { animation: sbhMjR .4s ease-out; }
@keyframes sbhMjL { 40% { transform: translateX(14px) rotate(-10deg); } } @keyframes sbhMjR { 40% { transform: translateX(-14px) rotate(10deg); } }
.sbh-manjira.is-hit .sbh-mj-spark { animation: sbhHit .5s ease-out; }
/* puja vidhi */
.sbh-pv-it .sbh-pv-in { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .6s cubic-bezier(.2,1.6,.4,1); }
.sbh-pv-it.is-on .sbh-pv-in { opacity: 1; transform: none; }
.sbh-pv-it.is-now .sbh-pv-in { filter: drop-shadow(0 0 10px rgba(255,226,150,.95)); }
.sbh-pv-aarti { opacity: 0; transition: opacity .6s; }
.sbh-pujavidhi.is-aarti .sbh-pv-aarti { opacity: 1; }
@media (max-width: 900px) {
  .has-scene { grid-template-columns: 1fr; padding: 22px 18px !important; text-align: center; }
  .has-scene .sbh-scene { order: -1; width: min(100%, 340px); }
  .has-scene > .page-hero-content, .has-scene > .hero-content, .has-scene > .sb-sd-hero-in { text-align: center; justify-self: center; }
  .has-scene .page-hero-divider, .has-scene .hero-divider { margin-left: auto; }
  .has-scene .hero-stats, .has-scene .hero-badges, .has-scene .sb-sd-stats { justify-content: center; margin-left: auto; }
  .sbh-scene .sbh-sound { position: relative; top: auto; right: auto; left: 50%; transform: translateX(-50%); margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sbh-sl { animation: none; opacity: 1; } .sbh-sw { animation: none; } .sbh-pv-it .sbh-pv-in { opacity: 1; transform: none; } }

/* ── BLISS JOURNAL · YOGA · AYURVEDA (Patch 45) ────────── */
.sbh-jr-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16/10.5; perspective: 1400px; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.sbh-jr-left, .sbh-jr-right { position: relative; background: linear-gradient(90deg, #f3e3c3, #fbf1dc 70%, #efdcb6); padding: 22px 20px; overflow: hidden; }
.sbh-jr-left { border-radius: 14px 0 0 14px; box-shadow: inset -18px 0 24px -12px rgba(120,80,30,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.sbh-jr-right { border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #efdcb6, #fbf1dc 30%, #f3e3c3); box-shadow: inset 18px 0 24px -12px rgba(120,80,30,.35); }
.sbh-jr-mandala { position: absolute; inset: 10%; width: 80%; height: 80%; color: #c9933e; opacity: .18; }
.sbh-jr-mono { font-family: var(--font-hindi, serif); font-size: 3rem; color: #a0582a; line-height: 1; position: relative; }
.sbh-jr-lt { font-family: var(--font-display, serif); font-size: 1.05rem; color: #5a2410; position: relative; line-height: 1.25; }
.sbh-jr-lh { font-family: var(--font-hindi, serif); color: #a0582a; position: relative; font-size: .95rem; }
.sbh-jr-page { position: absolute; inset: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; text-decoration: none; opacity: 0; transition: opacity .6s .25s; }
.sbh-jr-page.is-on { opacity: 1; }
.sbh-jr-cat { font: 700 .62rem/1.2 var(--font-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #a0582a; }
.sbh-jr-title { font-family: var(--font-display, serif); font-size: 1.22rem; line-height: 1.25; color: #3a1608; }
.sbh-jr-line { display: block; height: 2px; width: 0; background: linear-gradient(90deg, #a0582a, transparent); }
.sbh-jr-page.is-on .sbh-jr-line { animation: sbhInk 2.4s ease-out .6s forwards; }
@keyframes sbhInk { to { width: 80%; } }
.sbh-jr-date { font-size: .74rem; color: #8a5a2a; }
.sbh-jr-page:hover .sbh-jr-title { text-decoration: underline; }
.sbh-jr-turn { position: absolute; inset: 0; background: linear-gradient(90deg, #e6cfa0, #fbf1dc 60%, #f6e6c6); transform-origin: 0 50%; transform: rotateY(0) scaleX(0); opacity: 0; border-radius: 0 14px 14px 0; box-shadow: -8px 0 18px rgba(0,0,0,.18); pointer-events: none; }
.sbh-journal.is-turn .sbh-jr-turn { animation: sbhTurn .9s ease-in-out; }
@keyframes sbhTurn { 0% { opacity: 1; transform: rotateY(0) scaleX(1); } 100% { opacity: 1; transform: rotateY(-180deg) scaleX(1); } }
.sbh-scene svg.sbh-jr-quill { position: absolute; right: -10px; bottom: -26px; width: 52px; height: auto; transform-origin: 20% 95%; animation: sbhQuill 2.6s ease-in-out infinite; }
@keyframes sbhQuill { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translate(-4px, 2px); } 60% { transform: rotate(4deg) translate(3px, -1px); } }
/* yoga */
.sbh-yb, .sbh-yb-ring { transform-box: fill-box; transform-origin: center; }
.sbh-yoga[data-ph="in"] .sbh-yb, .sbh-yoga[data-ph="in"] .sbh-yb-ring { transform: scale(1.12); transition: transform 4s ease-in-out; }
.sbh-yoga[data-ph="hold"] .sbh-yb, .sbh-yoga[data-ph="hold"] .sbh-yb-ring { transform: scale(1.12); }
.sbh-yoga[data-ph="out"] .sbh-yb, .sbh-yoga[data-ph="out"] .sbh-yb-ring { transform: scale(.82); transition: transform 4s ease-in-out; }
.sbh-yb-ring { opacity: .7; }
.sbh-ck { opacity: .35; transition: opacity .5s, r .5s; filter: drop-shadow(0 0 4px var(--cc)); }
.sbh-ck.is-on { opacity: 1; r: 8.5px; filter: drop-shadow(0 0 10px var(--cc)); }
.sbh-yg-btn { position: absolute; left: 34%; top: 32%; width: 32%; height: 52%; border: 0; background: transparent; cursor: pointer; z-index: 3; border-radius: 50%; }
.page-hero.has-scene:has(.sbh-yoga) .hero-om-bg { display: none; }
/* ayurveda */
.sbh-pestle { transform-box: view-box; transform-origin: 196px 252px; animation: sbhGrind 1.5s ease-in-out infinite; }
@keyframes sbhGrind { 0% { transform: rotate(-8deg) translate(-8px, 0); } 25% { transform: rotate(0) translate(0, 3px); } 50% { transform: rotate(8deg) translate(8px, 0); } 75% { transform: rotate(0) translate(0, -2px); } 100% { transform: rotate(-8deg) translate(-8px, 0); } }
.sbh-ds { cursor: pointer; outline: none; transition: transform .4s; }
.sbh-ds-t { font: 700 16px/1 var(--font-hindi, serif); }
.sbh-ds.is-on circle:first-child { opacity: .45; }
.sbh-ds.is-on { filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
@media (max-width: 900px) { .sbh-jr-title { font-size: 1rem; } .sbh-jr-lt { font-size: .9rem; } .sbh-jr-mono { font-size: 2.2rem; } .sbh-scene svg.sbh-jr-quill { width: 40px; right: -6px; } }
.sbh-journal .sbh-sound { top: -40px; }
@media (prefers-reduced-motion: reduce) { .sbh-jr-quill, .sbh-pestle { animation: none; } .sbh-yoga .sbh-yb, .sbh-yoga .sbh-yb-ring { transition: none !important; } }
/* phones: centre every scene's Sound button the simple way (left:50% + translate doubled up under text-align:center) */
@media (max-width: 900px) {
  .sbh-scene .sbh-sound, .sbh-moonscene .sbh-sound, .sbh-gallery .sbh-sound, .sbh-wheel .sbh-sound {
    position: relative; top: auto; right: auto; left: auto; transform: none; display: flex; width: max-content; margin: 8px auto 0; }
}

/* ── layout fixes found while checking the hub pages (Patch 45b): no sideways scrolling ── */
.page-hero.has-scene, .page-hero.has-moon, .sb-sd-hero.has-scene { overflow: hidden; }
.main-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) !important; }
.main-layout > * { min-width: 0; }
@media (max-width: 900px) { .main-layout { grid-template-columns: minmax(0, 1fr) !important; } }
.fp-steps-preview { flex-wrap: wrap; max-width: 100%; }
.tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
.tab-bar::-webkit-scrollbar { display: none; }
.smh-content, .smh-content > * { min-width: 0; max-width: 100%; }
.smh-def-h2, .smh-def-deva { overflow-wrap: anywhere; }
/* Patch 46: labels on the tithi ring — the yellow marker is today's tithi; green beads are the two Ekadashis */
.sbh-tmark-l { font: 700 10.5px/1 var(--font-body, sans-serif); fill: #ffd166; letter-spacing: .04em; paint-order: stroke; stroke: rgba(8,10,30,.85); stroke-width: 3px; pointer-events: none; }
.sbh-ek-l { font: 600 11px/1 var(--font-hindi, sans-serif); fill: #9ff0b8; paint-order: stroke; stroke: rgba(8,10,30,.8); stroke-width: 3px; }

/* ── PRADOSH hub: Pradosh kaal at the Shivalinga (Patch 46) ── */
.pd-hero.has-scene { position: relative; overflow: hidden; }
@media (min-width: 1025px) {
  .pd-hero.has-scene { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px; text-align: left; padding-left: max(24px, 5vw); padding-right: max(24px, 4vw); }
  .pd-hero.has-scene .pd-hero-text { max-width: 620px; }
  .pd-hero.has-scene .pd-hero-sub { margin-left: 0; margin-right: 0; }
  .pd-hero.has-scene .pd-hero-stats, .pd-hero.has-scene .sb-year-switch { justify-content: flex-start !important; }
}
.sbh-pradosh { position: relative; width: min(100%, 380px); margin: 0 auto; padding-top: 22px; }
.pd-hero.has-scene { padding-top: 40px; }
.sbh-pd-stage { position: relative; }
.sbh-pd-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.sbh-pd-frame { fill: none; stroke: #e9b949; stroke-width: 3; }
.sbh-pd-tap { cursor: pointer; outline: none; }
.sbh-pd-drop { fill: #cfe8ff; opacity: 0; animation: sbhPdDrop 1.41s cubic-bezier(.5,0,1,1) var(--dd) infinite; }
@keyframes sbhPdDrop { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .95; } 92% { opacity: .95; } 100% { transform: translateY(44px); opacity: 0; } }
.sbh-pd-splash { fill: none; stroke: #cfe8ff; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sbhPdSplash .47s ease-out infinite; }
@keyframes sbhPdSplash { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
.sbh-pradosh.is-ring .sbh-pd-svg { animation: sbhPdRing 1.2s ease-out; }
@keyframes sbhPdRing { 0% { filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); } 30% { filter: drop-shadow(0 0 30px rgba(255,210,120,.7)); } 100% { filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); } }
.sbh-pd-card { margin: -6px auto 0; position: relative; z-index: 2; width: 94%; padding: 12px 16px; border-radius: 14px; text-align: center; background: rgba(14,8,22,.82); border: 1px solid rgba(245,194,107,.45); display: flex; flex-direction: column; gap: 3px; color: #fff; }
.sbh-pd-card .sbh-mc-n span { color: #ffd98a; font-family: var(--font-hindi, serif); }
.sbh-pd-kaal { font-size: .72rem; color: rgba(255,240,210,.65); }
.sbh-pradosh .sbh-sound { top: 8px; right: 8px; }
@media (max-width: 1024px) { .sbh-pradosh { margin-top: 18px; width: min(100%, 340px); } }
@media (prefers-reduced-motion: reduce) { .sbh-pd-drop, .sbh-pd-splash { animation: none; } }

/* Patch 49 · Purnima: silver moonlit night, glowing full-moon bead, beads still to go, shimmering water */
.page-hero.has-moon:has(.sbh-m-purnima) .page-hero-bg { background: radial-gradient(55% 75% at 76% 42%, rgba(235,240,255,.30), transparent 70%), linear-gradient(165deg, #0f1a3d 0%, #1d2a5c 48%, #2b1f4d 100%); }
.sbh-m-purnima .sbh-mglow2 { opacity: 1; transform-origin: 220px 200px; animation: sbhPuGlow 6s ease-in-out infinite; }
@keyframes sbhPuGlow { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.sbh-m-purnima .sbh-tb.is-purnima { r: 10px; filter: drop-shadow(0 0 10px #fff3c4) drop-shadow(0 0 4px #fff); animation: sbhPuBead 3s ease-in-out infinite; }
@keyframes sbhPuBead { 0%,100% { opacity: 1; } 50% { opacity: .75; } }
.sbh-m-purnima .sbh-tb.is-way { fill: #f3d58a; opacity: .9; }
.sbh-m-purnima .sbh-tl-c:first-of-type { fill: #fff3c4; }
.sbh-pu-sh { opacity: .2; animation: sbhPuSh 3.4s ease-in-out var(--sd, 0s) infinite; }
@keyframes sbhPuSh { 0%,100% { opacity: .15; } 50% { opacity: .85; } }
.sbh-pu-steam { animation: sbhPuSteam 4s ease-in-out infinite; }
@keyframes sbhPuSteam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .sbh-pu-sh, .sbh-pu-steam, .sbh-m-purnima .sbh-tb.is-purnima, .sbh-m-purnima .sbh-mglow2 { animation: none; } }

/* Patch 50 · Somvati Amavasya: moonless Monday night, peepal with sacred thread, Shivling */
.page-hero.has-moon:has(.sbh-m-somvati) .page-hero-bg { background: radial-gradient(55% 75% at 76% 45%, rgba(150,170,255,.16), transparent 70%), linear-gradient(165deg, #070a22 0%, #12123a 55%, #200c22 100%); }
.sbh-m-somvati .sbh-tb.is-amavasya { r: 10px; filter: drop-shadow(0 0 9px rgba(245,194,107,.85)); }
.sbh-pp-lv { transform-origin: 0 -70px; animation: sbhPpSway 7s ease-in-out infinite; }
@keyframes sbhPpSway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.sbh-pp-thr path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: sbhPpThr 6s ease-in-out infinite; }
@keyframes sbhPpThr { 0% { stroke-dashoffset: 30; } 40%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
@media (prefers-reduced-motion: reduce) { .sbh-pp-lv, .sbh-pp-thr path { animation: none; stroke-dashoffset: 0; } }