.system-item::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-1px;

  width:0;
  height:1px;

  background:linear-gradient(
    90deg,
    #4F7CFF,
    rgba(79,124,255,.2),
    transparent
  );

  transition:
    width .9s cubic-bezier(.22,1,.36,1);
}


.system-item.reveal.visible::after{
  width:70%;
}
	
	.system-item.reveal b::after{
  transform:scale(.35);
  opacity:0;
}


.system-item.reveal.visible b::after{
  animation:
    systemRevealPulse .8s cubic-bezier(.22,1,.36,1) forwards,
    systemDotPulse 4.5s ease-in-out .9s infinite;
}


@keyframes systemRevealPulse{

  0%{
    transform:scale(.35);
    opacity:0;
  }

  45%{
    transform:scale(1.7);

    opacity:1;

    box-shadow:
      0 0 0 12px rgba(79,124,255,.08),
      0 0 32px rgba(79,124,255,.65);
  }

  100%{
    transform:scale(1);
    opacity:.35;
  }

}