/* =========================================
   BACKGROUND — background.css
   ========================================= */

/* ── CANVAS ──────────────────────────────── */

.bg-canvas {
  position:   fixed;
  inset:      0;
  z-index:    -10;
  overflow:   hidden;
  pointer-events: none;
  contain:    strict;   /* Android: prevents layout bleed */
  max-width:  100vw;
}

/* ── COLUMN GRID ─────────────────────────── */

.bg-grid {
  position: absolute;
  inset:    0;

  background-image:
    linear-gradient(
      to right,
      var(--grid-color) 1px,
      transparent       1px
    );

  /* 8 equal columns on 1440px = 180px each */
  background-size: 12.5% 100%;
}

/* ── ORB 1 ───────────────────────────────── */

.bg-orb-1 {
  position:      absolute;
  width:         560px;
  height:        560px;
  border-radius: 50%;
  background:    rgba(26,70,201,0.10);
  filter:        blur(140px);
  top:           -80px;
  left:          -20px;
  opacity:       0.7;
  will-change:   transform;
  animation:     orbDrift1 18s ease-in-out infinite alternate;
}

/* ── ORB 2 ───────────────────────────────── */

.bg-orb-2 {
  position:      absolute;
  width:         440px;
  height:        440px;
  border-radius: 50%;
  background:    rgba(0,0,0,0.05);
  filter:        blur(120px);
  bottom:        0;
  right:         0;
  opacity:       0.6;
  will-change:   transform;
  animation:     orbDrift2 22s ease-in-out infinite alternate;
}

/* ── MOUSE GLOW ──────────────────────────── */

.bg-mouse-glow {
  position:       fixed;
  width:          480px;
  height:         480px;
  border-radius:  50%;
  background:
    radial-gradient(
      circle,
      rgba(100,150,255,0.07) 0%,
      transparent 70%
    );
  filter:         blur(50px);
  pointer-events: none;
  transform:      translate(-50%, -50%);
  z-index:        -5;
  will-change:    left, top;
  transition:     left 0.12s ease, top 0.12s ease;
}

/* ── DRIFT ANIMATIONS ────────────────────── */

@keyframes orbDrift1 {
  from { transform: translate(0, 0)     scale(1.00); }
  to   { transform: translate(40px, 60px) scale(1.08); }
}

@keyframes orbDrift2 {
  from { transform: translate(0, 0)      scale(1.00); }
  to   { transform: translate(-50px, -40px) scale(1.06); }
}

/* ── MOBILE ─────────────────────────────── */

@media (max-width: 768px) {

  .bg-mouse-glow {
    display: none;
  }

  .bg-orb-1 {
    width:  320px;
    height: 320px;
  }

  .bg-orb-2 {
    width:  260px;
    height: 260px;
  }

}