@property --bg-capture-g1-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 20%;}
@property --bg-capture-g1-1-y-position { syntax: "<percentage>";  inherits: false; initial-value: 80%;}
@property --bg-capture-g1-2-x-position { syntax: "<percentage>";  inherits: false;  initial-value: 80%;  }
@property --bg-capture-g1-2-y-position { syntax: "<percentage>";  inherits: false;  initial-value: 20%;  }

.bg-capture {
    background: radial-gradient(
                    100% 100% at var(--bg-capture-g1-1-x-position) var(--bg-capture-g1-1-y-position),
                    #3cc2dd 0%,
                    transparent
    ),
    radial-gradient(
                    100% 100% at var(--bg-capture-g1-2-x-position) var(--bg-capture-g1-2-y-position),
                    #93f179 0%,
                    transparent
    ),
    #33405b;
    animation: bg-capture-g1 3s infinite ease-in;

    /* Scoped keyframes */
    @keyframes bg-capture-g1 {
        0% {
            --bg-capture-g1-1-x-position: 20%;
            --bg-capture-g1-1-y-position: 80%;
            --bg-capture-g1-2-x-position: 80%;
            --bg-capture-g1-2-y-position: 20%;
        }
        25% {
            --bg-capture-g1-1-x-position: 15%;
            --bg-capture-g1-1-y-position: 15%;
            --bg-capture-g1-2-x-position: 85%;
            --bg-capture-g1-2-y-position: 80%;
        }
        50% {
            --bg-capture-g1-1-x-position: 80%;
            --bg-capture-g1-1-y-position: 15%;
            --bg-capture-g1-2-x-position: 15%;
            --bg-capture-g1-2-y-position: 85%;
        }
        100% {
            --bg-capture-g1-1-x-position: 20%;
            --bg-capture-g1-1-y-position: 80%;
            --bg-capture-g1-2-x-position: 80%;
            --bg-capture-g1-2-y-position: 20%;
        }
    }
}

///////////////////

.bg-scan {
    background: radial-gradient( 100% 100% at var(--g5-1-x-position) var(--g5-1-y-position), #e85a3e -52%, transparent ), radial-gradient( 100% 100% at var(--g5-2-x-position) var(--g5-2-y-position), var(--color-accent-lightgreen) 0%, transparent ), radial-gradient( 100% 100% at var(--g5-3-x-position) var(--g5-3-y-position), var(--color-accent-lightgreen) 0%, transparent ), #ffffff;
    //background: radial-gradient( 100% 100% at var(--g5-1-x-position) var(--g5-1-y-position), #7ea54a -52%, transparent ), radial-gradient( 100% 100% at var(--g5-2-x-position) var(--g5-2-y-position), #8bc249 0%, transparent ), radial-gradient( 100% 100% at var(--g5-3-x-position) var(--g5-3-y-position), #e85a3e 0%, transparent ), #ffffff;
    animation-name: g-5;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    transition-timing-function: ease-in
}

@property --g5-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 1.0937500000000024%; }
@property --g5-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --g5-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 15.312500000000002%; }
@property --g5-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 85.46875%; }
@property --g5-3-x-position { syntax: "<percentage>"; inherits: false; initial-value: 97.1875%; }
@property --g5-3-y-position { syntax: "<percentage>"; inherits: false; initial-value: 48.515625%; }

:root {
    --g5-1-x-position: 1.0937500000000024%;
    --g5-1-y-position: 0%;
    --g5-2-x-position: 15.312500000000002%;
    --g5-2-y-position: 85.46875%;
    --g5-3-x-position: 97.1875%;
    --g5-3-y-position: 48.515625%;
}

@keyframes g-5 { 50% { --g5-1-x-position: 99.0234375%; --g5-1-y-position: 99.0234375%; --g5-2-x-position: 84.1796875%; --g5-2-y-position: 13.671875%; --g5-3-x-position: 2.8906249999999996%; --g5-3-y-position: 46.1328125%; } }

///////////////////

.bg-loading {
    background: radial-gradient(100% 100% at 4% 3%, #4a4a4a 0%, transparent), radial-gradient( 100% 100% at var(--g2-1-x-position) var(--g2-1-y-position), #2e2e2e -32%, transparent ), radial-gradient( 100% 100% at var(--g2-2-x-position) var(--g2-2-y-position), #4a4a4a 0%, transparent ), #ffffff;
    animation-name: g-2;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    transition-timing-function: ease-in-out
}

@property --g2-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 87.96875%; }
@property --g2-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 91.1328125%; }
@property --g2-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 13.398437500000002%; }
@property --g2-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 82.734375%; }

:root {
    --g2-1-x-position: 87.96875%;
    --g2-1-y-position: 91.1328125%;
    --g2-2-x-position: 13.398437500000002%;
    --g2-2-y-position: 82.734375%;
}

@keyframes g-2 { 50% { --g2-1-x-position: 15%; --g2-1-y-position: 15%; --g2-2-x-position: 61.21093749999999%; --g2-2-y-position: 13.750000000000002%; } }

