* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scroll-space {
  height: 600vh;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Base layer */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Fixed background */
.layer-4 {
  z-index: 0;
}

/* Depth order */
.layer-6 { z-index: 1; } /* moon */
.layer-5 { z-index: 2; }
.layer-3 { z-index: 3; }
.layer-2 { z-index: 4; }
.layer-1 { z-index: 5; }

/* Initial state for moving layers */
.layer-1,
.layer-2,
.layer-3,
.layer-5,
.layer-6 {
  opacity: 0;
  transform: translateY(100%);
}

/* Moon-specific styling */
.layer-6 {
  opacity: 0.15;                 /* subtle visibility */
  mix-blend-mode: screen;        /* blends with sky */
  filter: blur(0.5px);           /* softens edges */
}

/* Overlay text */
.overlay-text {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  width: max-content;
  text-align: center;
  white-space: nowrap;

  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  pointer-events: none;
}