.cosmos {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
  background: #52689f;
  transform: translateZ(0);
}

.cosmos-sky,
.cosmos-nebula,
.cosmos-vignette,
.cosmos-glow {
  position: absolute;
  inset: 0;
}

.cosmos-sky {
  background:
    linear-gradient(
      180deg,
      #78a9c8 0%,
      #6f9abb 25%,
      #637fae 47%,
      #6b73a4 68%,
      #866fa5 86%,
      #59618c 100%
    );
}

.cosmos-glow {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(ellipse at 76% 38%, rgba(169,243,239,.16), transparent 37%),
    radial-gradient(ellipse at 32% 85%, rgba(235,188,235,.14), transparent 44%);
}

.cosmos-nebula { opacity: .82; }
.cosmos-nebula-cyan {
  background: radial-gradient(
    ellipse at 75% 47%,
    rgba(79, 213, 214, .2) 0%,
    rgba(77, 157, 190, .11) 34%,
    transparent 64%
  );
}
.cosmos-nebula-violet {
  background: radial-gradient(
    ellipse at 24% 88%,
    rgba(187, 116, 201, .2) 0%,
    rgba(110, 88, 170, .12) 38%,
    transparent 68%
  );
}

.parallax-layer {
  position: absolute;
  right: 0;
  left: 0;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.parallax-layer-far { top: -120px; bottom: -120px; }
.parallax-layer-near { top: -240px; bottom: -240px; }

@supports (animation-timeline: scroll()) {
  .parallax-layer-far {
    animation: cosmic-drift-far linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }
  .parallax-layer-near {
    animation: cosmic-drift-near linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }
}

@keyframes cosmic-drift-far {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-96px,0); }
}
@keyframes cosmic-drift-near {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-210px,0); }
}
@keyframes cosmic-twinkle {
  0%,100% {
    opacity: var(--star-opacity, .76);
    filter: brightness(1.05) saturate(.82);
  }
  35% {
    opacity: 1;
    filter: brightness(1.72) saturate(.9);
  }
  62% {
    opacity: calc(var(--star-opacity, .76) * .66);
    filter: brightness(.96) saturate(.8);
  }
  82% {
    opacity: .96;
    filter: brightness(1.48) saturate(.88);
  }
}
@keyframes cosmic-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(.94); }
  35% { transform: translate(-50%,-50%) scale(1.28); }
  62% { transform: translate(-50%,-50%) scale(.9); }
  82% { transform: translate(-50%,-50%) scale(1.18); }
}

.major-star,
.hero-flare {
  --star-color: 255,255,255;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--star-color));
  box-shadow:
    0 0 8px rgba(var(--star-color), .96),
    0 0 24px rgba(var(--star-color), .48),
    0 0 48px rgba(var(--star-color), .2);
  will-change: transform, opacity, filter;
}

.major-star {
  transform: translate(-50%,-50%);
  opacity: var(--star-opacity);
  animation:
    cosmic-twinkle 6.8s ease-in-out infinite,
    cosmic-breathe 6.8s ease-in-out infinite;
}
.major-star:nth-child(2n) { animation-delay: -2.4s; }
.major-star:nth-child(3n) { animation-delay: -4.6s; }
.major-star:nth-child(5n) { animation-duration: 7.8s, 7.8s; }

.major-star::before,
.major-star::after,
.hero-flare::before,
.hero-flare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
}
.major-star::before,
.hero-flare::before {
  width: var(--star-size);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--star-color), .22) 20%,
    rgba(var(--star-color), .94) 47%,
    rgba(var(--star-color), 1) 50%,
    rgba(var(--star-color), .94) 53%,
    rgba(var(--star-color), .22) 80%,
    transparent
  );
}
.major-star::after,
.hero-flare::after {
  width: 1px;
  height: calc(var(--star-size) * 1.16);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--star-color), .2) 18%,
    rgba(var(--star-color), .92) 47%,
    rgba(var(--star-color), 1) 50%,
    rgba(var(--star-color), .92) 53%,
    rgba(var(--star-color), .2) 82%,
    transparent
  );
}

.major-star--ivory { --star-color: 255, 239, 205; }
.major-star--cyan { --star-color: 205, 235, 242; }
.major-star--rose { --star-color: 242, 211, 224; }

.small-star {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: currentColor;
  box-shadow:
    0 0 8px currentColor,
    0 0 18px color-mix(in srgb, currentColor 72%, transparent),
    0 0 32px color-mix(in srgb, currentColor 34%, transparent);
  animation: small-star-twinkle 7.2s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.small-star:nth-child(2n) { animation-delay: -2.1s; animation-duration: 6.4s; }
.small-star:nth-child(3n) { animation-delay: -4.2s; animation-duration: 8.2s; }
.small-star:nth-child(5n) { animation-delay: -1.3s; animation-duration: 5.8s; }
@keyframes small-star-twinkle {
  0%,100% {
    opacity: var(--small-opacity, .74);
    transform: translate(-50%,-50%) scale(.92);
    filter: brightness(1.05) saturate(.78);
  }
  30% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.48);
    filter: brightness(1.8) saturate(.86);
  }
  58% {
    opacity: .48;
    transform: translate(-50%,-50%) scale(.82);
    filter: brightness(.9) saturate(.76);
  }
  80% {
    opacity: .95;
    transform: translate(-50%,-50%) scale(1.25);
    filter: brightness(1.5) saturate(.84);
  }
}
.small-star--ivory { color: rgb(255, 240, 208); }
.small-star--cyan { color: rgb(205, 235, 242); }
.small-star--rose { color: rgb(241, 211, 225); }

.s1 { left:11%; top:24%; width:1.4px; height:1.4px; --small-opacity:.78; }
.s2 { left:21%; top:34%; width:1.5px; height:1.5px; --small-opacity:.84; }
.s3 { left:37%; top:22%; width:1.2px; height:1.2px; --small-opacity:.7; }
.s4 { left:47%; top:43%; width:1.4px; height:1.4px; --small-opacity:.76; }
.s5 { left:63%; top:26%; width:1.2px; height:1.2px; --small-opacity:.72; }
.s6 { left:76%; top:36%; width:1.5px; height:1.5px; --small-opacity:.82; }
.s7 { left:95%; top:33%; width:1.4px; height:1.4px; --small-opacity:.78; }
.s8 { left:31%; top:57%; width:1.15px; height:1.15px; --small-opacity:.68; }
.s9 { left:58%; top:55%; width:1.45px; height:1.45px; --small-opacity:.8; }
.s10 { left:82%; top:63%; width:1.25px; height:1.25px; --small-opacity:.72; }
.s11 { left:12%; top:67%; width:1.2px; height:1.2px; --small-opacity:.7; }
.s12 { left:42%; top:74%; width:1.3px; height:1.3px; --small-opacity:.7; }
.s13 { left:72%; top:81%; width:1.35px; height:1.35px; --small-opacity:.74; }
.s14 { left:94%; top:86%; width:1.2px; height:1.2px; --small-opacity:.76; }

.m1 { left:8%; top:42%; --star-size:24px; --star-opacity:.78; }
.m2 { left:54%; top:31%; --star-size:23px; --star-opacity:.82; }
.m3 { left:88%; top:50%; --star-size:32px; --star-opacity:.92; }
.m4 { left:68%; top:69%; --star-size:22px; --star-opacity:.76; }
.m5 { left:17%; top:78%; --star-size:21px; --star-opacity:.72; }

.upper-right-stars {
  position: absolute;
  right: clamp(34px,7vw,112px);
  top: clamp(92px,12vh,150px);
  width: clamp(190px,24vw,310px);
  height: clamp(128px,18vw,214px);
  opacity: 1;
}
.hero-flare {
  transform-origin: center;
  animation: hero-star-pulse 6.6s ease-in-out infinite;
}
@keyframes hero-star-pulse {
  0%,100% {
    opacity: .86;
    transform: scale(.94);
    filter: brightness(1.08) saturate(.82);
  }
  38% {
    opacity: 1;
    transform: scale(1.22);
    filter: brightness(1.68) saturate(.9);
  }
  68% {
    opacity: .74;
    transform: scale(.9);
    filter: brightness(.96) saturate(.8);
  }
  84% {
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(1.42) saturate(.88);
  }
}
.hero-flare-main { --star-color: 205,235,242; --star-size:66px; right:8%; top:22%; }
.hero-flare-secondary { --star-color: 242,211,224; --star-size:40px; left:28%; bottom:17%; opacity:.94; animation-delay:-3.2s; }
.hero-dot {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgb(255,240,208);
  box-shadow:0 0 10px rgba(255,240,208,.78), 0 0 22px rgba(255,226,184,.28);
  animation: hero-dot-pulse 5.8s ease-in-out infinite;
}
@keyframes hero-dot-pulse {
  0%,100% { opacity:.7; transform:scale(.86); filter:brightness(1) saturate(.8); }
  45% { opacity:1; transform:scale(1.55); filter:brightness(1.7) saturate(.88); }
  72% { opacity:.58; transform:scale(.8); filter:brightness(.95) saturate(.78); }
}
.hero-dot-a { left:8%; top:19%; animation-delay:-.8s; }
.hero-dot-b { left:52%; top:8%; background:rgb(241,211,225); animation-delay:-2.5s; }
.hero-dot-c { right:24%; bottom:7%; background:rgb(205,235,242); animation-delay:-4s; }
.hero-trail {
  position:absolute;
  left:17%;
  top:52%;
  width:57%;
  height:1px;
  opacity:.24;
  transform:rotate(-18deg);
  transform-origin:left center;
  background:linear-gradient(90deg,transparent,rgba(241,211,225,.5),rgba(205,235,242,.66),rgba(255,240,208,.48),transparent);
}

.cosmos-vignette {
  box-shadow:
    inset 0 0 210px rgba(45,49,88,.28),
    inset 0 -130px 200px rgba(48,46,84,.24),
    inset 0 90px 160px rgba(255,255,255,.035);
}

@media (max-width:760px) {
  .parallax-layer-far { top:-100px; bottom:-100px; }
  .parallax-layer-near { top:-220px; bottom:-220px; }
  .upper-right-stars {
    right:-18px;
    top:92px;
    transform:scale(.86);
    transform-origin:top right;
    opacity:.9;
  }
  .major-star:nth-of-type(n+4),
  .small-star:nth-of-type(n+10) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .parallax-layer-far,
  .parallax-layer-near,
  .major-star,
  .small-star,
  .hero-flare,
  .hero-dot {
    animation:none !important;
    transform:none;
  }
}