/* Signalane cosmic background — additive layer. Load after signalane-depth.css.
   Layers the static cosmos image behind the SignalField canvas,
   keeps the glass panels floating with a slow drift.
   Home: full brightness. Inner pages: a whisper of dim for readability. */

/* ---- 1. Cosmic background image, fixed behind everything ---- */
.cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-image: url("/img/signalane-cosmos.png");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Keep the old body::before gradient from covering the cosmos image.
   On home, hide it entirely — the image is the background.
   On inner pages, soften it to a whisper so it doesn't fight the image. */
body.page-home::before {
  background: none !important;
}
body.page-inner::before {
  background:
    radial-gradient(circle at 70% 18%, rgba(71, 184, 255, 0.08), transparent 28rem),
    radial-gradient(circle at 18% 34%, rgba(143, 214, 255, 0.05), transparent 24rem),
    linear-gradient(90deg, rgba(3, 6, 10, 0.55), rgba(3, 6, 10, 0.28) 52%, rgba(3, 6, 10, 0.50)) !important;
}

/* Keep the SignalField canvas (animated nodes) visible above the image */
.signal-field {
  opacity: 0.42;
}

/* Home: no dim, full cosmos brightness */
body.page-home {
  background: transparent !important;
}
body.page-home .cosmos-bg {
  opacity: 1;
}
body.page-home .signal-field {
  opacity: 0.55;
}

/* Inner pages: a whisper of dim — enough for text, not a heavy scrim */
body.page-inner {
  background: linear-gradient(180deg, rgba(3, 6, 10, 0.30) 0%, rgba(7, 11, 18, 0.18) 46%, rgba(2, 4, 9, 0.30) 100%) !important;
}
body.page-inner .cosmos-bg {
  opacity: 0.62;
}
body.page-inner .signal-field {
  opacity: 0.28;
}

/* Slight darkening on inner pages is handled by the softened body::before
   and the semi-transparent body background above. No extra overlay needed. */

/* ---- 2. Glass panels drift: slow, tiny, staggered ---- */
@keyframes cosmos-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.glass {
  animation: cosmos-drift 14s ease-in-out infinite;
  will-change: transform;
}

/* Stagger: each glass element gets a slightly different phase so they
   breathe out of lockstep. We use :nth-of-type on the common wrappers. */
.reading-rail .glass,
.article-directory .glass,
.branch-page .glass,
.content-hero .glass {
  animation-delay: -3s;
}
.article .glass {
  animation-delay: -6s;
}
.footer-inner .glass {
  animation-delay: -9s;
}
.site-footer .glass {
  animation-delay: -2s;
}
/* Generic stagger for any .glass inside a .reveal container */
.reveal:nth-of-type(2) .glass,
.reveal:nth-of-type(2).glass {
  animation-delay: -4.5s;
}
.reveal:nth-of-type(3) .glass,
.reveal:nth-of-type(3).glass {
  animation-delay: -8s;
}
.reveal:nth-of-type(4) .glass,
.reveal:nth-of-type(4).glass {
  animation-delay: -11s;
}
.reveal:nth-of-type(5) .glass,
.reveal:nth-of-type(5).glass {
  animation-delay: -13s;
}

/* Respect reduced-motion: no drift */
@media (prefers-reduced-motion: reduce) {
  .glass {
    animation: none;
  }
}