:root{
  --bgTintA: rgba(30, 90, 55, .55);
  --bgTintB: rgba(25, 110, 70, .45);
  --bgGlow:  rgba(190, 255, 225, .12);

  /* Theme-driven FX */
  --fxRGB: 180,255,215;   /* fireflies color, set per theme */
  --leafSat: 1.10;
  --leafBri: 1.05;

  /* Cinematic motion vars (set by JS) */
  --px: 0;        /* pointer x in [-1..1] */
  --py: 0;        /* pointer y in [-1..1] */
  --scrollP: 0;   /* scroll progress [0..1] */

  /* Sun position (set by JS) */
  --sunX: 55%;
  --sunY: 18%;
}

.bg-stage{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  isolation: isolate;
  perspective: 1000px;

  /* Scene-driven background (night -> day) */
  background: radial-gradient(
    1200px 800px at 50% 35%,
    var(--sceneBgTop, #0b1a12),
    var(--sceneBgBottom, #050608)
  );
}

.bg-layer{
  position:absolute;
  inset:-10vh -10vw;
  pointer-events:none;
  will-change: translate, transform;
}

.bg-canopy{
  background:
    radial-gradient(900px 520px at 25% 10%, var(--bgTintA), transparent 60%),
    radial-gradient(900px 520px at 75% 10%, var(--bgTintB), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18) 45%, rgba(0,0,0,.62));
  opacity:.98;

  /* Cinematic parallax (very subtle) */
  translate: calc(var(--px) * -6px) calc(var(--py) * -5px);
}

.bg-foliage{
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(40,140,80,.30), transparent 70%),
    radial-gradient(700px 340px at 80% 35%, rgba(35,120,75,.25), transparent 70%),
    radial-gradient(500px 260px at 50% 55%, rgba(15,60,40,.40), transparent 70%);
  mix-blend-mode: screen;
  opacity:.60;
  filter: blur(1px);

  translate: calc(var(--px) * -10px) calc(var(--py) * -8px);
}

.bg-fog{
  background:
    radial-gradient(1000px 700px at 50% 60%, var(--bgGlow), transparent 65%),
    radial-gradient(800px 300px at 50% 95%, rgba(0,0,0,.76), transparent 60%);
  filter: blur(7px);
  animation: fogMove 18s ease-in-out infinite alternate;

  /* driven by JS scene */
  opacity: var(--fogOpacity, .95);

  translate: calc(var(--px) * -8px) calc(var(--py) * -6px);
}

@keyframes fogMove{
  from{ transform: translateX(-2vw) scale(1.04); }
  to{ transform: translateX(2vw) scale(1.08); }
}

/* Leaves */
.bg-leaf{
  position:absolute;
  border-radius: 80% 20% 85% 15% / 40% 35% 65% 60%;
  background:
    radial-gradient(110% 100% at 20% 20%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(25,120,70,.92), rgba(4,25,16,.94));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  pointer-events:none;

  /* Theme-driven */
  filter: saturate(var(--leafSat)) brightness(var(--leafBri));

  /* Cinematic parallax:
     each leaf gets --d set by JS (depth); translate uses pointer + scroll */
  translate:
    calc(var(--px) * var(--d, 0.10) * 46px)
    calc(var(--py) * var(--d, 0.10) * 38px + var(--scrollP) * var(--d, 0.10) * 18px);

  /* keep your original subtle motion but without clobbering translate */
  animation: swayRotate 8s ease-in-out infinite;
}
.bg-leaf::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(var(--fxRGB), 0.28);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* Rotate-only animation so translate parallax remains intact */
@keyframes swayRotate{
  0%{ rotate: -2deg; }
  50%{ rotate: 3deg; }
  100%{ rotate: -2deg; }
}

#bgFx{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bg-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(
    1200px 800px at 50% 40%,
    transparent,
    rgba(0,0,0,var(--sceneVignette,0.72))
  );
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg-fog{ animation:none; }
  .bg-leaf{ animation:none; }
}

/* Daylight overlay (sun + rays) — FIXED:
   No more ugly parallel straight lines.
   Rays are radial (conic) + softly masked. */
.bg-daylight{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity 1.8s ease;
  will-change: opacity;

  /* Sun glow + conic rays + gentle wash */
  background:
    /* Sun disk + bloom */
    radial-gradient(
      900px 520px at var(--sunX) var(--sunY),
      rgba(255,245,210,.58),
      rgba(255,245,210,.22) 42%,
      rgba(255,255,255,.10) 62%,
      transparent 78%
    ),
    /* Radial rays (NOT parallel lines) */
    repeating-conic-gradient(
      from 210deg at var(--sunX) var(--sunY),
      rgba(255,245,210,.055) 0deg 7deg,
      transparent 7deg 18deg
    ),
    /* Soft daylight wash */
    linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,0) 58%
    );

  mix-blend-mode: screen;

  /* Soften rays + avoid harsh banding */
  filter: blur(0.35px);

  /* Mask rays so they don't extend harshly across the whole screen */
  -webkit-mask-image: radial-gradient(
    900px 600px at var(--sunX) var(--sunY),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.35) 58%,
    rgba(0,0,0,0) 78%
  );
  mask-image: radial-gradient(
    900px 600px at var(--sunX) var(--sunY),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.35) 58%,
    rgba(0,0,0,0) 78%
  );

  /* Slight parallax for cinematic depth */
  translate: calc(var(--px) * -8px) calc(var(--py) * -6px);
}

body.day .bg-daylight{ opacity:1; }

/* Day: fog almost off (remove misty wash).
   JS also drives --fogOpacity via scene, but we clamp it further here. */
body.day .bg-fog{
  opacity: 0.05;
  filter: blur(5px);
}