/* 
 * GeoScanner Pro 9000 - Keyframe Animations & Transitions
 * Strictly Static Web Architecture (HTML5 / CSS3 / ES6 JS)
 */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.35);
  }
  50% {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.65);
  }
}

@keyframes pulseAlert {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.8);
  }
  50% {
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.9);
    border-color: #ef4444;
  }
}

@keyframes radarRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes scanSweep {
  0% {
    top: 0%;
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0.8;
  }
}

@keyframes blinkStatus {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.anim-pulse-glow {
  animation: pulseGlow 2.5s infinite ease-in-out;
}

.anim-pulse-alert {
  animation: pulseAlert 1.2s infinite ease-in-out;
}

.anim-blink {
  animation: blinkStatus 1s infinite ease-in-out;
}

/* Radar Sweep Overlay on Canvas */
.radar-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 12;
}

.radar-sweep-line {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 320deg,
    rgba(6, 182, 212, 0.18) 350deg,
    rgba(6, 182, 212, 0.85) 360deg
  );
  animation: radarRotate 3s infinite linear;
  display: none;
}

.radar-sweep-line.active {
  display: block;
}

.radar-sweep-line.anomaly {
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 320deg,
    rgba(239, 68, 68, 0.18) 350deg,
    rgba(239, 68, 68, 0.9) 360deg
  );
  animation: radarRotate 1.5s infinite linear;
}

/* Spinner */
.spin-icon {
  animation: radarRotate 1.8s infinite linear;
  display: inline-block;
}

@keyframes screenPageEnter {
  0% {
    opacity: 0;
    transform: scale(0.985) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.screen.fade-in {
  animation: screenPageEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}