/* ============================================================
   Spatial portfolio · environment layers (js/space/env.js)
   Fixed full-viewport stack behind the space. Every layer is a
   canvas moved with transforms only.
   ============================================================ */
.vx-env {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  contain: strict; isolation: isolate;
  background: linear-gradient(rgb(var(--vx-sky-top)), rgb(var(--vx-sky-bottom)) 65%, rgb(var(--vx-ground)));
}
.vx-env__layer { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.vx-env__sky, .vx-env__atmo, .vx-env__stars, .vx-env__fx { width: 100%; height: 100%; will-change: auto; }

/* soft grain-free vignette that frames the scene and keeps edges calm */
.vx-env::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 42%, transparent 58%, rgb(0 0 0 / 0.22) 100%);
}
html.dark .vx-env::after { background: radial-gradient(130% 95% at 50% 42%, transparent 52%, rgb(0 0 0 / 0.38) 100%); }

/* first visit: the world fades up and settles while the sun rises */
.vx-env.is-intro { animation: vx-env-in 2.2s var(--vx-ease-out) both; }
@keyframes vx-env-in {
  from { opacity: 0; transform: scale(1.06); filter: brightness(0.6); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-env.is-intro { animation: none; }
}