/* ambient.css — three very dim, soft parallax layers behind the app + a faint toggle.
   Layers move only via GPU transform; nothing animates while the mouse is still. */
#ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  transition: opacity .8s ease;
}
.amb-layer {
  position: absolute; inset: -10%; will-change: transform;
}
/* One large, smooth wash per layer — well separated so they read as a calm field of
   light rather than overlapping patches. Each fades all the way out (no ring edge). */
.amb-1 { background: radial-gradient(70vmax 70vmax at 12% 18%, rgba(79,101,119,.16), transparent 70%); }
.amb-2 { background: radial-gradient(78vmax 78vmax at 88% 22%, rgba(138,106,85,.15), transparent 70%); }
.amb-3 { background: radial-gradient(82vmax 82vmax at 50% 95%, rgba(58,65,80,.15), transparent 72%); }

/* When turned off: fade the field out and drop the GPU hint (no listeners attached). */
html.amb-off #ambient { opacity: 0; }
html.amb-off .amb-layer { will-change: auto; }

/* Faint toggle, tucked in the bottom-left — barely there until you reach for it. */
.amb-toggle {
  position: fixed; left: 15px; bottom: 15px; z-index: 60;
  width: 27px; height: 27px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--faint, #969ca7); opacity: .30;
  transition: opacity .25s ease, color .2s, background .2s, border-color .2s;
}
.amb-toggle:hover { opacity: .9; background: rgba(255,255,255,.55); border-color: var(--line-soft, #e8eaee); }
.amb-toggle.is-off { opacity: .2; }
.amb-toggle svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) { .amb-layer { will-change: auto; } }