:root {
  font-size: 12px;

  &::after {
    background: 
      radial-gradient(farthest-side circle at 45% 45%, #0000 60%, #0004),
      radial-gradient(farthest-side circle at 33% 33%, #fffc 0%, #fff0),
      radial-gradient(farthest-side circle at 20% 20%, #0000 0%, #0004),
      #ba9;
    background-size: 33.333% 33.333%;
    content: "";
    height: 30em;
    left: 50%;
    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 0.666em, #0000 0 1em) 0 0 / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 50% 0.333em / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 100% 0.666em / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 0 calc(50% + 1em / 3) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 50% calc(50% + 1em / 3 * 2) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 100% 50% / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 0 calc(100% + 1em / 3 * 2) / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 50% 100% / 33.333% 33.333% no-repeat,
      repeating-linear-gradient(#000 0 0.666em, #0000 0 1em) 100% calc(100% + 1em / 3) / 33.333% 33.333% no-repeat;
    position: absolute;
    top: 20em;
    translate: -50% -33.333%;
    width: 30em;
  }

  &::before {
    background:
      linear-gradient(#00f 33.33%, #0f0 0 66.66%, #f00 0) 0 0 / 1em 1em;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: height 1s;
    width: 100%;
  }

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