@keyframes flicker {
  to {
    background-position: 1000px 1000px, 50% 10%;
  }
}

@keyframes flicker-2 {
  to {
    background-position: -1000px -1000px, 50% 10%;
  }
}

.svg-mask {
  width: 0;
  height: 0;
}

.mask-content {
  overflow: hidden;
}

#mask {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("https://github.com/augusta-dev/ckp-rccg/blob/main/Mask%20group%202.png?raw=true");
  background-repeat: repeat;
  background-size: contain;
  background-blend-mode: multiply;
  -webkit-mask-image: url("#squareMask");
  mask-image: url("#squareMask");
  animation: flicker 30s infinite linear;
}

#mask-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 25vh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient( to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.1) 100% );
  mask-image: linear-gradient( to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.1) 100% );
}

#mask-wrapper-2 {
  position: absolute;
  bottom: -4rem;
  left: 0;
  width: 100vw;
  height: 35vh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.2) 100% );
  mask-image: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.2) 100% );
}

#mask-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("https://github.com/augusta-dev/ckp-rccg/blob/main/Mask%20group%202.png?raw=true");
  background-repeat: repeat;
  background-size: contain;
  background-blend-mode: multiply;
  -webkit-mask-image: url("#squareMask-2");
  mask-image: url("#squareMask-2");
  animation: flicker-2 30s infinite linear;
}

.mask-wrapper {
  padding: 4px;
}