@keyframes loading {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    25% {
        opacity: 1;
        transform: scale(1.0);
    }
    75% {
        opacity: 0.2;
        transform: scale(0.95);
    }
    100% {
        opacity: 0.05;
        transform: scale(0.8);
    }
}

.msg-splashscreen-logo {
    margin: auto;
    width: 40px;
    height: 40px;
    animation: spinner 0.6s linear infinite;
    display: block;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Makes the element hammer twice, then pauses for 75% of the animation time. */
@keyframes hammering {
    0%, 25% {
        transform: rotate(0deg);
        transform-origin: bottom left;
    }
    /* swing back a bit for the first hit */
    3% {
        transform: rotate(-15deg);
        transform-origin: bottom left;
    }
    /* hammer hits twice */
    6%, 12% {
        transform: rotate(45deg);
        transform-origin: bottom left;
    }
    /* release first hit preparing for second hit */
    9% {
        transform: rotate(10deg);
        transform-origin: bottom left;
    }
    /* using keyframes 25% - 100% as pause */
}

/* Pops up the element with a quick grow. */
@keyframes pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.animate-pop {
    animation-name: pop;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.trust-shield {
    position: absolute;
    right: -140px;
    top: -50px;
    transform: rotate(7deg);
    width: 750px;
    opacity: 0.04;
    pointer-events: none;
}