.upper-container {
    position: fixed;
    filter: invert(100%);
    mix-blend-mode: difference;
    width: 100%;
    height: 100%;
}
.logo-container {
    z-index: 2;
    bottom: 0%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    /* The container itself is transparent */
}
.logo-image {
    
    display: block;
    width: 95vw;
    height: auto;
    /* -- THE MAGIC IS HERE -- */

    /* 1. Define the mask as a radial gradient.
               White areas are visible; black areas are transparent.
               This creates a 60px visible circle (40px opaque center, 10px feather). */
    -webkit-mask-image: radial-gradient(circle at center, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 50%);
    mask-image: radial-gradient(circle at center,
            rgba(255, 255, 255, 1) 5%,
            rgba(255, 255, 255, 0.90) 25%,
            rgba(255, 255, 255, 0.1) 58%,
            rgba(255, 255, 255, 0) 65%);

    /* 2. Set the mask size to be small (60x60). 
               Make sure it does not repeat. */
    -webkit-mask-size: 35% 140%;
    mask-size: 35% 140%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 3. The animation moves the mask position */
    animation: animateMask 28s infinite ease-in-out;
}
.logo-image-t {
    
    display: block;
    width: 95vw;
    height: auto;
    /* -- THE MAGIC IS HERE -- */

    /* 1. Define the mask as a radial gradient.
               White areas are visible; black areas are transparent.
               This creates a 60px visible circle (40px opaque center, 10px feather). */
    -webkit-mask-image: radial-gradient(circle at center, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 50%);
    mask-image: radial-gradient(circle at center,
            rgba(255, 255, 255, 1) 5%,
            rgba(255, 255, 255, 0.90) 25%,
            rgba(255, 255, 255, 0.1) 58%,
            rgba(255, 255, 255, 0) 65%);

    /* 2. Set the mask size to be small (60x60). 
               Make sure it does not repeat. */
    -webkit-mask-size: 35% 140%;
    mask-size: 35% 140%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 3. The animation moves the mask position */
    animation: animateMaskT 28s infinite ease-in-out;
}

/* The Animation Keyframes follow the multi-step route from before, but controlling mask-position 
    PRIMER PARAMETRO HORIZONTAL
    SEGUNDO PARAMETRO VERTICAL

    REPLICAR:
    -webkit-mask-position:: 105% 160%;
    -webkit-mask-position: 105% 160%;
    -webkit-mask-position: 105% 110%;
    mask-position: 105% 110%;
*/
@keyframes animateMask {

    0% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }

    /* 1 */
    3%,
    7% {
        -webkit-mask-position: 50% -120%;
        mask-position: 50% -120%;
    }

    /* 2 */
    10%,
    14% {
        -webkit-mask-position: 125% 180%;
        mask-position: 125% 180%;
    }

    /* 3 */
    17%,
    21% {
        -webkit-mask-position: -10% 100%;
        mask-position: -10% 100%;
    }

    /* 4 */
    24%,
    28% {
        -webkit-mask-position: 110% -120%;
        mask-position: 110% -120%;
    }

    /* 5 */
    31%,
    35% {
        -webkit-mask-position: 10% 100%;
        mask-position: 10% 100%;
    }

    /* 6 */
    38%,
    42% {
        -webkit-mask-position: 105% 150%;
        mask-position: 105% 150%;
    }

    /* 7 */
    45%,
    49% {
        -webkit-mask-position: 0% 200%;
        mask-position: 0% 200%;
    }

    /* 8 */
    52%,
    56% {
        -webkit-mask-position: 100% -110%;
        mask-position: 100% -110%;
    }

    /* 9 */
    59%,
    63% {
        -webkit-mask-position: 125% 180%;
        mask-position: 125% 180%;
    }

    /* 10 */
    66%,
    70% {
        -webkit-mask-position: 20% -150%;
        mask-position: 20% -150%;
    }

    /* 11 */
    73%,
    77% {
        -webkit-mask-position: 90% -100%;
        mask-position: 90% -100%;
    }

    /* 12 */
    80%,
    84% {
        -webkit-mask-position: -10% 100%;
        mask-position: -10% 100%;
    }

    /* 13 */
    87%,
    91% {
        -webkit-mask-position: 125% 180%;
        mask-position: 125% 180%;
    }

    /* 14 */
    94%,
    97% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}
@keyframes animateMaskT  {

    0% {
        -webkit-mask-position: 120% 100%;
        mask-position: 120% 100%;
    }

    /* 1 */
    3%,
    7% {
        -webkit-mask-position: 30% 0%;
        mask-position: 30% 0%;
        
    }

    /* 2 */
    10%,
    14% {
        -webkit-mask-position: 80% 0%;
        mask-position: 80% 0%;
        
    }

    /* 3 */
    17%,
    21% {
        -webkit-mask-position: 120% 190%;
        mask-position: 120% 190%;
    }

    /* 4 */
    24%,
    28% {
        -webkit-mask-position: 50% 120%;
        mask-position: 50% 120%;
    }

    /* 5 */
    31%,
    35% {
        -webkit-mask-position: 105% 100%;
        mask-position: 105% 100%;
    }

    /* 6 */
    38%,
    42% {
        -webkit-mask-position: 25% -30%;
        mask-position: 25% -30%;
    }

    /* 7 */
    45%,
    49% {
        -webkit-mask-position: 95% 130%;
        mask-position: 95% 130%;
    }

    /* 8 */
    52%,
    56% {
        -webkit-mask-position: 25% 100%;
        mask-position: 25% 100%;
    }

    /* 9 */
    59%,
    63% {
        -webkit-mask-position: 45% 100%;
        mask-position: 45% 100%;
    }

    /* 10 */
    66%,
    70% {
        -webkit-mask-position: 120% 90%;
        mask-position: 120% 90%;
    }

    /* 11 */
    73%,
    77% {
        -webkit-mask-position: 90% -100%;
        mask-position: 90% -100%;
    }

    /* 12 */
    80%,
    84% {
        -webkit-mask-position: -10% 100%;
        mask-position: -10% 100%;
    }

    /* 13 */
    87%,
    91% {
        -webkit-mask-position: 50% 120%;
        mask-position: 50% 120%;
    }

    /* 14 */
    94%,
    97% {
        -webkit-mask-position: 90% 90%;
        mask-position: 90% 90%;
    }
}