/* ============================================================
   Starwise — page-wide constellation animation
   ============================================================
   The same zodiac-lights-up system that drives the homepage hero,
   extracted as a shared layer and adapted to cover the full
   viewport instead of just a hero section.

   On consuming pages:
     1. <link rel="stylesheet" href="/assets/constellations.css?v=1"/>
     2. <script src="/assets/constellations.js?v=1" defer></script>
     3. <!-- @partial:constellations:start -->
        <div class="constellations-bg">…</div>
        <!-- @partial:constellations:end -->

   Stacking model: the wrapper is `position: fixed; z-index: -1`,
   sitting behind body content. Body must be background-transparent
   for the layer to be visible — this file handles that.

   ============================================================ */

.constellations-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* On mobile the URL bar collapses/expands during scroll, which
     changes the regular viewport height (100vh / inset:0). When the
     container resizes mid-scroll the SVG inside gets re-laid out and
     the constellation pattern visibly jumps — most obvious near the
     footer where users tend to overscroll. 100lvh ("large viewport")
     is pinned to the LARGEST viewport the browser ever shows, so the
     layer stays the same height whether the URL bar is up or down.
     100vh kept as a fallback for any browser without lvh support. */
  height: 100vh;
  height: 100lvh;
  z-index: -1;             /* behind body content; html paints the bg */
  pointer-events: none;    /* never intercepts clicks */
  overflow: hidden;
  /* Promote to its own compositing layer so scroll-driven viewport
     adjustments don't repaint the whole tree. Helps iOS Safari +
     mobile Chrome stay smooth. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Slow fade-in on first load so the constellations don't pop in
     abruptly when the page renders. */
  opacity: 0;
  animation: cbgFadeIn 2.4s ease 0.3s forwards;
}

.constellations-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- FADED state (default — every star + line at low light) */
.constellations-bg .c-line {
  stroke: #7A6830;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.06;
  transition: stroke 5s ease, stroke-width 5s ease, opacity 5s ease;
}
.constellations-bg .c-star-halo {
  fill: #8A7A4E;
  opacity: 0.006;
  transition: fill 5s ease, opacity 5s ease;
}
.constellations-bg .c-star {
  fill: #A89258;
  opacity: 0.075;
  transition: fill 5s ease, opacity 5s ease;
}
.constellations-bg .c-star-core {
  fill: #D4B570;
  opacity: 0.1;
  transition: fill 5s ease, opacity 5s ease;
}

/* ---------- LIT state — element gets .lit added by the animator */
.constellations-bg .c-line.lit {
  stroke: #C9A543;
  stroke-width: 1.8;
  opacity: 0.138;
  filter: drop-shadow(0 0 2px rgba(201, 165, 67, 0.4));
  transition: stroke 4s ease, stroke-width 4s ease, opacity 4s ease;
}
.constellations-bg .c-star-halo.lit {
  fill: #F4C84A;
  opacity: 0.0125;
  transition: fill 4s ease, opacity 4s ease;
}
.constellations-bg .c-star.lit {
  fill: #F4C84A;
  opacity: 0.175;
  transition: fill 4s ease, opacity 4s ease;
}
.constellations-bg .c-star-core.lit {
  fill: #FFF5C8;
  opacity: 0.212;
  filter: drop-shadow(0 0 3px rgba(255, 245, 200, 0.6));
  transition: fill 4s ease, opacity 4s ease, filter 4s ease;
}

@keyframes cbgFadeIn {
  to { opacity: 1; }
}

/* ---------- Reduced motion: render every element in a soft static
   "constellations always present" mode, no transitions, no JS-driven
   lighting cycle. The activator skips the lighting loop entirely
   when prefers-reduced-motion is set. We bump the static visibility
   so the constellations still feel present rather than missing. */
@media (prefers-reduced-motion: reduce) {
  .constellations-bg { animation: none; opacity: 1; }
  .constellations-bg .c-line       { opacity: 0.18; transition: none; }
  .constellations-bg .c-star-halo  { opacity: 0.012; transition: none; }
  .constellations-bg .c-star       { opacity: 0.22; transition: none; }
  .constellations-bg .c-star-core  { opacity: 0.32; transition: none; }
}

/* ============================================================
   Body-bg escape (same pattern as stars-bg.css). The body's
   solid background paints at the canvas layer and hides anything
   at z-index -1. Move the bg to <html> so the constellations can
   paint between them and body content.
   ============================================================ */
html { background-color: var(--space-deep, #040618); }
body { background: transparent !important; }