/* ================================
   LOGO ANIMATION
   Deferred animation for nav logo SVG
   ================================ */

/* Box slides in from right */
.logo-nav-svg #path4,
.logo-nav-svg #path5 {
  transform: translateX(1500px);
  opacity: 0;
  animation: slideInNav 1.5s ease-out 0.3s forwards;
}

@keyframes slideInNav {
  0%   { transform: translateX(1500px); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Letters start hidden */
.logo-nav-svg #path15,
.logo-nav-svg #path10,
.logo-nav-svg #path6,
.logo-nav-svg #path3,
.logo-nav-svg #path7,
.logo-nav-svg #path11,
.logo-nav-svg #path12,
.logo-nav-svg #path13,
.logo-nav-svg #path8,
.logo-nav-svg #path9,
.logo-nav-svg #path14 {
  opacity: 0;
}

/* Letters fade in right to left as box passes */
.logo-nav-svg #path15 { animation: fadeInLogo 0.15s ease-out 0.4s forwards; }
.logo-nav-svg #path10 { animation: fadeInLogo 0.15s ease-out 0.5s forwards; }
.logo-nav-svg #path6  { animation: fadeInLogo 0.15s ease-out 0.7s forwards; }
.logo-nav-svg #path3  { animation: fadeInLogo 0.15s ease-out 0.85s forwards; }
.logo-nav-svg #path7  { animation: fadeInLogo 0.15s ease-out 0.85s forwards; }
.logo-nav-svg #path11 { animation: fadeInLogo 0.15s ease-out 1.0s forwards; }
.logo-nav-svg #path12 { animation: fadeInLogo 0.15s ease-out 1.2s forwards; }
.logo-nav-svg #path13 { animation: fadeInLogo 0.15s ease-out 1.4s forwards; }
.logo-nav-svg #path8  { animation: fadeInLogo 0.15s ease-out 1.6s forwards; }
.logo-nav-svg #path9  { animation: fadeInLogo 0.15s ease-out 1.75s forwards; }
.logo-nav-svg #path14 { animation: fadeInLogo 0.15s ease-out 1.9s forwards; }

@keyframes fadeInLogo {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}