/* Celestial details stay behind the content and never receive input. */
.zv-celestial #zv-starfield,
.zv-celestial #zv-starfield-depth {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}

.zv-celestial > main {
  position: relative;
  z-index: 1;
}

.zv-celestial .zv-constellation-title {
  position: relative;
  isolation: isolate;
}

.zv-celestial .zv-title-constellation {
  position: absolute;
  z-index: -1;
  top: -.52em;
  right: 0;
  width: clamp(116px, 19vw, 268px);
  max-width: 58%;
  aspect-ratio: 250 / 125;
  display: block;
  color: #D8BC8C;
  pointer-events: none;
  user-select: none;
  opacity: .62;
}

.zv-celestial .zv-title-constellation svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.zv-celestial .zv-constellation-line {
  fill: none;
  stroke: #C0975A;
  stroke-width: .65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .57;
}

.zv-celestial .zv-constellation-node {
  fill: #fff4d9;
  filter: drop-shadow(0 0 1.4px rgba(247, 224, 182, .72));
}
.zv-celestial .zv-universe-stars .zv-starlight-bloom { fill: url(#zv-universe-starlight); }
.zv-celestial .zv-universe-stars .zv-universe-star-core {
  fill: #fff4d9;
  filter: drop-shadow(0 0 2.5px rgba(247, 224, 182, .7));
}
.zv-celestial .zv-starlight-bloom { stroke: none; pointer-events: none; }
.zv-celestial .zv-constellation-halo { fill: currentColor; opacity: .07; }
.zv-celestial .zv-constellation-ray {
  fill: none;
  stroke: currentColor;
  stroke-width: .6;
  opacity: .64;
}

@media (prefers-reduced-motion: no-preference) {
  .zv-celestial .zv-constellation-ready .zv-constellation-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .zv-celestial .zv-constellation-drawn .zv-constellation-line {
    animation: zv-constellation-draw 2.8s cubic-bezier(.22, .61, .36, 1) both;
  }

  .zv-celestial .zv-constellation-drawn .zv-constellation-stars {
    animation: zv-constellation-breathe 7s ease-in-out 2.4s infinite;
    animation-play-state: paused;
  }

  .zv-celestial .zv-constellation-in-view .zv-constellation-stars {
    animation-play-state: running;
  }

  .zv-celestial.zv-celestial-suspended .zv-constellation-line,
  .zv-celestial.zv-celestial-suspended .zv-constellation-stars {
    animation-play-state: paused;
  }
}

/* A paused page still shows each complete constellation, including new chapters. */
.zv-celestial.zv-motion-paused .zv-constellation-line,
.zv-celestial.zv-motion-paused .zv-constellation-stars {
  animation: none !important;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

@keyframes zv-constellation-draw {
  from { stroke-dashoffset: 1; opacity: .1; }
  to { stroke-dashoffset: 0; opacity: .57; }
}

@keyframes zv-constellation-breathe {
  0%, 100% { opacity: .88; }
  50% { opacity: .48; }
}

@media (max-width: 640px) {
  .zv-celestial .zv-title-constellation {
    width: 142px;
    max-width: 47%;
    top: -.7em;
    opacity: .52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zv-celestial .zv-title-constellation * {
    animation: none !important;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@media print {
  .zv-celestial #zv-starfield,
  .zv-celestial #zv-starfield-depth,
  .zv-celestial .zv-title-constellation { display: none; }
}