.hero-title--animated {
    padding: 0.4em 0.8em;
    margin: -0.4em -0.8em;
    will-change: filter, transform;
    animation:
        glitch 3s infinite steps(1, end),
        title-animation 2s infinite ease-in-out;
}

.typing-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    text-align: center;
    word-wrap: break-word;
    display: inline-block;
    padding: 0 20px;
}

.typing-cursor::after {
    content: '|';
    color: var(--neon);
    animation: blink .8s step-end infinite;
}

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    color: var(--neon);
    font-size: 0.7rem;
    opacity: 0.8;
    letter-spacing: 2px;
}

.version-magic {
    cursor: pointer;
    font-weight: bold;
    color: inherit;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.version-magic:hover {
    color: var(--neon);
    text-shadow: 0 0 10px var(--dim), 0 0 20px var(--glow);
    transform: rotate(-7.5deg);
}

.footer-status {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#version-msg {
    display: none;
    font-size: 0.65rem;
    color: var(--neon);
    margin-top: 5px;
    font-style: italic;
    animation: fadeIn 0.3s ease;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink {

    from,
    to {
        opacity: 3;
    }

    50% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes title-animation {

    0%,
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--neon)) brightness(1);
    }

    40% {
        opacity: 0.85;
        filter: drop-shadow(0 0 12px var(--neon)) brightness(1.4);
    }

    43% {
        opacity: 0.4;
        filter: drop-shadow(0 0 2px var(--neon)) brightness(0.6);
    }

    46% {
        opacity: 0.95;
        filter: drop-shadow(0 0 6px var(--neon)) brightness(1.1);
    }
}

@keyframes glitch {

    0%,
    2%,
    8%,
    11%,
    15%,
    22%,
    25%,
    32%,
    38%,
    40%,
    48%,
    55%,
    62%,
    70%,
    85%,
    92%,
    95%,
    100% {
        transform: none;
        text-shadow: none;
        clip-path: inset(0 0 0 0);
    }

    3%,
    5% {
        transform: skewX(-45deg) translateX(-20px);
        text-shadow: 10px 3px #ff00c1, -10px -3px #00ffff, 15px 0 var(--neon);
        clip-path: inset(10% 0 60% 0);
    }

    6%,
    7% {
        transform: skewX(35deg) translateX(25px);
        text-shadow: -15px 0 #ff00c1, 15px 0 var(--neon);
        clip-path: inset(75% 0 5% 0);
    }

    10% {
        transform: skewX(-35deg) translateX(-15px);
        text-shadow: 8px 2px #ff00c1, -8px -2px #00ffff, 15px 0 var(--neon);
        clip-path: inset(15% 0 50% 0);
    }

    12%,
    13% {
        transform: translate(10px, -10px) skewX(-25deg);
        text-shadow: -10px -4px #00ffff, 10px 4px var(--neon);
        clip-path: inset(50% 0 20% 0);
    }

    14% {
        transform: skewX(15deg) translateX(8px);
        text-shadow: -6px 0 #ff00c1, 6px 0 var(--neon);
        clip-path: inset(2% 0 88% 0);
    }

    18% {
        transform: translate(3px, -2px) skewY(2deg);
        text-shadow: 3px 1px var(--white);
    }

    19% {
        transform: translate(-3px, 3px) skewX(-4deg);
        text-shadow: -3px -1px #ff00c1;
    }

    20% {
        transform: translate(1px, -3px) skewY(-2deg);
        text-shadow: 2px -2px #00ffff;
    }

    27%,
    29% {
        transform: skewY(20deg) translateY(-12px) translateX(8px);
        text-shadow: -20px 8px #00ffff, 20px -8px #ff00c1;
        clip-path: inset(5% 0 85% 0);
    }

    35%,
    37% {
        transform: skewY(10deg) translateY(-5px);
        text-shadow: -12px 3px #00ffff, 12px -3px #ff00c1;
        clip-path: inset(50% 0 10% 0);
    }

    42%,
    44% {
        transform: translateX(45px) skewX(-30deg);
        text-shadow: -40px 0 #00ffff, -60px 0 #ff00c1, 35px 0 var(--dim);
        clip-path: inset(35% 0 40% 0);
    }

    47% {
        transform: skewX(-40deg) translateY(4px);
        text-shadow: 10px 0 var(--neon), -10px 0 #00ffff;
        clip-path: inset(82% 0 5% 0);
    }

    50% {
        transform: translate(3px, -3px);
        text-shadow: 3px 0 #ff00c1;
        clip-path: inset(10% 0 80% 0);
    }

    51% {
        transform: translate(-3px, 3px);
        text-shadow: -3px 0 #00ffff;
        clip-path: inset(80% 0 10% 0);
    }

    52% {
        transform: translate(4px, 4px);
        text-shadow: 0 3px var(--neon);
        clip-path: inset(40% 0 40% 0);
    }

    53% {
        transform: translate(-4px, -4px);
        text-shadow: 0 -3px var(--white);
        clip-path: inset(20% 0 60% 0);
    }

    60% {
        transform: translateX(20px) skewX(-15deg);
        text-shadow: -25px 0 #00ffff, -45px 0 #ff00c1, 20px 0 var(--dim);
        clip-path: inset(8% 0 62% 0);
    }

    68%,
    71% {
        transform: translate(-2px, 2px) skewX(8deg);
        text-shadow: 4px -4px #ff00c1, -4px 4px var(--neon);
        clip-path: inset(30% 0 40% 0);
    }

    72%,
    75% {
        transform: translate(-5px, 5px) skewX(12deg);
        text-shadow: 8px -8px #ff00c1, -8px 8px var(--neon);
        clip-path: inset(30% 0 30% 0);
    }

    88%,
    91% {
        transform: skewX(35deg) translateY(-5px);
        text-shadow: -15px 0 var(--neon), 15px 0 #ff00c1, 0 8px var(--white);
        clip-path: inset(15% 0 55% 0);
    }
}