/* Home-only atmosphere. Reuses the existing background, stars and scroll fog.
   Removing home-space-background restores the other routes' original styling. */
body[data-public-route="introduction"] .animated-background.home-space-background {
  --space-cyan: 255, 255, 255;
  opacity: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(255, 255, 255, .15), rgba(229, 229, 229, .055) 38%, transparent 76%),
    radial-gradient(ellipse 72% 76% at 82% 53%, rgba(255, 255, 255, .035), transparent 74%),
    linear-gradient(112deg, #050505 2%, #080808 54%, #111111 100%);
  pointer-events: none;
}

/* Oversized, incomplete elliptical fields: no visible circle or hard edge. */
body[data-public-route="introduction"] .animated-background.home-space-background::before,
body[data-public-route="introduction"] .animated-background.home-space-background::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  filter: blur(38px);
  will-change: auto;
}
body[data-public-route="introduction"] .animated-background.home-space-background::before {
  z-index: 1;
  display: block;
  inset: -18vh -18vw auto auto;
  width: 88vw;
  height: 105vh;
  background: radial-gradient(ellipse at 70% 25%, rgba(255, 255, 255, .18), rgba(229, 229, 229, .09) 32%, rgba(163, 163, 163, .025) 58%, transparent 78%);
  transform: translate3d(-1vw, 0, 0) scale(1);
  opacity: .66;
  animation: home-silver-aura 22s ease-in-out infinite alternate;
}
body[data-public-route="introduction"] .animated-background.home-space-background::after {
  z-index: 1;
  inset: 5vh auto auto -74vw;
  width: 194vw;
  height: 164vh;
  background: radial-gradient(ellipse at 46% 59%,
    transparent 44%, rgba(var(--space-cyan), .008) 50%,
    rgba(var(--space-cyan), .068) 57%, rgba(var(--space-cyan), .029) 63%, transparent 72%);
  mask-image: linear-gradient(78deg, transparent 17%, #000 48%, #000 72%, transparent 94%);
  transform: rotate(14deg);
  opacity: .78;
}

/* The former raster backdrop becomes a quiet vignette, without blurring UI. */
body[data-public-route="introduction"] .animated-background.home-space-background > .background-scene {
  display: block !important;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 4, .22), transparent 76%),
    radial-gradient(ellipse at 62% 48%, transparent 35%, rgba(0, 0, 0, .22) 100%);
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
}
body[data-public-route="introduction"] .animated-background.home-space-background > .background-flames,
body[data-public-route="introduction"]:has(> .home-space-background) > .public-ember-atmosphere,
body[data-public-route="introduction"]:has(> .home-space-background) .hero-primary > .hero-scene,
body[data-public-route="introduction"]:has(> .home-space-background) .hero-primary::before,
body[data-public-route="introduction"]:has(> .home-space-background) #introduction::before,
body[data-public-route="introduction"]:has(> .home-space-background) #introduction::after {
  display: none !important;
}

/* Keep deterministic star positions, but let a few of them breathe into view. */
body[data-public-route="introduction"] .animated-background.home-space-background > .home-glints {
  z-index: 4;
  opacity: 1;
  mix-blend-mode: normal;
  transition: none;
}
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i {
  width: 1.4px;
  height: 1.4px;
  background: #ffffff;
  opacity: .2;
  box-shadow: 0 0 7px rgba(var(--space-cyan), .42), 0 0 16px rgba(var(--space-cyan), .2);
  transform: none;
  --star-peak: .84;
  animation: home-space-star 8.2s ease-in-out infinite;
  animation-delay: -2.3s;
}
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(3n) { --star-peak: .92; animation-duration: 6.7s; animation-delay: -4.1s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(5n) { --star-peak: .68; animation-duration: 9.4s; animation-delay: -6.2s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(2n) { animation-duration: 10.4s; animation-delay: -7.7s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(7),
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(12),
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(18),
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(24),
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(28),
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(31) {
  width: 2px;
  height: 2px;
  --star-peak: 1;
  box-shadow: 0 0 8px rgba(var(--space-cyan), .58), 0 0 19px rgba(var(--space-cyan), .28);
  animation-duration: 7.2s;
}
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(12) { animation-delay: -4s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(28) { animation-delay: -1.6s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(31) { animation-delay: -5.3s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(25) { left: 11%; top: 73%; animation-duration: 6.1s; animation-delay: -3.2s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(26) { left: 22%; top: 33%; animation-duration: 8.8s; animation-delay: -5.7s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(27) { left: 37%; top: 18%; animation-duration: 7.6s; animation-delay: -2.4s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(28) { left: 50%; top: 43%; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(29) { left: 61%; top: 74%; animation-duration: 9.1s; animation-delay: -6.8s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(30) { left: 71%; top: 17%; animation-duration: 6.5s; animation-delay: -1.3s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(31) { left: 85%; top: 91%; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(32) { left: 96%; top: 21%; animation-duration: 8.5s; animation-delay: -7.1s; }
body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(n+33) { display: none; }

/* Extend the existing scroll atmosphere instead of adding another scroll system. */
body[data-public-route="introduction"]:has(> .home-space-background) .home-scene[data-home-fog]::after {
  inset: -25% -8%;
  background: radial-gradient(ellipse at var(--scene-glow-x, 72%) var(--scene-glow-y, 50%),
    transparent 22%, rgba(255, 255, 255, .018) 43%, rgba(255, 255, 255, .033) 52%, transparent 72%);
  opacity: calc(.3 + var(--scene-progress, 0) * .5);
  filter: blur(30px);
  mix-blend-mode: normal;
  animation: none;
}

/* Larger dotted ribbons span the negative space, never changing section gaps. */
body[data-public-route="introduction"]:has(> .home-space-background) .home-gap-wave {
  left: -18%;
  width: 144%;
  stroke: #d7d7d7;
  stroke-width: 1.5;
  transform: scaleY(1.42) translate3d(0, 16px, 0);
  transform-origin: center;
}
body[data-public-route="introduction"]:has(> .home-space-background) .home-gap-wave.is-visible {
  opacity: .2;
  transform: scaleY(1.42) translate3d(0, 0, 0);
}

/* Slightly pull back the complete Home content as one composition. */
@media (min-width: 1101px) {
  body[data-public-route="introduction"]:has(> .home-space-background) #introduction > .hero-primary {
    scale: .94;
    transform-origin: center center;
  }
  body[data-public-route="introduction"]:has(> .home-space-background) #introduction > .home-scene {
    scale: .94;
    transform-origin: center center;
  }
}
@media (max-width: 760px) {
  body[data-public-route="introduction"] .animated-background.home-space-background::after {
    width: 244vw;
    height: 136vh;
    inset: 16vh auto auto -112vw;
    opacity: .5;
    filter: blur(28px);
  }
  body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i:nth-child(n+23) { display: none; }
  body[data-public-route="introduction"]:has(> .home-space-background) .home-scene[data-home-fog]::after { opacity: .35; filter: blur(18px); }
  body[data-public-route="introduction"]:has(> .home-space-background) .home-gap-wave { left: -43%; width: 186%; }
}
@keyframes home-space-star {
  0%, 100% { opacity: .055; transform: scale(.72); }
  20%, 30% { opacity: .24; transform: scale(.94); }
  46%, 57% { opacity: var(--star-peak, .84); transform: scale(1.42); }
  72% { opacity: .16; transform: scale(.86); }
}
@keyframes home-silver-aura {
  from { transform: translate3d(-1vw, 0, 0) scale(1); opacity: .52; }
  to { transform: translate3d(2vw, 1vh, 0) scale(1.045); opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .animated-background.home-space-background::before,
  body[data-public-route="introduction"] .animated-background.home-space-background .home-glints i {
    animation: none !important;
  }
  body[data-public-route="introduction"] .animated-background.home-space-background::before {
    transform: none !important;
    opacity: .62;
  }
  body[data-public-route="introduction"]:has(> .home-space-background) .home-gap-wave,
  body[data-public-route="introduction"]:has(> .home-space-background) .home-gap-wave.is-visible {
    transition: none !important;
    transform: scaleY(1.42) translate3d(0, 0, 0) !important;
  }
  body[data-public-route="introduction"]:has(> .home-space-background) .home-scene[data-home-fog]::after { opacity: .55; transition: none !important; }
}

/* Music docs share the Home space atmosphere while keeping the article UI
   and every other documentation route untouched. */
body[data-public-route="headless-music"] .animated-background.home-space-background {
  --space-cyan: 235, 235, 235;
  display: block !important;
  z-index: 0;
  opacity: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 50% at 69% 47%, rgba(var(--space-cyan), .082), rgba(var(--space-cyan), .036) 42%, transparent 78%),
    radial-gradient(ellipse 72% 76% at 82% 53%, rgba(var(--space-cyan), .025), transparent 74%),
    #050505;
  pointer-events: none;
}
body[data-public-route="headless-music"] .animated-background.home-space-background::before,
body[data-public-route="headless-music"] .animated-background.home-space-background::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  filter: blur(38px);
  will-change: auto;
}
body[data-public-route="headless-music"] .animated-background.home-space-background::before {
  z-index: 1;
  inset: 23vh auto auto -24vw;
  width: 148vw;
  height: 78vh;
  background-image: radial-gradient(circle, rgba(165, 165, 165, .28) .85px, transparent 1.55px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 120%, transparent 55%, #000 57%, #000 62%, transparent 65%);
  mask-image: radial-gradient(ellipse 88% 82% at 50% 120%, transparent 55%, #000 57%, #000 62%, transparent 65%);
  transform: rotate(-1deg);
  opacity: .36;
  filter: none;
}
body[data-public-route="headless-music"] .animated-background.home-space-background::after {
  z-index: 1;
  inset: 5vh auto auto -74vw;
  width: 194vw;
  height: 164vh;
  background: radial-gradient(ellipse at 46% 59%,
    transparent 44%, rgba(var(--space-cyan), .008) 50%,
    rgba(var(--space-cyan), .068) 57%, rgba(var(--space-cyan), .029) 63%, transparent 72%);
  mask-image: linear-gradient(78deg, transparent 17%, #000 48%, #000 72%, transparent 94%);
  transform: rotate(14deg);
  opacity: .78;
}
body[data-public-route="headless-music"] .animated-background.home-space-background > .background-scene {
  display: block !important;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 4, .22), transparent 76%),
    radial-gradient(ellipse at 62% 48%, transparent 35%, rgba(0, 0, 0, .22) 100%);
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
}
body[data-public-route="headless-music"] .animated-background.home-space-background > .background-flames,
body[data-public-route="headless-music"] > .public-ember-atmosphere {
  display: none !important;
}
body[data-public-route="headless-music"] .animated-background.home-space-background > .home-glints {
  position: absolute;
  z-index: 4;
  display: block;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i {
  position: absolute;
  display: block;
  width: 1.4px;
  height: 1.4px;
  border-radius: 50%;
  background: #e5e5e5;
  opacity: .14;
  box-shadow: 0 0 7px rgba(var(--space-cyan), .38), 0 0 16px rgba(var(--space-cyan), .18);
  transform: none;
  --star-peak: .84;
  animation: home-space-star 8.2s ease-in-out infinite;
  animation-delay: -2.3s;
}
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(1) { left: 8%; top: 18%; animation-delay: -1.7s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(2) { left: 19%; top: 62%; animation-duration: 5.7s; animation-delay: -3.4s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(3) { left: 34%; top: 31%; animation-duration: 4.1s; animation-delay: -.8s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(4) { left: 47%; top: 76%; animation-duration: 6.2s; animation-delay: -2.6s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(5) { left: 59%; top: 14%; animation-duration: 5.2s; animation-delay: -4.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(6) { left: 72%; top: 48%; animation-duration: 4.4s; animation-delay: -1.3s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(7) { left: 84%; top: 27%; width: 2px; height: 2px; --star-peak: 1; animation-duration: 6.4s; animation-delay: -3.8s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(8) { left: 93%; top: 69%; animation-duration: 5.1s; animation-delay: -2s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(9) { left: 27%; top: 88%; width: 1px; height: 1px; animation-duration: 5.8s; animation-delay: -4.7s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(10) { left: 67%; top: 87%; width: 1px; height: 1px; animation-duration: 4.3s; animation-delay: -2.9s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(11) { left: 13%; top: 42%; width: 1px; height: 1px; animation-duration: 5.3s; animation-delay: -2.7s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(12) { left: 25%; top: 9%; width: 2px; height: 2px; --star-peak: 1; animation-duration: 6.1s; animation-delay: -4s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(13) { left: 41%; top: 57%; width: 1px; height: 1px; animation-duration: 4.7s; animation-delay: -1.6s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(14) { left: 54%; top: 92%; animation-duration: 5.9s; animation-delay: -3.2s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(15) { left: 78%; top: 81%; width: 1px; height: 1px; animation-duration: 4.5s; animation-delay: -.9s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(16) { left: 89%; top: 11%; animation-duration: 6.5s; animation-delay: -5.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(17) { left: 5%; top: 48%; width: 1px; height: 1px; animation-duration: 6.7s; animation-delay: -4.2s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(18) { left: 16%; top: 82%; width: 2px; height: 2px; --star-peak: 1; animation-duration: 4.9s; animation-delay: -1.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(19) { left: 31%; top: 14%; width: 1px; height: 1px; animation-duration: 5.5s; animation-delay: -3.6s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(20) { left: 64%; top: 35%; animation-duration: 6.3s; animation-delay: -2.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(21) { left: 76%; top: 63%; width: 1px; height: 1px; animation-duration: 4.6s; animation-delay: -3.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(22) { left: 97%; top: 39%; animation-duration: 5.8s; animation-delay: -4.8s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(23) { left: 43%; top: 95%; width: 1px; height: 1px; animation-duration: 6.9s; animation-delay: -1.9s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(24) { left: 56%; top: 6%; animation-duration: 5.1s; animation-delay: -3.9s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(25) { left: 11%; top: 73%; animation-duration: 6.1s; animation-delay: -3.2s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(26) { left: 22%; top: 33%; animation-duration: 8.8s; animation-delay: -5.7s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(27) { left: 37%; top: 18%; animation-duration: 7.6s; animation-delay: -2.4s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(28) { left: 50%; top: 43%; width: 2px; height: 2px; --star-peak: 1; animation-duration: 7.2s; animation-delay: -1.6s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(29) { left: 61%; top: 74%; animation-duration: 9.1s; animation-delay: -6.8s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(30) { left: 71%; top: 17%; animation-duration: 6.5s; animation-delay: -1.3s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(31) { left: 85%; top: 91%; width: 2px; height: 2px; --star-peak: 1; animation-duration: 7.2s; animation-delay: -5.3s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(32) { left: 96%; top: 21%; animation-duration: 8.5s; animation-delay: -7.1s; }
body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(n+33) { display: none; }

@media (max-width: 760px) {
  body[data-public-route="headless-music"] .animated-background.home-space-background::after {
    width: 244vw;
    height: 136vh;
    inset: 16vh auto auto -112vw;
    opacity: .5;
    filter: blur(28px);
  }
  body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i:nth-child(n+23) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-public-route="headless-music"] .animated-background.home-space-background::after,
  body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i {
    animation: none !important;
    transform: none !important;
  }
  body[data-public-route="headless-music"] .animated-background.home-space-background .home-glints i { opacity: .22; }
}