/* hero-animation.css — network visualization del hero */

/* ====================================================
   Canvas wrapper
   ==================================================== */
.im-hcanvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
  overflow: visible;
}

/* Modo fondo (bold variant) */
.im-hcanvas--bg {
  position: absolute !important;
  inset: 0;
  min-height: 0;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
}

/* ====================================================
   Glow ambiental
   ==================================================== */
.im-hcanvas-glow {
  position: absolute;
  inset: -30% -20%;
  background:
    radial-gradient(ellipse 62% 56% at 50% 52%, rgba(0,91,194,.30) 0%, transparent 65%),
    radial-gradient(ellipse 38% 30% at 82% 28%, rgba(122,169,224,.14) 0%, transparent 55%),
    radial-gradient(ellipse 25% 22% at 18% 75%, rgba(0,73,160,.10) 0%, transparent 55%);
  pointer-events: none;
  animation: im-glow-breathe 8s ease-in-out infinite;
}
@keyframes im-glow-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.05); }
}

/* ====================================================
   Grid técnico de fondo
   ==================================================== */
.im-hcanvas-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,169,224,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,169,224,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* ====================================================
   SVG de la red
   ==================================================== */
.im-hcanvas-svg-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.im-hsvg {
  width: 100%;
  height: 100%;
}

/* -- Cables (hilos estáticos) -- */
.im-hpath-wire {
  fill: none;
  stroke: rgba(122,169,224,.15);
  stroke-width: 1;
}

/* -- Pulsos de datos -- */
.im-hpath-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 14 460;
}

/* Variante brillante (conexión activa) */
.im-hpath-pulse--hot {
  stroke: rgba(122,169,224,.85);
  stroke-width: 1.5;
}
/* Variante suave (flujo pasivo) */
.im-hpath-pulse--cool {
  stroke: rgba(0,91,194,.70);
  stroke-width: 1;
}

.im-hpp-1 { animation: im-pulse 5.0s linear infinite  0.0s; }
.im-hpp-2 { animation: im-pulse 5.6s linear infinite  1.3s; }
.im-hpp-3 { animation: im-pulse 4.1s linear infinite  0.7s; }
.im-hpp-4 { animation: im-pulse 5.3s linear infinite  2.1s; }
.im-hpp-5 { animation: im-pulse 4.6s linear infinite  1.6s; }
.im-hpp-6 { animation: im-pulse 6.0s linear infinite  0.4s; }

@keyframes im-pulse {
  from { stroke-dashoffset: 474; }
  to   { stroke-dashoffset: 0; }
}

/* ====================================================
   Nodos
   ==================================================== */

/* Nodos secundarios (periféricos) */
.im-hnode-sm {
  fill: rgba(122,169,224,.48);
}
.im-hnsm-1 { animation: im-nsm 3.8s ease-in-out infinite 0.0s; }
.im-hnsm-2 { animation: im-nsm 4.2s ease-in-out infinite 0.7s; }
.im-hnsm-3 { animation: im-nsm 3.5s ease-in-out infinite 1.4s; }
.im-hnsm-4 { animation: im-nsm 4.6s ease-in-out infinite 0.3s; }
.im-hnsm-5 { animation: im-nsm 3.9s ease-in-out infinite 1.1s; }
.im-hnsm-6 { animation: im-nsm 4.4s ease-in-out infinite 1.8s; }
.im-hnsm-7 { animation: im-nsm 5.0s ease-in-out infinite 0.9s; }

@keyframes im-nsm {
  0%, 100% { fill-opacity: 0.45; }
  50%       { fill-opacity: 1.00; }
}

/* Nodo central */
.im-hnode-center {
  fill: #7aa9e0;
  transform-box: fill-box;
  transform-origin: center;
  animation: im-center-pulse 2.8s ease-in-out infinite;
}
@keyframes im-center-pulse {
  0%, 100% { transform: scale(1);   fill: #7aa9e0; }
  50%       { transform: scale(1.5); fill: #a8ccf0; }
}

/* Anillos que irradian del nodo central */
.im-hnode-ring {
  fill: none;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.im-hnr-1 {
  stroke: rgba(0,91,194,.55);
  animation: im-ring 3.4s ease-out infinite 0.0s;
}
.im-hnr-2 {
  stroke: rgba(0,91,194,.38);
  animation: im-ring 3.4s ease-out infinite 1.1s;
}
.im-hnr-3 {
  stroke: rgba(122,169,224,.22);
  animation: im-ring 3.4s ease-out infinite 2.2s;
}
@keyframes im-ring {
  0%   { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(3.0); opacity: 0; }
}

/* Nodo mediano (hub secundario) */
.im-hnode-md {
  fill: rgba(0,91,194,.60);
  transform-box: fill-box;
  transform-origin: center;
  animation: im-md-pulse 3.5s ease-in-out infinite;
}
@keyframes im-md-pulse {
  0%, 100% { transform: scale(1);   fill-opacity: 0.6; }
  50%       { transform: scale(1.4); fill-opacity: 1.0; }
}

/* ====================================================
   Cards flotantes
   ==================================================== */
.im-hcanvas-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.im-hcard {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: rgba(255,255,255,.058);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 4px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  white-space: nowrap;
}

.im-hcard-f0 { animation: im-hcf0 5.4s ease-in-out infinite; }
.im-hcard-f1 { animation: im-hcf1 6.2s ease-in-out infinite; }
.im-hcard-f2 { animation: im-hcf2 4.9s ease-in-out infinite; }

@keyframes im-hcf0 { 0%,100% { transform: translateY(0px);  } 50% { transform: translateY(-7px);  } }
@keyframes im-hcf1 { 0%,100% { transform: translateY(0px);  } 50% { transform: translateY(-5px);  } }
@keyframes im-hcf2 { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(-10px); } }

.im-hcard-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .015em;
  color: rgba(255,255,255,.80);
}

/* Dot de estado */
.im-hcard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.im-hcard-dot--green {
  background: #4ade80;
  box-shadow: 0 0 7px rgba(74,222,128,.75);
  animation: im-dotg 2.2s ease-in-out infinite;
}
.im-hcard-dot--blue {
  background: #60a5fa;
  box-shadow: 0 0 7px rgba(96,165,250,.65);
  animation: im-dotb 2.8s ease-in-out infinite;
}
.im-hcard-dot--processing {
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1.5px solid #f59e0b;
  border-top-color: transparent;
  box-shadow: 0 0 6px rgba(245,158,11,.55);
  animation: im-dot-spin 1s linear infinite;
}
@keyframes im-dotg     { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes im-dotb     { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes im-dot-spin { to { transform: rotate(360deg); } }

/* ====================================================
   Sober: right panel reset
   ==================================================== */
.im-hero-sober-right--canvas {
  position: relative;
  /* la altura la marca el lado izquierdo via align-items:center del grid */
  min-height: 460px;
}

/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 900px) {
  .im-hcanvas        { min-height: 320px; }
  .im-hcard          { padding: 8px 11px; }
  .im-hcard-label    { font-size: 11px; }
}
@media (max-width: 640px) {
  .im-hcanvas        { min-height: 240px; }
  .im-hcard          { display: none; } /* en móvil las cards se quitan para no saturar */
}