/* ═══════════════════════════════════════════
   touchsight-fx.css — Background visual FX
   ═══════════════════════════════════════════ */

/* ── Atmosphere gradient ── */
.bg-atmosphere {
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(46,163,156,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(208,131,102,.06) 0%, transparent 60%),
    var(--bg);
}

/* ── Subtle grid ── */
.bg-grid {
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,163,156,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,163,156,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* ── Noise texture ── */
.bg-noise {
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ── Floating blobs ── */
.fx-blob {
  position:fixed;border-radius:50%;
  pointer-events:none;z-index:-2;
  filter:blur(70px);
  will-change:transform;
}