.wrap {
  width: 29vw;
  height: 29vw;
  position: absolute;
  bottom: 5.5vh;
  right: 4vw;
  filter: blur(0.15vh);
  perspective: 1000px;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .wrap {
    display: none;
  }
}

.circle {
  position: absolute;
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
  border: 2px solid #0f0;
  box-shadow: 0 0 15px #0f0, 0 0 25px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
  animation: circlePulse 4s infinite alternate, rotateCircle 20s linear infinite;
  transform-style: preserve-3d;
}

@keyframes circlePulse {
  0%, 100% { 
    box-shadow: 0 0 15px #0f0, 0 0 25px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
    filter: brightness(1);
  }
  25% {
    box-shadow: 0 0 18px #0f0, 0 0 30px rgba(0, 255, 0, 0.6), inset 0 0 15px rgba(0, 255, 0, 0.4);
    filter: brightness(1.1);
  }
  50% { 
    box-shadow: 0 0 25px #0f0, 0 0 40px rgba(0, 255, 0, 0.7), inset 0 0 20px rgba(0, 255, 0, 0.5); 
    filter: brightness(1.2);
  }
  75% {
    box-shadow: 0 0 18px #0f0, 0 0 30px rgba(0, 255, 0, 0.6), inset 0 0 15px rgba(0, 255, 0, 0.4);
    filter: brightness(1.1);
  }
}

@keyframes rotateCircle {
  0% { transform: rotateY(0deg) rotateX(5deg); }
  50% { transform: rotateY(180deg) rotateX(-5deg); }
  100% { transform: rotateY(360deg) rotateX(5deg); }
}

.circle:nth-child(1) {
  width: 25vw;
  height: 25vw;
  animation: circlePulse 4s infinite alternate, rotateCircle 24s linear infinite;
}

.circle:nth-child(2) {
  width: 18vw;
  height: 18vw;
  margin: 3.5vw;
  animation: circlePulse 5s infinite alternate, rotateCircleReverse 30s linear infinite;
}

@keyframes rotateCircleReverse {
  0% { transform: rotateY(0deg) rotateX(-3deg); }
  50% { transform: rotateY(-180deg) rotateX(3deg); }
  100% { transform: rotateY(-360deg) rotateX(-3deg); }
}

.circle:nth-child(3) {
  width: 11vw;
  height: 11vw;
  margin: 7vw;
  animation: circlePulse 6s infinite alternate, rotateCircle 18s linear infinite;
}

.circle:nth-child(4) {
  width: 4vw;
  height: 4vw;
  margin: 10.5vw;
  animation: centerPulse 3s infinite alternate, rotate3D 8s infinite linear;
  background: rgba(0, 255, 0, 0.3);
  box-shadow: 0 0 20px #0f0, 0 0 35px rgba(0, 255, 0, 0.8), inset 0 0 15px #0f0;
}

@keyframes centerPulse {
  0% {
    transform: scale(0.9);
    background: rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 20px #0f0, 0 0 35px rgba(0, 255, 0, 0.8), inset 0 0 15px #0f0;
  }
  25% {
    transform: scale(1.0);
    background: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 25px #0f0, 0 0 40px rgba(0, 255, 0, 0.85), inset 0 0 20px #0f0;
  }
  39% { 
    transform: scale(1.05) translate(0, 0);
  }
  39.5% {
    transform: scale(1.1) translate(-2px, 3px);
    filter: hue-rotate(30deg);
  }
  40% {
    transform: scale(0.95) translate(2px, -1px);
    filter: hue-rotate(0deg);
  }
  40.5% {
    transform: scale(1.05) translate(0, 0);
  }
  50% {
    transform: scale(1.1);
    background: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 30px #0f0, 0 0 50px rgba(0, 255, 0, 0.9), inset 0 0 25px #0f0;
  }
  76% {
    transform: scale(1.0) translate(0, 0);
  }
  76.25% {
    transform: scale(1.15) translate(3px, 2px);
    filter: hue-rotate(-40deg) brightness(1.3);
  }
  76.5% {
    transform: scale(0.9) translate(-3px, -2px);
    filter: hue-rotate(0deg) brightness(1);
  }
  76.75% {
    transform: scale(1.0) translate(0, 0);
  }
  100% {
    transform: scale(0.9);
    background: rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 20px #0f0, 0 0 35px rgba(0, 255, 0, 0.8), inset 0 0 15px #0f0;
  }
}

@keyframes rotate3D {
  0% { transform: rotate3d(1, 1, 1, 0deg); }
  100% { transform: rotate3d(1, 1, 1, 360deg); }
}

.circle:nth-child(4)::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: 
    radial-gradient(circle, transparent 30%, rgba(0, 255, 0, 0.8) 30%, rgba(0, 255, 0, 0.8) 40%, transparent 40%), 
    linear-gradient(45deg, transparent 45%, rgba(0, 255, 0, 0.5) 45%, rgba(0, 255, 0, 0.5) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(0, 255, 0, 0.5) 45%, rgba(0, 255, 0, 0.5) 55%, transparent 55%);
  border-radius: 50%;
  animation: alienSymbol 6s infinite linear;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}

@keyframes alienSymbol {
  0% { transform: rotate(0deg); opacity: 0.7; }
  25% { transform: rotate(90deg); opacity: 0.8; }
  50% { transform: rotate(180deg); opacity: 0.9; }
  75% { transform: rotate(270deg); opacity: 0.8; }
  100% { transform: rotate(360deg); opacity: 0.7; }
}

.circle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.3;
  background-size: 30% 30%;
  background-repeat: repeat;
  background-image: radial-gradient(circle, #0f0 10%, transparent 10%);
  animation: symbolRotate 20s infinite linear;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes symbolRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.circle:nth-child(1)::after {
  background-size: 10% 10%;
  background-image: 
    linear-gradient(90deg, transparent 90%, rgba(0, 255, 0, 0.4) 90%, rgba(0, 255, 0, 0.4) 100%), 
    linear-gradient(0deg, transparent 90%, rgba(0, 255, 0, 0.4) 90%, rgba(0, 255, 0, 0.4) 100%),
    radial-gradient(circle at 30% 30%, rgba(0, 255, 0, 0.2) 0%, transparent 8%),
    radial-gradient(circle at 70% 70%, rgba(0, 255, 0, 0.2) 0%, transparent 8%);
}

.circle:nth-child(2)::after {
  background-size: 15% 15%;
  background-image: 
    radial-gradient(circle, #0f0 5%, transparent 5%),
    linear-gradient(45deg, transparent 85%, rgba(0, 255, 0, 0.4) 85%, rgba(0, 255, 0, 0.4) 100%),
    linear-gradient(-45deg, transparent 85%, rgba(0, 255, 0, 0.4) 85%, rgba(0, 255, 0, 0.4) 100%);
}

.scanning-beam {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.7;
}

.scanning-beam::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 255, 0, 0.1) 30%, 
    rgba(0, 255, 0, 0.3) 50%, 
    rgba(0, 255, 0, 0.1) 70%, 
    transparent 100%
  );
  animation: scanBeam 4s infinite linear;
}

@keyframes scanBeam {
  0% { transform: translateX(0%); }
  100% { transform: translateX(200%); }
}

.interference-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.05) 2px,
    rgba(0, 255, 0, 0.05) 4px
  );
  opacity: 0.3;
  pointer-events: none;
  animation: interferenceMove 10s infinite linear;
}

@keyframes interferenceMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}