/*
optical illusion
all three "spheres" are the same color, but when adding layer, they look green, red, and blue. Mouse over to reveal;
*/
body {
  --size: 1em;
  --line-size: calc(var(--size) / 3);
  font-size: 10px;
  margin: 0;
  height: 100vh;
  overflow: hidden;

  &::after {
    content: "";
    width: calc(var(--size) * 30);
    height: calc(var(--size) * 30);
    position: absolute;
    top: calc(var(--size) * 20);
    left: 50%;
    translate: -50% -33.333%;
    background: 
      radial-gradient(farthest-side circle, #fff 0%, #bbb 66.66%, #0000 calc(66.66% + 1px)) 0 0 / 33.333% 100%;
    background: 
      radial-gradient(farthest-side circle at 45% 45%, #0000 60%, #0004) 0 0 / 33.333% 33.333%,
      radial-gradient(farthest-side circle at 33% 33%, #fffc 0%, #fff0) 0 0 / 33.333% 33.333%,
      radial-gradient(farthest-side circle at 20% 20%, #0000 0%, #0004) 0 0 / 33.333% 33.333%,
      #ba9;
    mask:
      radial-gradient(farthest-side circle, #fff 66.66%, #0000 calc(66.66% + 1px)) 0 0 / 33.333% 33.333% intersect,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 0 0 / 33.33% 100% repeat-y,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 50% calc(var(--size) / 3) / 33.33% 50% repeat-y,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 100% calc(var(--size) / 3 * 2) / 33.33% 50% repeat-y;
    
    
    mask:
      radial-gradient(farthest-side circle, #fff 66.66%, #0000 calc(66.66% + 1px)) 0 0 / 33.333% 33.333% intersect,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 0 0 / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 50% calc(var(--size) / 3) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 100% calc(var(--size) / 3 * 2) / 33.333% 33.333% no-repeat,
      
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 0 calc(50% + var(--size) / 3) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 50% calc(50% + var(--size) / 3 * 2) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 100% 50% / 33.333% 33.333% no-repeat,
      
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 0 calc(100% + var(--size) / 3 * 2) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 50% 100% / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 calc(var(--size) / 3 * 2), #0000 0 var(--size)) 100% calc(100% + var(--size) / 3) / 33.333% 33.333% no-repeat;
  }

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    /*     background:
    linear-gradient(#3279c7 33.33%, #55eb4a 0 66.66%, #b5201a 0) 0 0 / var(--size) var(--size); */
    background:
      linear-gradient(#00f 33.33%, #0f0 0 66.66%, #f00 0) 0 0 / var(--size) var(--size);
    transition: height 1s;
  }

  &:hover {
    &::before {
      height: 0;
    }
  }
}