/* Typing Title */
.typing-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3.5rem;
    color: var(--text);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    border-right: 3px solid #00f5d4;
    animation: typing 3s steps(30, end) forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.glitch::after {
    content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
color: var(--text);
text-shadow:
        3px 0 red,
        -4px 0 cyan,
        0 5px blue;
mix-blend-mode: screen;
pointer-events: none;
animation: glitch-color 2.5s infinite ease-in-out alternate;
}

@keyframes glitch-color {
    0%   { transform: translate(0px, 0px); opacity: 1; }
    20%  { transform: translate(-1px, 1px); }
    40%  { transform: translate(1px, -1px); }
    60%  { transform: translate(0.5px, 1.5px); }
    80%  { transform: translate(-1.5px, -0.5px); }
    100% { transform: translate(0, 0); }
}

@keyframes glitch {
    0% { clip-path: inset(0 0 85% 0); transform: translate(0.5px, -0.5px); }
    20% { clip-path: inset(25% 0 55% 0); transform: translate(-1px, 0.5px); }
    40% { clip-path: inset(45% 0 35% 0); transform: translate(-0.5px, 1px); }
    60% { clip-path: inset(65% 0 20% 0); transform: translate(1px, -1px); }
    80% { clip-path: inset(85% 0 0 0); transform: translate(0.5px, 1px); }
    100% { clip-path: inset(100% 0 0 0); transform: translate(-1px, -1px); }
}

p {
    font-size: 1.2rem;
    font-family: 'Fira Code', monospace;
    color: var(--text);
    margin: 1rem 0 1.75rem 0;
}

.glitch-text {
    animation: glitch 1s infinite;
}