/* ============================================================
   El logo vivo de Make it Easy.
   Compartido por nosotros.html y sistemas.html: una sola fuente,
   para que las dos paginas no se vuelvan a desincronizar.
   El ancho lo pone cada pagina; aca solo vive la animacion.
   ============================================================ */

/* ---------- El logo: primero se arma, después queda vivo ----------
   Etapa 1 (0 – 2,4 s): cada pieza aparece por separado.
   Etapa 2 (desde 2,6 s, en loop): pulsos que bajan por los circuitos hasta
   los puntos, la nube respira y el chip late. Todo en CSS, sin JS.        */
.marca{height:auto;display:block;overflow:visible}

.marca .pieza{
  transform-box:fill-box;transform-origin:center;
  opacity:0;animation-fill-mode:forwards;animation-duration:.62s;
  animation-timing-function:var(--curva);
  animation-delay:calc(var(--t) * .105s + .25s);
}
.animar .lobulo{animation-name:tie-brotar}
.animar .brillo{animation-name:tie-asomar;animation-duration:1.1s}
.animar .chip,.animar .borde{animation-name:tie-caer;transform-origin:50% 0}
.animar .letra{animation-name:tie-sellar}
.animar .punto{animation-name:tie-brotar;animation-duration:.5s}
/* opacity:0 hasta que arranca: con stroke-linecap:round, un trazo de largo cero
   igual dibuja la tapa redonda y se veian tres puntitos desde el principio. */
.animar .pata{
  opacity:0;stroke-dasharray:100;stroke-dashoffset:100;
  animation-name:tie-trazar;animation-duration:.55s;animation-timing-function:ease-out;
}
@keyframes tie-brotar{from{opacity:0;transform:scale(.3)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes tie-asomar{to{opacity:1}}
@keyframes tie-caer{from{opacity:0;transform:translateY(-14%) scale(.94)}to{opacity:1;transform:none}}
@keyframes tie-sellar{from{opacity:0;transform:translateY(16%) scale(.82)}to{opacity:1;transform:none}}
@keyframes tie-trazar{from{opacity:1;stroke-dashoffset:100}to{opacity:1;stroke-dashoffset:0}}

/* --- etapa 2: la corriente --- */
.marca .pulso{opacity:0;stroke-dasharray:11 89}
.animar .pulso{
  animation:tie-correr 2.9s linear infinite;
  animation-delay:calc(2.6s + var(--p) * .22s);
}
@keyframes tie-correr{
  0%{opacity:0;stroke-dashoffset:100}
  8%{opacity:.95}
  38%{opacity:.95;stroke-dashoffset:0}
  46%{opacity:0;stroke-dashoffset:0}
  100%{opacity:0;stroke-dashoffset:0}
}

/* el punto se enciende justo cuando le llega el pulso */
.marca .halo{opacity:0;transform-box:fill-box;transform-origin:center;stroke-width:1.6}
.animar .halo{
  animation:tie-llega-pulso 2.9s ease-out infinite;
  animation-delay:calc(3.65s + var(--p) * .22s);
}
@keyframes tie-llega-pulso{
  0%{opacity:.85;transform:scale(1);stroke-width:1.8}
  34%{opacity:0;transform:scale(2.6);stroke-width:.4}
  100%{opacity:0;transform:scale(2.6)}
}

/* la nube respira y el chip late, muy de a poco */
.animar .respira{animation:tie-asomar 1.1s var(--curva) calc(9 * .105s + .25s) forwards,
                           tie-respirar 7s ease-in-out 3s infinite}
@keyframes tie-respirar{0%,100%{opacity:1}50%{opacity:.58}}
.animar .late{animation:tie-caer .62s var(--curva) calc(7 * .105s + .25s) forwards,
                        tie-latir 3.4s ease-in-out 3.2s infinite}
@keyframes tie-latir{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.95}}

/* Sin animación: el logo se ve entero y quieto. */
@media (prefers-reduced-motion:reduce){
  .marca .pieza{opacity:1;animation:none!important}
  .marca .pata{stroke-dashoffset:0}
  .marca .pulso,.marca .halo{display:none}
}