/* ============================================================
   HELIOCASTLE — BACKGROUND
   The night sky behind the page: blueprint grid, hidden columns,
   volumetric beam, vignette. The moving stars are js/starfield.js.
   ============================================================ */

/* ============================================================
   CINEMATIC BACKGROUND
   ============================================================ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* blueprint grid — barely there */
.bg-grid {
  position: absolute;
  inset: -2%;
  background-image:
    linear-gradient(rgb(var(--accent-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(rgb(var(--ink-rgb) / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.025) 1px, transparent 1px);
  background-size: 420px 420px, 420px 420px, 84px 84px, 84px 84px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.5;
}

/* ancient columns hidden in darkness */
.bg-columns {
  position: absolute;
  top: 4%;
  width: 34vw;
  height: 84vh;
  /* path is relative to this stylesheet, so step out of css/ */
  background: url("../assets/logo-mark.png") no-repeat center / contain;
  filter: blur(10px);
  opacity: 0.03;
}
.bg-columns--left { left: -17vw; transform: scaleX(-1); }
.bg-columns--right { right: -18vw; top: 26%; height: 66vh; opacity: 0.025; filter: blur(12px); }

/* volumetric light */
.bg-beam {
  position: absolute;
  top: -30%;
  left: 42%;
  width: 70%;
  height: 130%;
  background: radial-gradient(48% 42% at 50% 42%, rgb(var(--emit-rgb) / calc(0.06 * var(--emit-a))), transparent 68%);
  animation: beam-breathe 9s ease-in-out infinite;
}
@keyframes beam-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 110% at 50% 50%, transparent 52%, rgb(var(--shadow-rgb) / calc(0.55 * var(--shadow-a))) 100%),
    linear-gradient(180deg, rgb(var(--shadow-rgb) / calc(0.35 * var(--shadow-a))), transparent 18%, transparent 80%, rgb(var(--shadow-rgb) / calc(0.5 * var(--shadow-a))));
}