/* djjs.us · schema patch 39.34: the Divine Rudra Naad & Jyoti Sanctum (assets/js/rudri-divine-webgl.js) behind the Sunday
   Rudri Path practice stage. The host .rudri__aura[data-rudri-aura] is the stage's first child, z-index 0, behind the text;
   data-mode on it says which light shows: gl (the module's canvas), css (the 2.5D parallax of layered gradients: a star band,
   soft streaks, concentric rings; --rudri-px / --rudri-py come from the pointer and the scroll), static (the same layers,
   still: prefers-reduced-motion), focus (the member chose Focus Mode: nothing) or off (forced colours: nothing).
   Abstract light only: no glyph, no emblem, nothing drawn at the centre. The stage is a night scene in both themes (Temple
   Dawn too: assets/css/rudri.css), so the light and the text shadow keep their Temple Dark values whatever <html> says;
   the toggle's two states; forced colours hide the light, its caption and its toggle. */
.rudri__stage { position: relative; isolation: isolate; }
.rudri__stage > :not(.rudri__aura) { position: relative; z-index: 1; }
.rudri__aura {
  --rudri-aura-ring: rgba(245, 180, 80, 0.26);
  --rudri-aura-ring-rim: rgba(252, 211, 120, 0.36);
  --rudri-aura-glow: rgba(245, 158, 11, 0.15);
  --rudri-aura-ray: rgba(245, 158, 11, 0.11);
  --rudri-aura-star: rgba(252, 251, 247, 0.5);
  --rudri-aura-star-gold: rgba(252, 211, 120, 0.95);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit;
  contain: layout paint;
}
.rudri__aura[hidden], .rudri__aura[data-mode="focus"], .rudri__aura[data-mode="off"] { display: none; }
.rudri-aura__gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rudri__aura[data-mode="gl"] .rudri-aura__css { display: none; }
.rudri__aura:not([data-mode="gl"]) .rudri-aura__gl { display: none; }

/* the CSS light: three layers at three depths (the stars move least, the rings most) */
.rudri-aura__css { position: absolute; inset: 0; }
.rudri-aura__layer { position: absolute; inset: -28px; will-change: translate; }
.rudri-aura__layer--stars { translate: calc(var(--rudri-px, 0) * 6px) calc(var(--rudri-py, 0) * 6px); }
.rudri-aura__layer--rays {
  translate: calc(var(--rudri-px, 0) * 12px) calc(var(--rudri-py, 0) * 12px);
  /* a few soft shafts of light falling from above at uneven angles and widths (never spokes from the centre), fading downward */
  background:
    linear-gradient(104deg, transparent 30%, var(--rudri-aura-ray) 36%, transparent 43%),
    linear-gradient(112deg, transparent 47%, var(--rudri-aura-ray) 50%, transparent 54%),
    linear-gradient(99deg, transparent 58%, var(--rudri-aura-ray) 63%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.5) 55%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.5) 55%, transparent 95%);
  animation: rudri-aura-drift 23s ease-in-out infinite alternate;
}
.rudri-aura__layer--rings {
  translate: calc(var(--rudri-px, 0) * 20px) calc(var(--rudri-py, 0) * 20px);
  /* four soft rings, brighter outward (the rim of a sphere of light), and a faint glow at the centre */
  background:
    radial-gradient(circle closest-side at 50% 50%, transparent 0 24.5%, var(--rudri-aura-ring) 26%, transparent 27.8%,
      transparent 46%, var(--rudri-aura-ring) 48%, transparent 50.2%,
      transparent 67.5%, var(--rudri-aura-ring-rim) 70%, transparent 72.6%,
      transparent 88.5%, var(--rudri-aura-ring-rim) 92%, transparent 95.5%),
    radial-gradient(circle closest-side at 50% 50%, var(--rudri-aura-glow), transparent 60%);
  animation: rudri-aura-breathe 7s ease-in-out infinite;
}
@keyframes rudri-aura-breathe { 0%, 100% { scale: 0.975; opacity: 0.78; } 50% { scale: 1.025; opacity: 1; } }
@keyframes rudri-aura-drift { from { opacity: 0.7; rotate: -1.5deg; } to { opacity: 1; rotate: 1.5deg; } }
.rudri__aura[data-running="false"] .rudri-aura__layer { animation-play-state: paused; }
.rudri__aura[data-mode="static"] .rudri-aura__layer { animation: none; translate: none; }
@media (prefers-reduced-motion: reduce) { .rudri-aura__layer { animation: none !important; translate: none !important; } }

/* text over the light keeps its contrast: a soft shadow in the night stage's onyx (both themes) */
.rudri__stage > :not(.rudri__aura) { text-shadow: 0 0 12px rgba(13, 11, 9, 0.85), 0 1px 2px rgba(13, 11, 9, 0.9); }

/* the toggle: "✨ Divine 3D Aura: ON" (aria-pressed="true") / "Focus Mode" (aria-pressed="false") */
[data-rudri-aura-toggle] {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 14px;
  border: 1px solid rgba(217, 119, 6, 0.35); border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-sm, 0.92rem); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
[data-rudri-aura-toggle][hidden] { display: none; }
[data-rudri-aura-toggle][aria-pressed="true"] {
  border-color: rgba(217, 119, 6, 0.6); background: rgba(217, 119, 6, 0.1); color: var(--gold-text);
  box-shadow: 0 0 18px -8px rgba(245, 158, 11, 0.7);
}
[data-rudri-aura-toggle][aria-pressed="false"] { color: var(--muted); }
[data-rudri-aura-toggle]:hover { border-color: rgba(245, 158, 11, 0.7); }
[data-rudri-aura-toggle]:focus-visible { outline: 3px solid var(--focus, #FCD34D); outline-offset: 2px; }
.rudri-aura-toggle__spark { font-size: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { [data-rudri-aura-toggle] { transition: none; } }

/* the caption under the stage: what the light is, and what it is not */
.rudri-aura__caption { margin: 8px 0 0; font-size: var(--fs-xs, 0.8rem); font-style: italic; line-height: 1.45; color: var(--muted); }
.rudri-aura__caption[hidden] { display: none; }

@media (forced-colors: active) {
  .rudri__aura, [data-rudri-aura-toggle], .rudri-aura__caption { display: none !important; }
  .rudri__stage > :not(.rudri__aura) { text-shadow: none; }
}
