/* ==========================================================================
   Vectra IA Lab — Animaciones y motivos tecnológicos
   Dinamismo sobrio: red que se traza, nodos con pulso, terminal de código,
   trama blueprint. Todo respeta prefers-reduced-motion.
   ========================================================================== */

/* ---------- Red del hero: trazado + pulso de nodos (SVG inline) ---------- */
/* Los enlaces de la red se dibujan con dash-offset */
.hero__red .red-enlaces path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: trazar 2s ease forwards;
}
.hero__red .red-enlaces path:nth-child(2) { animation-delay: 0.25s; }
.hero__red .red-enlaces path:nth-child(3) { animation-delay: 0.5s; }
.hero__red .red-enlaces path:nth-child(4) { animation-delay: 0.75s; }
.hero__red .red-enlaces path:nth-child(5) { animation-delay: 1s; }
.hero__red .red-enlaces path:nth-child(6) { animation-delay: 1.25s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* Pulso suave de los nodos grandes */
.hero__red .red-nodos circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulso 3.4s ease-in-out infinite;
}
.hero__red .red-nodos circle:nth-child(2n) { animation-delay: 0.5s; }
.hero__red .red-nodos circle:nth-child(3n) { animation-delay: 1s; }
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Puntos de datos pequeños que destellan */
.hero__red .red-datos circle {
  animation: destello 2.6s ease-in-out infinite;
}
.hero__red .red-datos circle:nth-child(2) { animation-delay: 0.7s; }
.hero__red .red-datos circle:nth-child(3) { animation-delay: 1.3s; }
.hero__red .red-datos circle:nth-child(4) { animation-delay: 1.9s; }
@keyframes destello {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------- Terminal de código animada (motivo "desarrollo") ---------- */
.code-card {
  background: #04203f;
  border: 1px solid rgba(87,195,239,0.22);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  font-family: 'Cascadia Code', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  max-width: 480px;
}
.code-card__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.code-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.code-card__dot--r { background: #ff5f56; }
.code-card__dot--y { background: #ffbd2e; }
.code-card__dot--g { background: #27c93f; }
.code-card__title {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: rgba(234,242,251,0.6);
}
.code-card__body {
  padding: 1rem 1.1rem 1.2rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #cfe3f5;
  white-space: pre;
  overflow-x: auto;
}
.code-card__body .ln { display: block; opacity: 0; animation: aparece-linea 0.4s ease forwards; }
.code-card__body .ln:nth-child(1) { animation-delay: 0.2s; }
.code-card__body .ln:nth-child(2) { animation-delay: 0.5s; }
.code-card__body .ln:nth-child(3) { animation-delay: 0.8s; }
.code-card__body .ln:nth-child(4) { animation-delay: 1.1s; }
.code-card__body .ln:nth-child(5) { animation-delay: 1.4s; }
.code-card__body .ln:nth-child(6) { animation-delay: 1.7s; }
@keyframes aparece-linea {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Cursor parpadeante al final */
.code-card__cursor {
  display: inline-block;
  width: 9px; height: 1.05em;
  background: #57c3ef;
  vertical-align: text-bottom;
  animation: parpadeo 1s step-end infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

/* Tokens de color del código */
.tok-key { color: #57c3ef; }
.tok-fn  { color: #8fd694; }
.tok-str { color: #ffcf6e; }
.tok-com { color: #6b89a6; font-style: italic; }
.tok-num { color: #f78fb3; }

/* ---------- Trama blueprint (motivo "ingeniería") ---------- */
.blueprint {
  position: relative;
  overflow: hidden;
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,151,206,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,151,206,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}
.blueprint > * { position: relative; }

/* ---------- Íconos con "conexión" animada al hacer hover en la tarjeta ---------- */
.tarjeta--hover:hover .tarjeta-icono {
  transform: translateY(-2px) scale(1.04);
  transition: transform var(--t-media);
}
.tarjeta-icono { transition: transform var(--t-media); }

/* ---------- Línea de conexión decorativa entre pasos (principios) ---------- */
.principio {
  position: relative;
  overflow: hidden;
}
.principio::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-azul), #57c3ef, var(--color-azul));
  background-size: 200% 100%;
  animation: barrido 4s linear infinite;
}
@keyframes barrido { to { background-position: -200% 0; } }

/* ---------- Badge con punto latiente ---------- */
.badge--preparacion::before { animation: latido 1.8s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ---------- Flecha del enlace con vaivén sutil al hover ---------- */
/* (el movimiento base ya existe; aquí solo suaviza en focus) */

/* ---------- Respeto a reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__red path,
  .hero__red circle,
  .code-card__body .ln,
  .code-card__cursor,
  .principio::after,
  .badge--preparacion::before {
    animation: none !important;
  }
  .hero__red .red-enlaces path { stroke-dashoffset: 0 !important; }
  .code-card__body .ln { opacity: 1 !important; transform: none !important; }
}