---
// Persistent space background. Placed in the layout → loaded on all pages.
// Content remains 100% readable and functional even if WebGL fails (decorative).
---

<canvas id="space-canvas" class="space-canvas" aria-hidden="true"></canvas>

<style lang="scss">
  .space-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
    // slight overlay tint to ground the content on top
    background:
      radial-gradient(
        120% 80% at 50% -10%,
        color-mix(in srgb, var(--nds-primary) 7%, transparent),
        transparent 60%
      ),
      var(--nds-background);
  }
</style>

<script>
  import { initScene, type SceneHandle } from './scene/scene';

  declare global {
    interface Window {
      __novaScene?: SceneHandle;
    }
  }

  const canvas = document.getElementById('space-canvas') as HTMLCanvasElement | null;

  if (canvas && !window.__novaScene) {
    try {
      const handle = initScene(canvas);
      window.__novaScene = handle;
      // notify page scripts that the scene is ready
      window.dispatchEvent(new CustomEvent<SceneHandle>('nova:scene-ready', { detail: handle }));
    } catch (err) {
      // WebGL unavailable: fail silently, the website remains fully usable.
      console.warn('[nova] 3D background disabled:', err);
      canvas.style.display = 'none';
    }
  }
</script>