$dark: #BFBFBF;
$light: #D2D2D2;

$white: lighten($light, 10%);
$black: darken($dark, 10%);

$percent: 0.3125%;

$cellSize: 64px;

@function -rad($color, $x, $y, $size) {
  @return radial-gradient(15% 80% at center, $color 0%, $color 3%, transparent 3%) repeat #{$x * $cellSize} #{$y * $cellSize} / $size;
}

@function -radHorisontal($color, $x, $y, $size) {
  @return radial-gradient(80% 15% at center, $color 0%, $color 3%, transparent 3%) repeat #{$x * $cellSize} #{$y * $cellSize} / $size;
}

@mixin multiBg($size, $fn) {
  $gradient_list: ();
  @for $i from 0 through 7 {
    $gradient_string: 
      call($fn, $white, (7 - $i), $i, $size),
      call($fn, $black, (6 - $i), $i, $size),
      call($fn, $white, (5 - $i), $i, $size),
      call($fn, $black, (4 - $i), $i, $size),
      call($fn, $black, (3 - $i), $i, $size),
      call($fn, $white, (2 - $i), $i, $size),
      call($fn, $black, (1 - $i), $i, $size),
      call($fn, $white, (0 - $i), $i, $size);
    $gradient_list: append($gradient_list, $gradient_string, comma);  
  }
  background: $gradient_list;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

.grid {
  $size: #{$cellSize * 8} #{$cellSize * 8};
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image:
    linear-gradient(45deg, $light 0, $light 25%, transparent 25%, transparent 75%, $light 75%),
    linear-gradient(45deg, $light 0, $light 25%, transparent 25%, transparent 75%, $light 75%),
    linear-gradient($dark 0, $dark 100%);
  background-repeat: repeat;
  background-size: 
    #{$cellSize*2} #{$cellSize*2},
    #{$cellSize*2} #{$cellSize*2},
    100% 100%;
  background-position:
    0 0,
    $cellSize $cellSize,
    0 0;
  
  &::before, &::after {
    content: '';
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    animation: hide 10s linear infinite;
    will-change: opacity;
  }

  &::before {
    @include multiBg($size, -rad);
  }
  &::after {
    @include multiBg($size, -radHorisontal);
  }
}

@keyframes hide {
  0%, 20%, 80%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}