.heroScene,
.aboutScene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-page);
  pointer-events: none;
}

.heroScene {
  z-index: 0;
}

.heroScene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, var(--bg-page) 0 14%, transparent 44%),
    linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
  opacity: 0.42;
}

.heroScene canvas,
.aboutScene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.aboutScene {
  z-index: 0;
}

.aboutScene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-page), transparent 12%, transparent 88%, var(--bg-page));
}

@media (max-width: 640px) {
  .heroScene::after {
    opacity: 0.62;
  }

  .aboutScene {
    bottom: auto;
    height: 640px;
  }
}