.hyperspeed-page {
  background: #1a1a1a;
}

.hyperspeed-page .scroll-container,
.hyperspeed-page .container,
.hyperspeed-page footer {
  position: relative;
  z-index: 10;
}

.hyperspeed-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(159, 255, 203, 0.08), transparent 32%),
    linear-gradient(180deg, #020303 0%, #0a0b0b 52%, #1a1a1a 100%);
}

.hyperspeed-layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hyperspeed-layer.is-ready canvas {
  opacity: 0.72;
}

.hyperspeed-layer::before,
.hyperspeed-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hyperspeed-layer::before {
  z-index: 1;
  background-image:
    linear-gradient(rgba(159, 255, 203, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 255, 203, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.4;
}

.hyperspeed-layer::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(26, 26, 26, 0.45) 48%, rgba(26, 26, 26, 0.9) 100%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.72), transparent 28%, transparent 72%, rgba(26, 26, 26, 0.72));
}

.hyperspeed-layer.is-reduced,
.hyperspeed-layer.is-error {
  background:
    radial-gradient(circle at 50% 18%, rgba(159, 255, 203, 0.13), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(83, 194, 198, 0.09), transparent 34%),
    linear-gradient(180deg, #020303 0%, #0d0f0f 55%, #1a1a1a 100%);
}

@media (max-width: 768px) {
  .hyperspeed-layer.is-ready canvas {
    opacity: 0.6;
  }

  .hyperspeed-layer::before {
    background-size: 36px 36px;
    opacity: 0.3;
  }
}