/*
optical illusion
The dots always have the same color all the time, but while having opposite background, it looks like they are not synced because the blend with the background. Mouse over to reveal.
*/
@keyframes blink {
  0% { background: #ddd; }
  100% { background: #222; }
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(90deg, #222 50%, #ddd 0) 0 100% / 100% 100% no-repeat;
  transition: background-size 1s;
  
  &:hover {
    background-size: 100% 20%;
  }
  
  &::before, &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    translate: 10vmin -50%;
    width: 20vmin;
    aspect-ratio: 1;
    boder-radius: 50%;
    background: #ddd;
    animation: blink 0.5s linear alternate infinite;
  }
  
  &::after {
    translate: calc(-100% - 10vmin) -50%;
  }
}