/* ==========================================================================
   ANIMATIONS.CSS
   Keyframes y clases de animación: revelado al hacer scroll, hero,
   radar/escaneo tecnológico, pulso de WhatsApp.
   ========================================================================== */

/* --- Revelado al hacer scroll (activado por scrollReveal.js) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --- Hero: entrada de contenido --- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content > * {
  animation: fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.hero__content > *:nth-child(4) { animation-delay: 0.35s; }

/* --- Hero: radar de escaneo (visual tecnológico, sin imágenes) --- */
.radar {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
  border-radius: 50%;
  border: 1px solid rgba(196, 30, 30, 0.25);
  display: grid;
  place-items: center;
}

.radar::before,
.radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196, 30, 30, 0.18);
}

.radar::before {
  inset: 15%;
}

.radar::after {
  inset: 32%;
}

.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(196, 30, 30, 0.55), transparent 32%);
  animation: radar-spin 4s linear infinite;
  -webkit-mask-image: radial-gradient(circle, transparent 0%, black 2%);
  mask-image: radial-gradient(circle, transparent 0%, black 2%);
}

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

.radar__core {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-glow);
}

.radar__core svg {
  width: 46px;
  height: 46px;
  color: #ffffff;
}

.radar__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 12px var(--color-secondary);
  animation: radar-blip 2.6s ease-in-out infinite;
}

.radar__dot:nth-child(3) { top: 22%; left: 68%; animation-delay: 0s; }
.radar__dot:nth-child(4) { top: 65%; left: 28%; animation-delay: 0.8s; }
.radar__dot:nth-child(5) { top: 40%; left: 82%; animation-delay: 1.6s; }

@keyframes radar-blip {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* --- Fondo de grid tecnológico (secciones oscuras) --- */
.tech-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 30, 30, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 30, 30, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 85%);
  mask-image: linear-gradient(180deg, black, transparent 85%);
  pointer-events: none;
}

/* --- Pulso del botón de WhatsApp --- */
@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}