@keyframes spin {
  0% { rotate: 0deg; }
  100% { rotate: -360deg; }
}

@keyframes palisade {
  0% { background-position: 0 0; }
  100% { background-position: 8vmin 0; }
}

:root::before {
  content: "";
  width: 40vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 1.25vmin solid;
  background:
    linear-gradient(0deg, #0000 48.65%, #000 0 51.35%, #0000 0),
    linear-gradient(45deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(90deg, #0000 48.65%, #000 0 51.35%, #0000 0),
    linear-gradient(135deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(22.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(67.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(112.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(157.5deg, #0000 49%, #000 0 51%, #0000 0);
  animation: spin 6s linear infinite;
}

:root::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:
    linear-gradient(90deg, #600 0 6vmin, #0000 0 8vmin) 0 0 / 8vmin 100%;
  animation: palisade 0.2s linear infinite;
  transition: opacity 1s;
  opacity: 1;
}

:root:hover::after {
  opacity: 0;
}