.center-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap {
    text-align: center;
    position: relative;
}

svg {
    width: 220px;
    margin-bottom: 20px;
    filter: url(#glitch);
    animation: calmGlitch 5s infinite ease-in-out;
}

h1 {
    color: #ef4444;
    letter-spacing: 4px;
    margin: 0;
    animation: textFlicker 4s infinite;
}

p {
    color: black;
    margin-top: 6px;
    font-size: 14px;
}

.shield, .lock {
    fill: none;
    stroke: #ef4444;
    stroke-width: 6;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw 1.4s ease forwards;
}

.lock {
    animation: draw 1s ease forwards 1s;
    transform-origin: center;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes calmGlitch {
    0%, 94% {
        transform: translate(0);
    }

    95% {
        transform: translate(-2px, 1px);
    }

    96% {
        transform: translate(2px, -1px);
    }

    97% {
        transform: translate(0);
    }
}

@keyframes textFlicker {
    0%, 92% {
        text-shadow: none;
        opacity: 1;
    }

    93% {
        text-shadow: -1px 0 red, 1px 0 cyan;
        opacity: 0.85;
    }

    94% {
        opacity: 1;
    }
}