/*
optical illusions
Look at the red dots: they move in a straight line. Now focus on any of the black crosses, and it will look like the dots follow a curvy path instead of the straight line.
*/
@keyframes ball {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, -92%); }
}
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-size: 0.8vw;
  background: 
    linear-gradient(#000 0 0) 50% 50% / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 50% / 2em 0.4em,
    linear-gradient(#000 0 0) 50% 3em / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 3.8em / 2em 0.4em,
    linear-gradient(#000 0 0) 50% calc(100% - 3em) / 0.4em 2em,
    linear-gradient(#000 0 0) 50% calc(100% - 3.8em) / 2em 0.4em,
    #777;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    --mask:
      radial-gradient(7.75em at calc(100% + 5.25em) 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% - 5em + .5px) calc(50% - 10em)/ 10em 20em,
      radial-gradient(7.75em at -5.25em 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% + 5em) 50%/10em 20em;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: #fff;
    clip-path: polygon(5% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 95% 0, 95% 100%, 5% 100%);
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
  
  &::after {
    --color: #f00;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
/*     background:
      radial-gradient(circle at 12.5% 96%, var(--color) 2em, #0000 0),
      radial-gradient(circle at 25% 96%, var(--color) 2em, #0000 0),
      radial-gradient(circle at 37.5% 96%, var(--color) 2em, #0000 0),
      radial-gradient(circle at 62.5% 96%, var(--color) 2em, #0000 0),
      radial-gradient(circle at 75% 96%, var(--color) 2em, #0000 0),
      radial-gradient(circle at 87.5% 96%, var(--color) 2em, #0000 0); */
    background:
      radial-gradient(circle at 50% 96%, red 2em, #0000 0) 50% 50% / 8% 100%
      ;
    animation: ball 3s linear alternate infinite;
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
}