/* ============================================================
   ENCHANTED FOREST — animated background
   Soft sunlight god-rays through the canopy + drifting fireflies.
   Fixed, full-viewport, sits behind all content. Pointer-safe.
   ============================================================ */

.ef-bg {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind page content, above the body color */
  overflow: hidden;
  pointer-events: none;
}

/* warm sun glow leaking in from the top, like light above the treeline */
.ef-bg__sun {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 680px at 72% -12%, rgba(255,240,200,.14), rgba(255,228,160,.05) 38%, transparent 62%),
    radial-gradient(700px 500px at 18% -6%,  rgba(214,205,150,.06), transparent 60%);
}

/* god-ray shafts: blurred diagonal stripes, strongest up top, fading to the floor */
.ef-bg__rays {
  position: absolute;
  top: -25%; left: -15%;
  width: 130%; height: 150%;
  background: repeating-linear-gradient(
    100deg,
    transparent 0, transparent 52px,
    rgba(255,242,205,.045) 52px, rgba(255,242,205,.045) 60px,
    transparent 60px, transparent 150px
  );
  filter: blur(7px);
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 42%, transparent 88%);
          mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 42%, transparent 88%);
  animation: ef-ray-drift 22s ease-in-out infinite alternate;
}
.ef-bg__rays--2 {
  background: repeating-linear-gradient(
    96deg,
    transparent 0, transparent 90px,
    rgba(255,236,190,.035) 90px, rgba(255,236,190,.035) 102px,
    transparent 102px, transparent 230px
  );
  filter: blur(12px);
  animation: ef-ray-drift 31s ease-in-out infinite alternate-reverse;
}

@keyframes ef-ray-drift {
  0%   { transform: translateX(-2%)  skewX(0deg);   opacity: .85; }
  50%  { opacity: 1; }
  100% { transform: translateX(2.5%) skewX(-1.5deg); opacity: .7; }
}

/* faint darkening toward the forest floor at the very bottom */
.ef-bg__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(8,14,10,.55), transparent);
}

/* fireflies */
.ef-bg__flies { position: absolute; inset: 0; }

.ef-firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,205,.95) 0%, rgba(212,175,55,.5) 45%, transparent 72%);
  box-shadow: 0 0 8px 2px rgba(255,230,150,.35);
  opacity: 0;
  animation-name: ef-firefly-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes ef-firefly-float {
  0%   { transform: translate(0, 0);                opacity: 0; }
  12%  { opacity: .9; }
  50%  { transform: translate(var(--dx,40px), var(--dy,-60px)); opacity: 1; }
  88%  { opacity: .85; }
  100% { transform: translate(0, 0);                opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-bg__rays, .ef-firefly { animation: none !important; }
  .ef-firefly { opacity: .55; }
}