/* =========================================================
   FullTimeCode Background Effects
   Animated mesh gradient, floating orbs, and particle grid
   ========================================================= */

/* Make the fixed background layer visible behind page content.
   Odysseus content panes (sidebar, chat, modals) keep their own
   backgrounds, so only the viewport gaps reveal this effect. */
body {
  background-color: transparent;
}

/* ── Background container ── */
.ftc-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg, #0B1020);
}

/* ── Animated mesh gradient ── */
.ftc-bg-mesh {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(at 40% 20%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(16, 185, 129, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(163, 230, 53, 0.1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(6, 182, 212, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
  animation: ftc-mesh-move 20s ease infinite;
}

@keyframes ftc-mesh-move {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(2%, 2%) rotate(120deg) scale(1.1); }
  66% { transform: translate(-2%, 1%) rotate(240deg) scale(0.95); }
}

/* ── Floating orbs ── */
.ftc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: ftc-orb-float 15s ease-in-out infinite;
}

.ftc-orb-1 {
  width: 400px;
  height: 400px;
  background: var(--accent, #38bdf8);
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

.ftc-orb-2 {
  width: 300px;
  height: 300px;
  background: var(--accent-secondary, var(--accent-lime, #a3e635));
  top: 40%;
  right: -5%;
  animation-delay: -5s;
}

.ftc-orb-3 {
  width: 350px;
  height: 350px;
  background: var(--accent-tertiary, #10b981);
  bottom: 10%;
  left: 30%;
  animation-delay: -10s;
}

@keyframes ftc-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}

/* ── Particle grid ── */
.ftc-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 50px 50px;
  animation: ftc-particle-float 100s linear infinite;
}

@keyframes ftc-particle-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1000px); }
}