/**
 * RADAR EFFECT - Vanilla CSS/JS
 * Adaptado del componente React premium para Marcas Millonarias
 * 
 * USO:
 * 1. Incluir este CSS
 * 2. Agregar la estructura HTML del radar
 * 3. El JS inicializa automáticamente
 */

/* =================================
   RADAR CONTAINER
   ================================= */
.radar-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 40rem; /* 640px */
  aspect-ratio: 1;
}

/* Mobile sizing */
@media (max-width: 767px) {
  .radar-container {
    max-width: 20rem; /* 320px */
  }
}

/* =================================
   RADAR SWEEP (rotating line)
   ================================= */
.radar-sweep {
  position: absolute;
  right: 50%;
  top: 50%;
  width: 50%;
  height: 5px;
  transform-origin: right center;
  animation: radar-spin 10s linear infinite;
  z-index: 40;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.radar-sweep::after {
  content: '';
  position: relative;
  z-index: 40;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right, 
    transparent, 
    var(--radar-color, #7c3aed) 30%,
    var(--radar-color-bright, #a78bfa) 50%,
    var(--radar-color, #7c3aed) 70%,
    transparent
  );
}

/* Gradient Future colors (purple→cyan) */
.radar-sweep--gradient-future::after {
  background: linear-gradient(
    to right, 
    transparent, 
    #7c3aed 20%,
    #3b82f6 40%,
    #06b6d4 60%,
    #3b82f6 80%,
    transparent
  );
}

@keyframes radar-spin {
  from { transform: rotate(20deg); }
  to { transform: rotate(380deg); }
}

/* =================================
   CONCENTRIC CIRCLES
   ================================= */
.radar-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.3); /* purple-500 base */
  animation: radar-circle-appear 0.3s ease-out forwards;
  opacity: 0;
}

/* Gradient Future circles */
.radar-circle--gradient-future {
  border-color: rgba(124, 58, 237, var(--circle-opacity, 0.3));
  box-shadow: 
    0 0 20px rgba(124, 58, 237, calc(var(--circle-opacity, 0.3) * 0.3)),
    inset 0 0 10px rgba(59, 130, 246, calc(var(--circle-opacity, 0.3) * 0.2));
}

@keyframes radar-circle-appear {
  from { 
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Circle sizes (8 circles, each 5rem larger) */
.radar-circle:nth-child(1) { width: 5rem; height: 5rem; animation-delay: 0.1s; --circle-opacity: 0.8; }
.radar-circle:nth-child(2) { width: 10rem; height: 10rem; animation-delay: 0.2s; --circle-opacity: 0.7; }
.radar-circle:nth-child(3) { width: 15rem; height: 15rem; animation-delay: 0.3s; --circle-opacity: 0.6; }
.radar-circle:nth-child(4) { width: 20rem; height: 20rem; animation-delay: 0.4s; --circle-opacity: 0.5; }
.radar-circle:nth-child(5) { width: 25rem; height: 25rem; animation-delay: 0.5s; --circle-opacity: 0.4; }
.radar-circle:nth-child(6) { width: 30rem; height: 30rem; animation-delay: 0.6s; --circle-opacity: 0.3; }
.radar-circle:nth-child(7) { width: 35rem; height: 35rem; animation-delay: 0.7s; --circle-opacity: 0.2; }
.radar-circle:nth-child(8) { width: 40rem; height: 40rem; animation-delay: 0.8s; --circle-opacity: 0.1; }

/* Mobile circle sizes */
@media (max-width: 767px) {
  .radar-circle:nth-child(1) { width: 2.5rem; height: 2.5rem; }
  .radar-circle:nth-child(2) { width: 5rem; height: 5rem; }
  .radar-circle:nth-child(3) { width: 7.5rem; height: 7.5rem; }
  .radar-circle:nth-child(4) { width: 10rem; height: 10rem; }
  .radar-circle:nth-child(5) { width: 12.5rem; height: 12.5rem; }
  .radar-circle:nth-child(6) { width: 15rem; height: 15rem; }
  .radar-circle:nth-child(7) { width: 17.5rem; height: 17.5rem; }
  .radar-circle:nth-child(8) { width: 20rem; height: 20rem; }
}

/* =================================
   ICON CONTAINERS (orbiting icons)
   ================================= */
.radar-icon {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  animation: radar-icon-appear 0.3s ease-out forwards;
  opacity: 0;
}

.radar-icon__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  border: 1px solid rgba(124, 58, 237, 0.5);
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.2), 
    rgba(59, 130, 246, 0.2)
  );
  backdrop-filter: blur(8px);
  box-shadow: 
    0 4px 16px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.radar-icon__box svg,
.radar-icon__box img {
  width: 1.5rem;
  height: 1.5rem;
  color: #a78bfa; /* purple-400 */
}

.radar-icon__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
}

/* Hide labels on mobile */
@media (max-width: 767px) {
  .radar-icon__label {
    display: none;
  }
  
  .radar-icon__box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
  }
  
  .radar-icon__box svg,
  .radar-icon__box img {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@keyframes radar-icon-appear {
  from { 
    opacity: 0;
    transform: scale(0.8);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Icon positions (at different circles) */
.radar-icon--top { top: 15%; left: 50%; transform: translateX(-50%); animation-delay: 0.4s; }
.radar-icon--right { top: 50%; right: 15%; transform: translateY(-50%); animation-delay: 0.5s; }
.radar-icon--bottom { bottom: 15%; left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }
.radar-icon--left { top: 50%; left: 15%; transform: translateY(-50%); animation-delay: 0.7s; }

/* Diagonal positions */
.radar-icon--top-right { top: 22%; right: 22%; animation-delay: 0.45s; }
.radar-icon--bottom-right { bottom: 22%; right: 22%; animation-delay: 0.55s; }
.radar-icon--bottom-left { bottom: 22%; left: 22%; animation-delay: 0.65s; }
.radar-icon--top-left { top: 22%; left: 22%; animation-delay: 0.75s; }

/* =================================
   CENTER DOT (radar origin)
   ================================= */
.radar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  z-index: 45;
  box-shadow: 
    0 0 20px rgba(124, 58, 237, 0.6),
    0 0 40px rgba(6, 182, 212, 0.4);
  animation: radar-pulse 2s ease-in-out infinite;
}

@keyframes radar-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 20px rgba(124, 58, 237, 0.6),
      0 0 40px rgba(6, 182, 212, 0.4);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 
      0 0 30px rgba(124, 58, 237, 0.8),
      0 0 60px rgba(6, 182, 212, 0.6);
  }
}

/* =================================
   GLOW TRAIL (sweep afterglow)
   ================================= */
.radar-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    transparent 0deg,
    rgba(124, 58, 237, 0.15) 30deg,
    rgba(59, 130, 246, 0.1) 60deg,
    transparent 90deg
  );
  animation: radar-spin 10s linear infinite;
  z-index: 35;
  pointer-events: none;
}

/* =================================
   USAGE EXAMPLE HTML:
   
   <div class="radar-container">
     <!-- Glow trail -->
     <div class="radar-glow"></div>
     
     <!-- Center dot -->
     <div class="radar-center"></div>
     
     <!-- Sweep line -->
     <div class="radar-sweep radar-sweep--gradient-future"></div>
     
     <!-- Concentric circles -->
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     <div class="radar-circle radar-circle--gradient-future"></div>
     
     <!-- Icons (optional) -->
     <div class="radar-icon radar-icon--top">
       <div class="radar-icon__box">
         <svg>...</svg>
       </div>
       <span class="radar-icon__label">M - Método</span>
     </div>
     <div class="radar-icon radar-icon--right">
       <div class="radar-icon__box">
         <svg>...</svg>
       </div>
       <span class="radar-icon__label">A - Advertising</span>
     </div>
     <div class="radar-icon radar-icon--bottom">
       <div class="radar-icon__box">
         <svg>...</svg>
       </div>
       <span class="radar-icon__label">P - Posicionamiento</span>
     </div>
     <div class="radar-icon radar-icon--left">
       <div class="radar-icon__box">
         <svg>...</svg>
       </div>
       <span class="radar-icon__label">A - Automatización</span>
     </div>
   </div>
   
   ================================= */