.logo-icon {
  overflow: visible;
}
.logo-icon.size-xs { width: 20px; height: auto; }
.logo-icon.size-sm { width: 32px; height: auto; }
.logo-icon.size-md { width: 52px; height: auto; }
.logo-icon.size-lg { width: 96px; height: auto; }
.logo-icon.size-xl { width: 160px; height: auto; }

.logo-icon .logo-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.logo-icon .logo-node {
  opacity: 1;
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .logo-icon.logo-animate .logo-line {
    stroke-dashoffset: 1;
    animation: logoLineIn .4s ease forwards;
  }
  .logo-icon.logo-animate .logo-node {
    opacity: 0;
    transform: scale(0);
    animation: logoNodeIn .42s cubic-bezier(.34,1.56,.64,1) forwards;
  }

  .logo-icon.logo-animate .ln0  { animation-delay: .35s; }
  .logo-icon.logo-animate .ln1  { animation-delay: .47s; }
  .logo-icon.logo-animate .ln2  { animation-delay: .59s; }
  .logo-icon.logo-animate .ln3  { animation-delay: .71s; }
  .logo-icon.logo-animate .ln4  { animation-delay: .83s; }
  .logo-icon.logo-animate .ln5  { animation-delay: .95s; }
  .logo-icon.logo-animate .ln6  { animation-delay: 1.10s; }
  .logo-icon.logo-animate .ln7  { animation-delay: 1.22s; }
  .logo-icon.logo-animate .ln8  { animation-delay: 1.30s; }
  .logo-icon.logo-animate .ln9  { animation-delay: 1.30s; }
  .logo-icon.logo-animate .ln10 { animation-delay: 1.42s; }
  .logo-icon.logo-animate .ln11 { animation-delay: 1.18s; }

  .logo-icon.logo-animate .nd0 { animation-delay: 0s; }
  .logo-icon.logo-animate .nd1 { animation-delay: .62s; }
  .logo-icon.logo-animate .nd2 { animation-delay: .74s; }
  .logo-icon.logo-animate .nd3 { animation-delay: .86s; }
  .logo-icon.logo-animate .nd4 { animation-delay: .98s; }
  .logo-icon.logo-animate .nd5 { animation-delay: 1.10s; }
  .logo-icon.logo-animate .nd6 { animation-delay: 1.22s; }
  .logo-icon.logo-animate .nd7 { animation-delay: 1.37s; }
  .logo-icon.logo-animate .nd8 { animation-delay: 1.69s; }
}

@keyframes logoLineIn { to { stroke-dashoffset: 0; } }
@keyframes logoNodeIn { to { opacity: 1; transform: scale(1); } }