/* ============================================================
   Vertical gradient wipe — water ↔ star ↔ journey transitions
   ============================================================ */

#pageGradientWipe {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  will-change: background, opacity;
  transition: opacity 0.12s ease;
}

#pageGradientWipe.is-active {
  opacity: 1;
}

/* Slide-reveal: stack pages fixed during hero → starfield transition */
body.is-slide-revealing #page-1,
body.is-slide-revealing #page-2.is-revealed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  will-change: transform, opacity;
}

body.is-slide-revealing #page-2.is-revealed {
  z-index: 1;
}

body.is-slide-revealing #page-1 {
  z-index: 2;
}

body.is-slide-revealing #page-1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(21, 37, 64, 0.35) 35%,
    rgba(14, 18, 40, 0.75) 62%,
    rgba(2, 2, 4, 0.95) 100%
  );
  opacity: 0.85;
}

body.is-slide-revealing #page-2.is-revealed #page2-starfield {
  opacity: 1;
  transition: none;
}

body.is-star-exiting #page-2 {
  will-change: transform, opacity;
}

body.is-star-exiting #page2-starfield,
body.is-star-exiting #page2-starfield.is-active {
  transition: opacity 0.35s ease;
  opacity: calc(1 - var(--star-exit-p, 0) * 0.92);
}

body.is-star-exiting #floatyFrame {
  opacity: calc(1 - var(--star-exit-p, 0) * 0.75);
  transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  #pageGradientWipe {
    transition-duration: 0.01ms;
  }

  body.is-slide-revealing #page-1::after {
    display: none;
  }
}