/* ═══════════════════════════════════════════════════════════════════════════
   background.css — Animated Gradient Mesh Background
   Kmisetas · Three drifting "light orb" layers over deep dark base

   Architecture:
     #bg-canvas  — WebGL/2D canvas controlled by js/background.js
                   (particle noise, shimmer, subtle animation)
     #mesh-bg    — Pure-CSS gradient orbs that drift via @keyframes.
                   Lives *below* content but above the raw body color.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gradient Mesh Container ───────────────────────────────────────────────── */
#mesh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* Deep space base color (also set on body, this ensures coverage) */
  background: #0a0a0f;
}

/* ── Shared Orb Base ───────────────────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform;
  /* pointer-events already off from parent */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORB 1 — Amber (warm upper-left accent)
   Color: #ff9500 · Opacity: ~0.20
   ───────────────────────────────────────────────────────────────────────────── */
.orb-amber {
  width: 60vmax;
  height: 60vmax;

  /* Start position: upper-left quadrant */
  top: -15%;
  left: -10%;

  background: radial-gradient(
    ellipse at center,
    rgba(255, 149, 0, 0.22)   0%,
    rgba(255, 149, 0, 0.10)  40%,
    rgba(255, 149, 0, 0.00) 100%
  );

  animation: drift-amber 28s ease-in-out infinite alternate;
}

@keyframes drift-amber {
  0%   { transform: translate(0,    0);       }
  25%  { transform: translate(8vw,  6vh);     }
  50%  { transform: translate(5vw,  14vh);    }
  75%  { transform: translate(-3vw, 10vh);    }
  100% { transform: translate(12vw, 4vh);     }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORB 2 — Blue (cool center-right pulse)
   Color: #007aff · Opacity: ~0.18
   ───────────────────────────────────────────────────────────────────────────── */
.orb-blue {
  width: 55vmax;
  height: 55vmax;

  /* Start position: right-center */
  top: 20%;
  right: -15%;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 122, 255, 0.20)   0%,
    rgba(0, 122, 255, 0.08)  45%,
    rgba(0, 122, 255, 0.00) 100%
  );

  animation: drift-blue 24s ease-in-out infinite alternate;
}

@keyframes drift-blue {
  0%   { transform: translate(0,     0);    }
  30%  { transform: translate(-10vw, 8vh);  }
  60%  { transform: translate(-6vw,  -5vh); }
  100% { transform: translate(-14vw, 12vh); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORB 3 — Magenta (warm lower-center anchor)
   Color: #ff2d55 · Opacity: ~0.15
   ───────────────────────────────────────────────────────────────────────────── */
.orb-magenta {
  width: 50vmax;
  height: 50vmax;

  /* Start position: lower-center / left */
  bottom: -10%;
  left: 20%;

  background: radial-gradient(
    ellipse at center,
    rgba(255, 45, 85, 0.18)   0%,
    rgba(255, 45, 85, 0.07)  40%,
    rgba(255, 45, 85, 0.00) 100%
  );

  animation: drift-magenta 32s ease-in-out infinite alternate;
}

@keyframes drift-magenta {
  0%   { transform: translate(0,    0);     }
  20%  { transform: translate(6vw,  -8vh);  }
  55%  { transform: translate(14vw, -4vh);  }
  80%  { transform: translate(8vw,  -12vh); }
  100% { transform: translate(-4vw, -6vh);  }
}

/* ── Vignette overlay — subtle dark edge darkening ─────────────────────────── */
#mesh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent   40%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}

/* ── Reduced-motion: freeze orbs in place ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb-amber,
  .orb-blue,
  .orb-magenta {
    animation: none;
  }
}