.landing-celestial,
.auth-celestial,
.gift-celestial,
.trust-celestial,
.section-stars,
.celestial-divider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.celestial-scene {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(16rem, 30vw, 24rem);
  margin: 1rem auto;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}
.celestial-scene img { mix-blend-mode: multiply; }

.celestial-scene-motif {
  position: relative;
  width: min(48%, 23rem);
  aspect-ratio: 1;
  overflow: hidden;
}

.celestial-scene-motif img {
  position: absolute;
  top: 50%;
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(-50%);
}

.celestial-scene-solar-mandala img, .celestial-scene-sun-rays img { top: 0; transform: none; }
.celestial-scene-sun-rays { aspect-ratio: 1.04; }
.celestial-scene-lunar-mandala img { transform: translateY(-55%); }
.celestial-scene-orbit-mandala img { transform: translateY(-72%); }
.celestial-scene-sun-moon { aspect-ratio: 1.1; }
.celestial-scene-moon-orbit { aspect-ratio: 1.18; }
.celestial-scene-sun-moon img, .celestial-scene-moon-orbit img { top: 0; transform: none; }

.celestial-scene-stars {
  position: absolute;
  width: min(26%, 15rem);
  height: 100%;
  object-fit: cover;
}
.celestial-scene-stars-left { left: 3%; transform: rotate(-12deg); }
.celestial-scene-stars-right { right: 3%; transform: rotate(15deg) scaleX(-1); }
.reading-scene { height: clamp(4rem, 8vw, 6rem); margin: 1rem auto; }
.reading-scene .celestial-scene-motif { width: clamp(3rem, 6vw, 5rem); }
.reading-scene + .celestial-divider { margin: .25rem auto 1.75rem; }
.ornament-grid { align-items: center; }
.side-mandala { grid-column: 2 / -1; width: 100%; height: 24rem; margin: 0; align-self: center; }
.side-mandala .celestial-scene-motif { width: min(90%, 25rem); }
.side-mandala.dashboard-mandala { grid-column: 1 / -1; margin-top: -1rem; }
.gift-page-art { width: 100%; height: auto; min-height: 0; margin: 2rem auto 0; padding-block: 1rem; background: transparent; }
.gift-page-art .celestial-scene-motif { width: min(90%, 24rem); }

.page-celestial-closing { height: 15rem; margin: 3rem auto 0; max-width: 48rem; }
.page-celestial-closing .celestial-scene-motif { width: 14rem; }

.landing-celestial img,
.auth-celestial img,
.gift-celestial img,
.trust-celestial img,
.section-stars img,
.celestial-divider img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

.landing-celestial {
  width: min(100%, 28rem);
  aspect-ratio: 1;
  justify-self: center;
}

.celestial-divider {
  width: min(96%, 48rem);
  height: clamp(2rem, 6vw, 4.5rem);
  margin: 1.5rem auto;
}

.celestial-divider img {
  transform: translateY(-57.6%);
}

.celestial-divider + .landing-offer,
.celestial-divider + .landing-trust {
  border-top: 0;
}

.landing-intro {
  background: transparent;
  padding-top: 1rem;
}

.auth-celestial {
  width: min(100%, 26rem);
  aspect-ratio: 1;
  margin: 2rem 0;
}

.trust-celestial {
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 2rem 0 0;
}

.section-stars {
  aspect-ratio: 1;
}

.offer-stars {
  width: min(55%, 14rem);
  margin: 1.5rem 0 0 auto;
}

.closing-stars {
  width: min(45%, 10rem);
  margin: 1.5rem auto;
}

.gift-celestial {
  width: min(100%, 9rem);
  aspect-ratio: 1;
  margin: 1.25rem auto;
}

.gift-celestial img {
  transform: translateY(-54%);
}

.reading-welcome {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.welcome-moon {
  display: block;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  mix-blend-mode: multiply;
}

@media (max-width: 40rem) {
  .celestial-scene { height: 15rem; margin: .5rem auto; }
  .celestial-scene-motif { width: 64%; }
  .celestial-scene-stars { width: 22%; opacity: .9; }
  .celestial-scene-stars-left { left: -3%; }
  .celestial-scene-stars-right { right: -3%; }
  .reading-scene { height: 4rem; }
  .reading-scene .celestial-scene-motif { width: 3rem; }
  .page-celestial-closing { height: 13rem; margin-top: 2rem; }
  .page-celestial-closing .celestial-scene-motif { width: 12rem; }
  .landing-celestial { width: min(78%, 19rem); margin: 0 auto; }
  .landing-hero { gap: 1rem; padding-bottom: 2.5rem; }
  .auth-celestial { width: min(100%, 22rem); margin: 1.5rem auto; }
  .trust-celestial { width: min(85%, 18rem); margin: 1.5rem auto 0; }
  .offer-stars { width: min(50%, 11rem); }
  .closing-stars { width: min(50%, 9rem); }
  .reading-welcome { align-items: start; gap: .75rem; }
  .welcome-moon { width: 3rem; height: 3rem; flex-basis: 3rem; margin-top: 1rem; }
}

@media (forced-colors: active) {
  .landing-celestial, .auth-celestial, .gift-celestial, .trust-celestial, .section-stars, .celestial-divider, .welcome-moon, .celestial-scene { display: none; }
}

@media (max-width: 760px) {
  .side-mandala { grid-column: 1 / -1; height: 20rem; }
  .side-mandala .celestial-scene-motif { width: min(90%, 21rem); }
}