@media (prefers-reduced-motion: no-preference) {
body.home .ngh #experience .nghd-process__windowbar {
position: relative;
isolation: isolate;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__windowbar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #84c041, #b5e66a 72%, #e3f3d5);
transform-origin: left;
animation: ngpt-progress 7.2s linear infinite;
pointer-events: none;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node {
position: relative;
isolation: isolate;
transition: none;
backface-visibility: hidden;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(1) {
animation: ngpt-discover 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(3) {
animation: ngpt-build 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(5) {
animation: ngpt-improve 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(2) {
animation: ngpt-first-arrow 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(4) {
animation: ngpt-second-arrow 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(1) {
animation: ngpt-dot-one 7.2s linear infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(2) {
animation: ngpt-dot-two 7.2s linear infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(3) {
animation: ngpt-dot-three 7.2s linear infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__windowmark {
animation: ngpt-mark 7.2s ease-in-out infinite;
transform-origin: center;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__outcome {
animation: ngpt-outcome 7.2s ease-in-out infinite;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__outcome-icon {
animation: ngpt-check 7.2s ease-in-out infinite;
} @keyframes ngpt-discover {
0%, 4%, 29%, 100% { transform: translateY(0); border-color: #555; box-shadow: none; }
8%, 23% { transform: translateY(-3px); border-color: #b5e66a; box-shadow: 0 0 0 1px #b5e66a66, 0 10px 20px #84c04124; }
}
@keyframes ngpt-build {
0%, 30%, 56%, 100% { transform: translateY(0); box-shadow: none; }
35%, 50% { transform: translateY(-3px); box-shadow: 0 0 0 2px #e3f3d5, 0 0 20px #b5e66a55; }
}
@keyframes ngpt-improve {
0%, 57%, 83%, 100% { transform: translateY(0); border-color: #555; box-shadow: none; }
62%, 77% { transform: translateY(-3px); border-color: #b5e66a; box-shadow: 0 0 0 1px #b5e66a66, 0 10px 20px #84c04124; }
}
@keyframes ngpt-first-arrow {
0%, 20%, 33%, 100% { opacity: .48; transform: translateX(0); color: #a6d66b; }
24%, 28% { opacity: 1; transform: translateX(5px); color: #f7fff0; }
}
@keyframes ngpt-second-arrow {
0%, 49%, 61%, 100% { opacity: .48; transform: translateX(0); color: #a6d66b; }
53%, 57% { opacity: 1; transform: translateX(5px); color: #f7fff0; }
}
@keyframes ngpt-outcome {
0%, 75%, 99%, 100% { border-color: #ffffff2d; background: #ffffff0c; }
82%, 95% { border-color: #84c041a0; background: #84c0411a; }
}
@keyframes ngpt-check {
0%, 76%, 99%, 100% { transform: scale(1); box-shadow: none; }
83% { transform: scale(1.17); box-shadow: 0 0 0 7px #84c04122; }
91% { transform: scale(1); box-shadow: 0 0 0 1px #84c0410a; }
}
@keyframes ngpt-progress {
0% { transform: scaleX(0); opacity: 1; }
94% { transform: scaleX(1); opacity: 1; }
99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes ngpt-dot-one {
0%, 29%, 100% { background: #84c041; }
30%, 98% { background: #c9c9c9; }
}
@keyframes ngpt-dot-two {
0%, 31%, 55%, 100% { background: #c9c9c9; }
35%, 51% { background: #b5e66a; }
}
@keyframes ngpt-dot-three {
0%, 59%, 84%, 100% { background: #c9c9c9; }
64%, 79% { background: #b5e66a; }
}
@keyframes ngpt-mark {
0%, 76%, 95%, 100% { transform: rotate(0deg); opacity: .78; }
84% { transform: rotate(45deg); opacity: 1; }
}
} body.home .ngh #experience .nghd-process__path {
min-width: 0;
}
body.home .ngh #experience .nghd-process__path-arrow {
will-change: transform;
} @media (max-width: 600px) {
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(2) {
animation-name: ngpt-first-arrow-mobile;
}
body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(4) {
animation-name: ngpt-second-arrow-mobile;
}
@keyframes ngpt-first-arrow-mobile {
0%, 20%, 33%, 100% { opacity: .48; transform: rotate(90deg) translateX(0); color: #a6d66b; }
24%, 28% { opacity: 1; transform: rotate(90deg) translateX(4px); color: #f7fff0; }
}
@keyframes ngpt-second-arrow-mobile {
0%, 49%, 61%, 100% { opacity: .48; transform: rotate(90deg) translateX(0); color: #a6d66b; }
53%, 57% { opacity: 1; transform: rotate(90deg) translateX(4px); color: #f7fff0; }
}
}