Retro Cyberpunk Grid / Synthwave Horizon

.bga-13, .bga-13 *, .bga-13 *::before, .bga-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-13 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-13__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0221 0%, #2a0a4a 45%, #51087e 60%, #ff2e88 100%);
  perspective: 380px;
}

/* Sun on the horizon */
.bga-13__sun {
  position: absolute;
  top: 38%; left: 50%;
  width: 300px; height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe94e 0%, #ff7ac6 55%, #ff2e88 100%);
  box-shadow: 0 0 80px rgba(255,46,136,0.7);
  z-index: 1;
}
/* Scanline gaps cut into the sun */
.bga-13__sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 10px,
    rgba(13,2,33,0.9) 10px 14px
  );
  -webkit-mask: linear-gradient(180deg, transparent 45%, #000 45%);
  mask: linear-gradient(180deg, transparent 45%, #000 45%);
}

/* The receding 3D grid floor */
.bga-13__grid {
  position: absolute;
  bottom: 0; left: -50%;
  width: 200%;
  height: 70%;
  transform: rotateX(78deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(rgba(0,255,255,0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,46,200,0.6) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: bga-13-scroll 1.2s linear infinite;
}
/* Glow fade toward the horizon */
.bga-13__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0d0221 0%, transparent 40%);
}

@keyframes bga-13-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-13__grid {
    animation: none !important;
  }
}

.bga-13, .bga-13 *, .bga-13 *::before, .bga-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-13 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-13__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0221 0%, #2a0a4a 45%, #51087e 60%, #ff2e88 100%);
  perspective: 380px;
}

/* Sun on the horizon */
.bga-13__sun {
  position: absolute;
  top: 38%; left: 50%;
  width: 300px; height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe94e 0%, #ff7ac6 55%, #ff2e88 100%);
  box-shadow: 0 0 80px rgba(255,46,136,0.7);
  z-index: 1;
}
/* Scanline gaps cut into the sun */
.bga-13__sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 10px,
    rgba(13,2,33,0.9) 10px 14px
  );
  -webkit-mask: linear-gradient(180deg, transparent 45%, #000 45%);
  mask: linear-gradient(180deg, transparent 45%, #000 45%);
}

/* The receding 3D grid floor */
.bga-13__grid {
  position: absolute;
  bottom: 0; left: -50%;
  width: 200%;
  height: 70%;
  transform: rotateX(78deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(rgba(0,255,255,0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,46,200,0.6) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: bga-13-scroll 1.2s linear infinite;
}
/* Glow fade toward the horizon */
.bga-13__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0d0221 0%, transparent 40%);
}

@keyframes bga-13-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-13__grid {
    animation: none !important;
  }
}