.page-shell {
  isolation: isolate;
  min-height: 100dvh;
  overflow-x: clip;
  position: relative;
}

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

.ambient-layer::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(245, 200, 85, 0.55) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(226, 151, 198, 0.42) 0 1px, transparent 1.6px);
  background-position: 0 0, 42px 76px, 120px 32px;
  background-size: 190px 190px, 260px 260px, 310px 310px;
  content: "";
  inset: 0;
  opacity: 0.2;
  position: absolute;
}

.ambient-layer::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(245, 200, 85, 0.16), transparent 18%),
    radial-gradient(circle at 14% 70%, rgba(87, 133, 234, 0.16), transparent 25%),
    radial-gradient(circle at 45% 94%, rgba(226, 151, 198, 0.14), transparent 26%);
  content: "";
  filter: blur(10px);
  inset: -10%;
  opacity: 0.9;
  position: absolute;
}

.shooting-star {
  animation: star-drift 8s var(--ease-gentle) infinite;
  background: linear-gradient(90deg, transparent, rgba(245, 200, 85, 0.95), transparent);
  border-radius: 999px;
  height: 1px;
  opacity: 0;
  position: absolute;
  transform: rotate(-28deg);
  width: 120px;
}

.shooting-star.one {
  right: 13%;
  top: 14%;
}

.shooting-star.two {
  animation-delay: 3.8s;
  left: 18%;
  top: 64%;
  width: 84px;
}

@keyframes star-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-28deg);
  }

  12% {
    opacity: 0.9;
  }

  30% {
    opacity: 0;
    transform: translate3d(-180px, 88px, 0) rotate(-28deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(-180px, 88px, 0) rotate(-28deg);
  }
}