#bg-canvas {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 38%;
  z-index: 0;
  pointer-events: none;
}

#scene-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 600px) {
  #scene-image {
    transform: none;
    object-position: 25% center;
  }
}

#star-canvas {
  position: absolute;
  top:    560px;
  bottom: 720px;
  left:   560px;
  right:  560px;
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 600px) {
  #star-canvas { display: none; }
}

.overlay {
  position: absolute; inset: 0;
  background: var(--overlay-radial), var(--overlay-linear);
  z-index: 4;
  pointer-events: none;
}