/* NXT GEN WEB: three original chevrons move forward through the X.
   Original bitmap pixels are reused. The original image paints during each
   rest period and for reduced motion; both logo links retain their own dimensions. */
.ngc-brand__art {
  position: relative;
  display: block;
  width: 100%;
  isolation: isolate;
  --ngc-logo-cycle: 4.6s;
}
.ngc-brand__art > img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}
.ngc-brand__motion {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ngc-logo-motion__arrow {
  transform-box: view-box;
  transform-origin: 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ngc-brand__original {
    animation: ngc-logo-original-frame var(--ngc-logo-cycle) steps(1, end) infinite;
  }
  .ngc-brand__motion {
    display: block;
    animation: ngc-logo-moving-frame var(--ngc-logo-cycle) steps(1, end) infinite;
  }
  .ngc-logo-motion__arrow {
    animation-duration: var(--ngc-logo-cycle);
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
    animation-iteration-count: infinite;
  }
  .ngc-logo-motion__arrow--1 { animation-name: ngc-logo-chevron-first; }
  .ngc-logo-motion__arrow--2 { animation-name: ngc-logo-chevron-second; }
  .ngc-logo-motion__arrow--3 { animation-name: ngc-logo-chevron-third; }
}
/* All chevrons return before the exact original bitmap takes over. */
@keyframes ngc-logo-original-frame {
  0%, 31% { opacity: 0; }
  32%, 100% { opacity: 1; }
}
@keyframes ngc-logo-moving-frame {
  0%, 31% { opacity: 1; }
  32%, 100% { opacity: 0; }
}
@keyframes ngc-logo-chevron-first {
  0%, 3% { transform: translateX(0); }
  9%, 12% { transform: translateX(6px); }
  22%, 100% { transform: translateX(0); }
}
@keyframes ngc-logo-chevron-second {
  0%, 5% { transform: translateX(0); }
  12%, 15% { transform: translateX(9px); }
  25%, 100% { transform: translateX(0); }
}
@keyframes ngc-logo-chevron-third {
  0%, 7% { transform: translateX(0); }
  15%, 18% { transform: translateX(12px); }
  29%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ngc-brand__original { animation: none; opacity: 1; }
  .ngc-brand__motion { display: none; animation: none; }
}


/* Match the existing footer logo's footprint. */
.ngc-footer .ngc-footer__logo {
  display: block;
  width: 170px;
  max-width: 100%;
  line-height: 0;
}