/* The dark opening gives way to clouds; the journey ends above them in light. */
/* Retire the flat photograph zoom once the perspective renderer is ready.
   Leave it available during loading and on unsupported devices. */
body.ascent-active:has(.cloud-flight-ready)::after {
  opacity: 0 !important;
}
.journey-stage.cloud-flight-ready > .journey-abyss,
.journey-stage.cloud-flight-ready > .journey-cloud-depth,
.journey-stage.cloud-flight-ready > .journey-mist,
.journey-stage.cloud-flight-ready::after {
  opacity: 0 !important;
}
body .journey-abyss {
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255, 251, 228, .16), transparent 68%),
    url("../attached_assets/generated_images/ascent-clouds.jpg");
  filter: brightness(1.12) contrast(1.06) saturate(.8);
}
body .journey-abyss::before {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 253, 234, .12), transparent 60%);
}
body .journey-abyss::after {
  background: linear-gradient(180deg, rgba(238, 246, 250, .04), rgba(255, 249, 227, .06));
}
.journey-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3%;
  pointer-events: none;
  opacity: var(--journey-light, 0);
  background:
    radial-gradient(ellipse 28% 25% at 50% 24%, rgba(255, 253, 236, .3), transparent 80%),
    url("../attached_assets/generated_images/ascent-clouds.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(1.16) contrast(1.08) saturate(.8);
  transform-origin: 50% 47%;
  transform: scale(var(--journey-cloud-scale, 1));
}

/* Keep the original cloud contours visible even in the final sunlight.
   The near planes magnify toward the viewer, rather than just sliding upward. */
body.ascent-active::before {
  transform: translateZ(0) scale(var(--journey-cloud-scale, 1));
  transform-origin: 50% 47%;
}
.journey-cloud-depth {
  position: absolute;
  z-index: 2;
  inset: -5%;
  pointer-events: none;
  background: url("../attached_assets/generated_images/ascent-clouds.jpg") center / cover no-repeat;
  mask-image: radial-gradient(ellipse 38% 32% at 50% 47%, transparent 24%, #000 78%);
  transform-origin: 50% 47%;
}
.journey-cloud-depth-far {
  opacity: calc(var(--ascent-light, 0) * var(--cloud-depth-far-opacity, 0));
  transform: scale(var(--cloud-depth-far-scale, 1));
}
.journey-cloud-depth-near {
  opacity: calc(var(--ascent-light, 0) * var(--cloud-depth-near-opacity, 0));
  transform: scale(var(--cloud-depth-near-scale, 1));
  filter: brightness(1.1);
}

/* The early brightening includes the hero, and the final light includes the
   footer. Never recolor copy within dark cards or the original logo/icons. */
html body.ascent-bright #main-site #hero-section h1,
html body.ascent-bright #main-site #hero-section h1 span,
html body.ascent-bright #main-site #hero-section h1 + p,
html body.ascent-bright #main-site #hero-section > div:first-of-type > div:first-child,
html body.ascent-bright #main-site #hero-section > div:first-of-type > div:first-child p,
html body.ascent-bright #main-site #hero-section > div:first-of-type > div:first-child strong,
html body.ascent-bright #main-site #site-footer .footer-copy,
html body.ascent-bright #main-site #site-footer .footer-social-label,
html body.ascent-bright #main-site #site-footer .footer-legal-button {
  color: #29251f !important;
  text-shadow: 0 1px 3px rgba(255, 249, 229, .3) !important;
}
html body.ascent-bright #main-site #site-footer {
  border-color: rgba(63, 54, 37, .22) !important;
}
html body.ascent-bright #main-site .framework-wheel::before,
html body.ascent-bright #main-site .framework-wheel::after {
  background: rgba(64, 53, 37, .25) !important;
}
@media (prefers-reduced-motion: reduce) {
  .journey-stage::after { transform: none; }
}