/* ─── Fixed ambient background layers ─────────────────────────────
 * Stacking order (back → front):
 *   .god-scene    (-12) per-deity animated scene: gradient sky + rays + aura
 *                          + transparent 3D-style figure
 *   .bg-scrim     (-11) dark overlay that keeps content readable
 *   #universe-canvas (-10) stars
 *   .universe-nebula ( -9) per-theme colour glows
 *   .universe-texture( -8) mandala pattern
 *   .universe-symbol ( -7) giant watermark glyph
 *   .mandala-bg     ( -6) rotating gold ornament
 *   .particles / .diya-glow / corners (z-index 1) above layers, below content (z 10)
 * All layers are pointer-events: none so they never block interaction. */

.god-scene {
  position: fixed;
  z-index: -12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 116%, var(--si-scene-glow, rgba(255, 150, 50, .18)), transparent 58%),
    linear-gradient(to bottom, var(--si-bg-0), var(--si-bg-1) 52%, var(--si-bg-2));
  transition: background var(--si-theme-transition);
}

/* Slowly rotating divine rays behind the figure. */
.god-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vmin, 1250px);
  height: min(150vmin, 1250px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--si-rays-color, rgba(255, 200, 110, .13)) 0deg 7deg,
    transparent 7deg 26deg
  );
  opacity: var(--si-rays-opacity, .55);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  animation: raysSpin 110s linear infinite;
}

/* Pulsing halo that glorifies the figure — a bright core + per-theme colored glow
 * so even dark/blue figures (Shiva, Vishnu, Shani) pop against the scene. */
.god-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(96vmin, 900px);
  height: min(96vmin, 900px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 22%, transparent 52%),
    radial-gradient(circle, var(--si-aura-color, rgba(255, 160, 60, .16)) 0%, transparent 66%);
  animation: auraPulse 7s ease-in-out infinite;
}

/* The deity itself — transparent figure, floating higher up the viewport
 * so it is clearly visible behind the hero (not hugging the bottom edge). */
.god-figure {
  position: absolute;
  left: 50%;
  bottom: 18vh;
  width: min(72vh, 560px);
  height: min(80vh, 640px);
  transform: translateX(-50%);
  background: var(--si-figure-url) center / contain no-repeat;
  filter: drop-shadow(0 0 55px var(--si-figure-glow, rgba(255, 170, 60, .5)))
          drop-shadow(0 22px 55px rgba(0, 0, 0, .55));
  animation: godFloat 9s ease-in-out infinite;
}

/* Laptop / desktop: keep the figure fully below the sticky header.
   Mobile sizing stays in 50-responsive.css and is already correct. */
@media (min-width: 768px) {
  .god-figure {
    top: calc(var(--si-nav-height) + 2.25rem);
    bottom: 8vh;
    width: min(44vw, 520px);
    height: auto;
    max-height: calc(100vh - var(--si-nav-height) - 8vh - 2.25rem);
    max-height: calc(100dvh - var(--si-nav-height) - 8vh - 2.25rem);
  }
}

.bg-scrim {
  position: fixed;
  z-index: -11;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 4, 1, .66) 0%,
      rgba(8, 4, 1, .30) 24%,
      rgba(8, 4, 1, .14) 46%,
      rgba(8, 4, 1, .34) 72%,
      rgba(8, 4, 1, .76) 100%);
  transition: background var(--si-theme-transition);
}

#universe-canvas {
  position: fixed;
  z-index: -10;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.universe-nebula {
  position: fixed;
  z-index: -9;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 12%, var(--si-nebula-a), transparent 31rem),
    radial-gradient(circle at 7% 61%, var(--si-nebula-b), transparent 29rem),
    radial-gradient(circle at 72% 92%, var(--si-nebula-c), transparent 27rem);
  transition: background var(--si-theme-transition);
}

.universe-texture {
  position: fixed;
  z-index: -8;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background-image: url("../images/mandala-grid.svg");
  background-size: 360px 360px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
}

.universe-symbol {
  position: fixed;
  z-index: -7;
  right: -.04em;
  bottom: -.26em;
  pointer-events: none;
  color: rgba(var(--si-primary-rgb), .05);
  font-family: var(--si-font-devanagari);
  font-size: min(45vw, 650px);
  line-height: 1;
  text-shadow: 0 0 55px rgba(var(--si-secondary-rgb), .06);
  transition: color var(--si-theme-transition), text-shadow var(--si-theme-transition);
}

.mandala-bg {
  position: fixed;
  z-index: -6;
  top: 50%;
  left: 50%;
  width: min(118vmin, 980px);
  height: min(118vmin, 980px);
  transform: translate(-50%, -50%);
  background: url("../images/mandala-ornament.svg") center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
  animation: mandalaSpin 150s linear infinite;
}

/* ─── Floating particles ─── */
.particles-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  font-size: 1rem;
  opacity: 0;
  animation: floatUp linear infinite;
  filter: blur(.3px);
}

/* ─── Flower petals pelting down over the scene ─── */
.petals-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -8%;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C22 9 26 14 26 20a10 10 0 0 1-20 0C6 14 10 9 16 2Z' fill='%23ff9db1'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: petalFall linear infinite;
  will-change: transform, opacity;
}

/* ─── Diya glow at the bottom edge ─── */
.diya-glow {
  position: fixed;
  bottom: -40px;
  left: 50%;
  width: 340px;
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 167, 38, .22) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  animation: diyaFlicker 3.4s ease-in-out infinite alternate;
}

/* ─── Corner ornaments ─── */
.corner-ornament {
  position: fixed;
  z-index: 1;
  width: clamp(72px, 12vw, 150px);
  height: auto;
  pointer-events: none;
  opacity: .22;
}
.corner-ornament.tl { top: 0; left: 0; }
.corner-ornament.tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-ornament.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-ornament.br { bottom: 0; right: 0; transform: scale(-1); }