.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; }
} @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; }
} .ngc-footer .ngc-footer__logo {
display: block;
width: 170px;
max-width: 100%;
line-height: 0;
}