body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: #080b14;
}

/* Cuadrícula y luz violeta */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 20%,
      rgba(94.2, 92.4, 207.6, .22),
      transparent 65%
    ),
    linear-gradient(
      rgba(94.2, 92.4, 207.6, .06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(94.2, 92.4, 207.6, .06) 1px,
      transparent 1px
    );
  background-size: auto, 48px 48px, 48px 48px;
}

/* Radar circular */
body::after {
  content: "";
  position: fixed;
  top: 100px;
  right: -180px;
  width: min(700px, 110vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  opacity: .45;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 69px,
      rgba(94.2, 92.4, 207.6, .18) 70px 71px,
      transparent 72px 140px
    ),
    conic-gradient(
      from 0deg,
      transparent 270deg,
      rgba(94.2, 92.4, 207.6, .2) 345deg,
      transparent 360deg
    );
  animation: radar-giro 35s linear infinite;
}

@keyframes radar-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  body::after {
    top: 140px;
    right: -35vw;
    opacity: .3;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

body::after {
  opacity: .85;
  right: -100px;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 68px,
      rgba(130, 125, 255, .4) 69px 71px,
      transparent 72px 140px
    ),
    conic-gradient(
      from 0deg,
      transparent 260deg,
      rgba(94.2, 92.4, 207.6, .08) 290deg,
      rgba(130, 125, 255, .4) 350deg,
      transparent 360deg
    );
}

@media (max-width: 600px) {
  body::after {
    right: -35vw;
    opacity: .55;
  }
}

.radar-ambiente {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Coincide con la posición y tamaño del radar */
.radar-objetivos {
  position: absolute;
  top: 100px;
  right: -100px;
  width: min(700px, 110vw);
  aspect-ratio: 1;
}

.radar-objetivo {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6b2ff;
  box-shadow:
    0 0 10px #827dff,
    0 0 24px rgba(130, 125, 255, .6);
  animation: objetivo-pulso 3s ease-in-out infinite;
}

/* Anillo de detección */
.radar-objetivo::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(182, 178, 255, .65);
  border-radius: 50%;
  animation: objetivo-onda 3s ease-out infinite;
}

.objetivo-uno {
  top: 28%;
  left: 35%;
}

.objetivo-dos {
  top: 60%;
  left: 24%;
  animation-delay: -1s;
}

.objetivo-tres {
  top: 67%;
  left: 64%;
  animation-delay: -2s;
}

.objetivo-dos::after {
  animation-delay: -1s;
}

.objetivo-tres::after {
  animation-delay: -2s;
}

/* Humo simulado con nubes de luz */
.radar-humo {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(
      ellipse at 25% 35%,
      rgba(94.2, 92.4, 207.6, .2),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 75% 65%,
      rgba(130, 90, 210, .16),
      transparent 40%
    );
  filter: blur(35px);
  animation: humo-desplazar 18s ease-in-out infinite alternate;
}

@keyframes objetivo-pulso {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@keyframes objetivo-onda {
  0% {
    transform: scale(.5);
    opacity: .8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes humo-desplazar {
  from {
    transform: translate(-3%, -2%) scale(1);
  }
  to {
    transform: translate(3%, 4%) scale(1.12);
  }
}

@media (max-width: 600px) {
  .radar-objetivos {
    top: 140px;
    right: -35vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-humo,
  .radar-objetivo,
  .radar-objetivo::after {
    animation: none;
  }

  .radar-objetivo::after {
    opacity: .4;
  }
}

.objetivo-uno {
  animation:
    objetivo-pulso 3s ease-in-out infinite,
    objetivo-ruta-uno 16s ease-in-out infinite;
}

.objetivo-dos {
  animation:
    objetivo-pulso 3s ease-in-out -1s infinite,
    objetivo-ruta-dos 20s ease-in-out infinite;
}

.objetivo-tres {
  animation:
    objetivo-pulso 3s ease-in-out -2s infinite,
    objetivo-ruta-tres 18s ease-in-out infinite;
}

@keyframes objetivo-ruta-uno {
  0%, 100% { top: 28%; left: 35%; }
  25%      { top: 35%; left: 55%; }
  50%      { top: 48%; left: 62%; }
  75%      { top: 40%; left: 30%; }
}

@keyframes objetivo-ruta-dos {
  0%, 100% { top: 60%; left: 24%; }
  25%      { top: 68%; left: 38%; }
  50%      { top: 55%; left: 52%; }
  75%      { top: 42%; left: 35%; }
}

@keyframes objetivo-ruta-tres {
  0%, 100% { top: 67%; left: 64%; }
  25%      { top: 52%; left: 72%; }
  50%      { top: 33%; left: 58%; }
  75%      { top: 55%; left: 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-objetivo {
    animation: none;
  }
}

.login-radar {
  background: transparent;
}