/* Static page atmosphere, separate from the pinned brand artwork and content. */
:is(.landing-home-page, .about-page) {
  --cosmos-strength: 1;
  --cosmos-star: color-mix(in srgb, var(--ac-color-text-inverse) 85%, var(--landing-highlight));
}

.about-page { --cosmos-strength: 0.7; }

:is(.landing-home-page, .about-page) #main-content {
  position: relative;
  isolation: isolate;
}

:is(.landing-home-page, .about-page) #main-content::before,
:is(.landing-home-page, .about-page) #main-content::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

/* The irregular mask stays crisp; its illumination grows gently toward Earth. */
:is(.landing-home-page, .about-page) #main-content::before {
  z-index: -2;
  background: linear-gradient(
    transparent,
    color-mix(in srgb, var(--cosmos-star) 36%, transparent) 7%,
    color-mix(in srgb, var(--cosmos-star) 44%, transparent) 50%,
    color-mix(in srgb, var(--cosmos-star) 58%, transparent) 80%,
    transparent 97%
  );
  mask: url("../images/illustrations/stardust.svg") repeat 0 0 / 80rem 60rem;
  opacity: var(--cosmos-strength);
}

/* Broad, feathered clouds follow the editorial flow without a hard section edge. */
:is(.landing-home-page, .about-page) #main-content::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 36% 13% at 96% 12%, color-mix(in srgb, var(--landing-highlight) 8%, transparent), transparent 100%),
    radial-gradient(ellipse 46% 15% at 76% 31%, color-mix(in srgb, var(--landing-accent) 15%, transparent), transparent 100%),
    radial-gradient(ellipse 42% 13% at 10% 53%, color-mix(in srgb, var(--landing-highlight) 6%, transparent), transparent 100%),
    radial-gradient(ellipse 54% 18% at 72% 77%, color-mix(in srgb, var(--landing-accent) 18%, transparent), transparent 100%);
  opacity: var(--cosmos-strength);
}

/* One distant bloom follows the Earth image's height and offset at each breakpoint. */
.landing-home-page .landing-world {
  --nova-x: 56%;
  --nova-y: calc(100% - clamp(38rem, 55vw, 52rem) + 11rem);
}

.about-page .about-contact {
  --nova-x: 91%;
  --nova-y: calc(100% - 48rem + 12rem + 4rem);
}

.landing-home-page .landing-world::before,
.about-page .about-contact::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at var(--nova-x) var(--nova-y), var(--cosmos-star) 0, color-mix(in srgb, var(--ac-color-text-inverse) 90%, transparent) 1px, color-mix(in srgb, var(--landing-highlight) 70%, transparent) 2px, color-mix(in srgb, var(--landing-highlight) 30%, transparent) 5px, transparent 13px),
    radial-gradient(ellipse 3.5rem 1px at var(--nova-x) var(--nova-y), color-mix(in srgb, var(--landing-highlight) 22%, transparent), transparent 100%),
    radial-gradient(ellipse 2.5rem 2rem at var(--nova-x) var(--nova-y), color-mix(in srgb, var(--landing-highlight) 14%, transparent), transparent 100%),
    radial-gradient(ellipse 13rem 10rem at var(--nova-x) var(--nova-y), color-mix(in srgb, var(--landing-accent) 20%, transparent), transparent 100%);
  opacity: var(--cosmos-strength);
  content: "";
  pointer-events: none;
}

@media (max-width: 48rem) {
  :is(.landing-home-page, .about-page) #main-content::before { opacity: calc(var(--cosmos-strength) * 0.75); }
  :is(.landing-home-page, .about-page) #main-content::after { opacity: calc(var(--cosmos-strength) * 0.75); }
  .landing-home-page .landing-world { --nova-x: 92%; --nova-y: calc(100% - 46rem - 12rem + 11rem); }
  .about-page .about-contact { --nova-x: 86%; --nova-y: calc(100% - 40rem + 8rem + 4rem); }
  .landing-home-page .landing-world::before,
  .about-page .about-contact::after { opacity: calc(var(--cosmos-strength) * 0.7); }
}

@media (forced-colors: active) {
  :is(.landing-home-page, .about-page) #main-content::before,
  :is(.landing-home-page, .about-page) #main-content::after,
  .landing-home-page .landing-world::before,
  .about-page .about-contact::after { display: none; }
}