.gp-logo{
    --navy: #16384f;
    
    --navy-2: #1f4d6b;
    --orange: #f26a21;
    
    --orange-2: #ff8a3d;
    --neon: #39ff8c;
    
    --bg: #0c1820;
}
.gp-logo{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}
.gp-logo svg{
    display: block;
    overflow: visible
}
.gp-logo .arc{
    fill: none;
    stroke: var(--navy);
    stroke-linecap: round;
    transform-origin: 38px 92px;
    animation: gpl-emit 2.6s ease-out infinite;
}
.gp-logo .arc.a2{
    animation-delay: .45s
}
.gp-logo .arc.a3{
    animation-delay: .9s
}
@keyframes gpl-emit { 0% { opacity: 0; stroke-width: 11 } 18% { opacity: 1 } 100% { opacity: 0; stroke-width: 4 } }
.gp-logo .cjk{
    opacity: 0;
    animation: gpl-dropIn .7s cubic-bezier(.2, .8, .2, 1) forwards
}
.gp-logo .cjk.c1{
    animation-delay: .15s
}
.gp-logo .cjk.c2{
    animation-delay: .27s
}
.gp-logo .cjk.c3{
    animation-delay: .39s
}
.gp-logo .cjk.c4{
    animation-delay: .51s
}
.gp-logo .tag{
    opacity: 0;
    animation: gpl-dropIn .6s ease forwards;
    animation-delay: .8s
}
@keyframes gpl-dropIn { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: translateY(0) } }
.gp-logo .ltr{
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: gpl-rise .55s cubic-bezier(.2, .9, .3, 1.2) forwards
}
.gp-logo .l1{
    animation-delay: .55s
}
.gp-logo .l2{
    animation-delay: .62s
}
.gp-logo .l3{
    animation-delay: .69s
}
.gp-logo .l4{
    animation-delay: .76s
}
.gp-logo .l5{
    animation-delay: .83s
}
.gp-logo .l6{
    animation-delay: .90s
}
.gp-logo .l7{
    animation-delay: .97s
}
.gp-logo .l8{
    animation-delay: 1.04s
}
@keyframes gpl-rise { 0% { opacity: 0; transform: translateY(16px) scaleY(.6) } 100% { opacity: 1; transform: translateY(0) scaleY(1) } }
.gp-logo .scan{
    fill: url(#scanGrad);
    opacity: .0;
    animation: gpl-scan 3.8s linear infinite;
    animation-delay: 1.3s;
    mix-blend-mode: screen;
}
@keyframes gpl-scan { 0% { transform: translateX(-40px); opacity: 0 } 8% { opacity: .85 } 45% { opacity: .85 } 55% { opacity: 0 } 100% { transform: translateX(360px); opacity: 0 } }
.gp-logo .flow{
    fill: var(--orange-2)
}
.gp-logo .f1{
    animation: gpl-flow 3.2s linear infinite
}
.gp-logo .f2{
    animation: gpl-flow 3.2s linear infinite;
    animation-delay: 1.06s
}
.gp-logo .f3{
    animation: gpl-flow 3.2s linear infinite;
    animation-delay: 2.13s
}
@keyframes gpl-flow { 0% { opacity: 0; transform: translateX(0) } 10% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0; transform: translateX(300px) } }
.gp-logo .label{
    z-index: 1;
    color: #8fb4c9;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: gpl-dropIn .8s ease forwards;
    animation-delay: 1.6s
}
.gp-logo .svc{
    opacity: 0;
    animation: gpl-dropIn .8s ease forwards;
    animation-delay: 1.6s
}
.gp-logo .eng{
    opacity: 0;
    animation: gpl-dropIn .8s ease forwards;
    animation-delay: 1.4s
}
.gp-logo .dot{
    fill: var(--orange);
    opacity: .4
}
.gp-logo .circuit{
    stroke: var(--navy-2);
    stroke-width: .8;
    fill: none;
    opacity: .18
}
.gp-logo .drift1{
    animation: gpl-drift1 7s ease-in-out infinite, gpl-twinkle 3s ease-in-out infinite
}
.gp-logo .drift2{
    animation: gpl-drift2 9s ease-in-out infinite, gpl-twinkle 3.6s ease-in-out infinite
}
.gp-logo .drift3{
    animation: gpl-drift3 6.4s ease-in-out infinite, gpl-twinkle 2.7s ease-in-out infinite
}
.gp-logo .drift4{
    animation: gpl-drift4 8.2s ease-in-out infinite, gpl-twinkle 4.1s ease-in-out infinite
}
.gp-logo .drift5{
    animation: gpl-drift5 7.6s ease-in-out infinite, gpl-twinkle 3.3s ease-in-out infinite
}
.gp-logo .drift6{
    animation: gpl-drift6 9.4s ease-in-out infinite, gpl-twinkle 3.9s ease-in-out infinite
}
@keyframes gpl-twinkle { 0%, 100% { opacity: .18 } 50% { opacity: .7 } }
@keyframes gpl-drift1 { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(6px, -5px) } 50% { transform: translate(-4px, 4px) } 75% { transform: translate(3px, 6px) } }
@keyframes gpl-drift2 { 0%, 100% { transform: translate(0, 0) } 20% { transform: translate(-5px, 4px) } 45% { transform: translate(5px, 5px) } 70% { transform: translate(4px, -6px) } }
@keyframes gpl-drift3 { 0%, 100% { transform: translate(0, 0) } 30% { transform: translate(5px, 5px) } 55% { transform: translate(-6px, -3px) } 80% { transform: translate(-3px, 5px) } }
@keyframes gpl-drift4 { 0%, 100% { transform: translate(0, 0) } 22% { transform: translate(-6px, -5px) } 48% { transform: translate(4px, -4px) } 74% { transform: translate(5px, 4px) } }
@keyframes gpl-drift5 { 0%, 100% { transform: translate(0, 0) } 28% { transform: translate(4px, 6px) } 52% { transform: translate(-5px, -5px) } 78% { transform: translate(6px, -3px) } }
@keyframes gpl-drift6 { 0%, 100% { transform: translate(0, 0) } 24% { transform: translate(-4px, 5px) } 50% { transform: translate(6px, 3px) } 76% { transform: translate(-5px, -6px) } }
.gp-logo .radar-sweep{
    transform-origin: 338px 108px;
    animation: gpl-radar 3.4s linear infinite
}
@keyframes gpl-radar { from { transform: rotate(0) } to { transform: rotate(360deg) } }
.gp-logo .radar-ping{
    transform-origin: 338px 108px;
    animation: gpl-ping 2.4s ease-out infinite
}
@keyframes gpl-ping { 0% { transform: scale(.3); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }
.gp-logo .data{
    fill: var(--orange);
}
.gp-logo .d1{
    animation: gpl-dataflow1 3.4s ease-in-out infinite
}
.gp-logo .d2{
    animation: gpl-dataflow2 3.4s ease-in-out infinite;
    animation-delay: 1.13s
}
.gp-logo .d3{
    animation: gpl-dataflow3 3.4s ease-in-out infinite;
    animation-delay: 2.26s
}
@keyframes gpl-dataflow1 { 0% { opacity: 0; transform: translate(0, 0) } 12% { opacity: 1 } 30% { transform: translate(16px, -7px) } 55% { transform: translate(30px, 5px) } 78% { transform: translate(46px, -4px) } 88% { opacity: 1 } 100% { opacity: 0; transform: translate(58px, 3px) } }
@keyframes gpl-dataflow2 { 0% { opacity: 0; transform: translate(0, 0) } 12% { opacity: 1 } 28% { transform: translate(15px, 6px) } 52% { transform: translate(29px, -6px) } 76% { transform: translate(45px, 5px) } 88% { opacity: 1 } 100% { opacity: 0; transform: translate(58px, -3px) } }
@keyframes gpl-dataflow3 { 0% { opacity: 0; transform: translate(0, 0) } 12% { opacity: 1 } 32% { transform: translate(17px, -5px) } 58% { transform: translate(31px, 7px) } 80% { transform: translate(46px, -6px) } 88% { opacity: 1 } 100% { opacity: 0; transform: translate(58px, 2px) } }
.gp-logo .cam-aim{
    animation: gpl-camtilt 4.5s ease-in-out infinite
}
@keyframes gpl-camtilt { 0%, 100% { transform: translate(358.5px, 46px) rotate(-12deg) } 50% { transform: translate(358.5px, 46px) rotate(12deg) } }
.gp-logo .cam-beam2{
    animation: gpl-beampulse 2.6s ease-in-out infinite
}
@keyframes gpl-beampulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.gp-logo .cam-rec{
    animation: gpl-recblink 1.4s steps(1) infinite
}
@keyframes gpl-recblink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .15 } }
.gp-logo .aq{
    fill: var(--neon)
}
.gp-logo .aq1{
    animation: gpl-aqrise 2.6s ease-in infinite
}
.gp-logo .aq2{
    animation: gpl-aqrise 2.6s ease-in infinite;
    animation-delay: .65s
}
.gp-logo .aq3{
    animation: gpl-aqrise 2.6s ease-in infinite;
    animation-delay: 1.3s
}
.gp-logo .aq4{
    animation: gpl-aqrise 2.6s ease-in infinite;
    animation-delay: 1.95s
}
@keyframes gpl-aqrise { 0% { opacity: 0; transform: translate(0, 0) scale(.6) } 20% { opacity: .8 } 100% { opacity: 0; transform: translate(2px, -16px) scale(1.1) } }