/* ==========================================================================
   RUCKUS x certified IT - Performance CSS Animations & Micro-Interactions
   ========================================================================== */

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

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

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

@keyframes beamPing {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  80%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.radar-sweep-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  margin-top: -125px;
  margin-left: -125px;
  background: conic-gradient(from 0deg, rgba(243, 112, 33, 0.4) 0deg, rgba(243, 112, 33, 0) 60deg);
  border-radius: 50%;
  animation: radarSweep 4s linear infinite;
  pointer-events: none;
}

.radar-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  background: var(--ruckus-orange);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--ruckus-orange);
  z-index: 3;
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(243, 112, 33, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

.radar-ring-1 {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
}

.radar-ring-2 {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.radar-ring-3 {
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

.radar-ping-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ruckus-lime);
  box-shadow: 0 0 8px var(--ruckus-lime);
  z-index: 2;
}

.radar-ping-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ruckus-lime);
  animation: beamPing 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

/* Shimmer Loading State for Form Submissions */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.btn-loading {
  background: linear-gradient(90deg, #F37021 25%, #FFA566 50%, #F37021 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
  pointer-events: none;
  opacity: 0.9;
}