/* The Forge — Constellation background (Three.js) */

.forge-constellation {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(252, 209, 22,.05), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(96,165,250,.04), transparent 40%),
    var(--forge-bg, #0A0C10);
}
.forge-constellation canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Static fallback grid — shown when WebGL unavailable or reduced motion */
.forge-constellation-fallback {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(252, 209, 22,.05), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(96,165,250,.04), transparent 45%),
    linear-gradient(var(--forge-bg, #0A0C10), var(--forge-bg, #0A0C10));
}
.forge-constellation-fallback::before,
.forge-constellation-fallback::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,.8), transparent 70%);
}

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .forge-constellation { display: none; }
}
@media (max-width: 860px) {
  .forge-constellation-fallback { display: block; }
}