/* ============================================================
   03 — BACKGROUND CANVAS, VIGNETTE, CURSOR, SCROLL PROGRESS
   Everything here is page-wide "atmosphere" — it sits behind
   or above the content on every section, not just the hero.
   Driven by: js/modules/scene.js, js/modules/cursor.js,
              js/modules/progress.js
   ============================================================ */

#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(10,13,16,0) 0%,  rgba(10,13,16,0.55) 78%),
    radial-gradient(ellipse at 50% 100%, rgba(10,13,16,0) 40%, rgba(10,13,16,0.85) 100%);
}

.progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  z-index:60;
  transition: width 0.08s linear;
}

.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:420px; height:420px;
  margin-left:-210px; margin-top:-210px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(214,167,86,0.14) 0%, rgba(79,209,197,0.06) 40%, rgba(0,0,0,0) 72%);
  pointer-events:none;
  z-index:2;
  mix-blend-mode: screen;
  will-change: transform;
}

.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:7px; height:7px;
  margin-left:-3.5px; margin-top:-3.5px;
  border-radius:50%;
  background: var(--gold);
  pointer-events:none;
  z-index:61;
  box-shadow: 0 0 12px 2px var(--gold-dim);
}