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

.heroScene,
.aboutScene {
  pointer-events: none;
}

.heroScene {
  z-index: 0;
  background:
    linear-gradient(to bottom, #c7edfb 0%, #dff5fc 47%, #f8faff 82%, var(--bg-page) 100%);
}

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

:global([data-theme="dark"]) .heroScene {
  background:
    linear-gradient(to bottom, #071936 0%, #06142f 50%, #020e28 82%, var(--bg-page) 100%);
}

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

.aboutScene canvas {
  opacity: 0.62;
}

.aboutScene {
  z-index: 0;
}

.aboutSceneBoundary {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.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: 40rem;
  }

  .aboutSceneBoundary {
    bottom: auto;
    height: 40rem;
  }

  .aboutScene canvas {
    opacity: 0.56;
  }
}

@media (min-width: 1441px) {
  .aboutSceneBoundary {
    overflow: visible;
  }

  .aboutScene {
    overflow: visible;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100vw;
  }

  .aboutScene::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100vw;
  }
}