/* Glitch animation for name */
.name.glitch {
    position: relative;
    color: var(--text);
    font-size: 4rem;
    letter-spacing: 2px;
    animation: glow-subtle 3s infinite alternate;
}

.name.glitch::before,
.name.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
}

.name.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--secondary);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.name.glitch::after {
    left: -2px;
    text-shadow: 1px 0 var(--primary);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(59% 0 42% 0); }
    5% { clip-path: inset(29% 0 59% 0); }
    10% { clip-path: inset(60% 0 8% 0); }
    15% { clip-path: inset(98% 0 2% 0); }
    20% { clip-path: inset(42% 0 31% 0); }
    25% { clip-path: inset(19% 0 11% 0); }
    30% { clip-path: inset(49% 0 30% 0); }
    35% { clip-path: inset(94% 0 4% 0); }
    40% { clip-path: inset(1% 0 70% 0); }
    45% { clip-path: inset(66% 0 19% 0); }
    50% { clip-path: inset(35% 0 46% 0); }
    55% { clip-path: inset(76% 0 12% 0); }
    60% { clip-path: inset(20% 0 70% 0); }
    65% { clip-path: inset(33% 0 33% 0); }
    70% { clip-path: inset(54% 0 9% 0); }
    75% { clip-path: inset(89% 0 7% 0); }
    80% { clip-path: inset(14% 0 63% 0); }
    85% { clip-path: inset(38% 0 46% 0); }
    90% { clip-path: inset(67% 0 13% 0); }
    95% { clip-path: inset(88% 0 7% 0); }
    100% { clip-path: inset(41% 0 24% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(19% 0 41% 0); }
    5% { clip-path: inset(81% 0 8% 0); }
    10% { clip-path: inset(10% 0 66% 0); }
    15% { clip-path: inset(84% 0 12% 0); }
    20% { clip-path: inset(32% 0 32% 0); }
    25% { clip-path: inset(67% 0 5% 0); }
    30% { clip-path: inset(90% 0 6% 0); }
    35% { clip-path: inset(20% 0 52% 0); }
    40% { clip-path: inset(35% 0 41% 0); }
    45% { clip-path: inset(67% 0 18% 0); }
    50% { clip-path: inset(14% 0 29% 0); }
    55% { clip-path: inset(52% 0 31% 0); }
    60% { clip-path: inset(71% 0 12% 0); }
    65% { clip-path: inset(64% 0 26% 0); }
    70% { clip-path: inset(16% 0 68% 0); }
    75% { clip-path: inset(53% 0 42% 0); }
    80% { clip-path: inset(30% 0 23% 0); }
    85% { clip-path: inset(46% 0 22% 0); }
    90% { clip-path: inset(81% 0 11% 0); }
    95% { clip-path: inset(47% 0 46% 0); }
    100% { clip-path: inset(20% 0 58% 0); }
}
/* Glitch animation for name */
.name.glitch {
    position: relative;
    color: var(--text);
    font-size: 4rem;
    letter-spacing: 2px;
    animation: glow-subtle 3s infinite alternate;
    transition: text-shadow 0.2s ease;
}

.name.glitch.intense {
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(78, 205, 196, 0.9),
        0 0 20px rgba(78, 205, 196, 0.7),
        0 0 40px rgba(78, 205, 196, 0.5);
    animation: intense-glitch 0.2s step-end infinite;
}

.name.glitch::before,
.name.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
}

.name.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--secondary);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.name.glitch::after {
    left: -2px;
    text-shadow: 1px 0 var(--primary);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(59% 0 42% 0); }
    5% { clip-path: inset(29% 0 59% 0); }
    10% { clip-path: inset(60% 0 8% 0); }
    15% { clip-path: inset(98% 0 2% 0); }
    20% { clip-path: inset(42% 0 31% 0); }
    25% { clip-path: inset(19% 0 11% 0); }
    30% { clip-path: inset(49% 0 30% 0); }
    35% { clip-path: inset(94% 0 4% 0); }
    40% { clip-path: inset(1% 0 70% 0); }
    45% { clip-path: inset(66% 0 19% 0); }
    50% { clip-path: inset(35% 0 46% 0); }
    55% { clip-path: inset(76% 0 12% 0); }
    60% { clip-path: inset(20% 0 70% 0); }
    65% { clip-path: inset(33% 0 33% 0); }
    70% { clip-path: inset(54% 0 9% 0); }
    75% { clip-path: inset(89% 0 7% 0); }
    80% { clip-path: inset(14% 0 63% 0); }
    85% { clip-path: inset(38% 0 46% 0); }
    90% { clip-path: inset(67% 0 13% 0); }
    95% { clip-path: inset(88% 0 7% 0); }
    100% { clip-path: inset(41% 0 24% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(19% 0 41% 0); }
    5% { clip-path: inset(81% 0 8% 0); }
    10% { clip-path: inset(10% 0 66% 0); }
    15% { clip-path: inset(84% 0 12% 0); }
    20% { clip-path: inset(32% 0 32% 0); }
    25% { clip-path: inset(67% 0 5% 0); }
    30% { clip-path: inset(90% 0 6% 0); }
    35% { clip-path: inset(20% 0 52% 0); }
    40% { clip-path: inset(35% 0 41% 0); }
    45% { clip-path: inset(67% 0 18% 0); }
    50% { clip-path: inset(14% 0 29% 0); }
    55% { clip-path: inset(52% 0 31% 0); }
    60% { clip-path: inset(71% 0 12% 0); }
    65% { clip-path: inset(64% 0 26% 0); }
    70% { clip-path: inset(16% 0 68% 0); }
    75% { clip-path: inset(53% 0 42% 0); }
    80% { clip-path: inset(30% 0 23% 0); }
    85% { clip-path: inset(46% 0 22% 0); }
    90% { clip-path: inset(81% 0 11% 0); }
    95% { clip-path: inset(47% 0 46% 0); }
    100% { clip-path: inset(20% 0 58% 0); }
}

@keyframes intense-glitch {
    0%, 100% { 
        transform: translate(0);
        text-shadow: 0 0 8px rgba(78, 205, 196, 0.8);
    }
    10% {
        transform: translate(-5px, -2px);
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
    20% {
        transform: translate(10px, 2px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    30% {
        transform: translate(-9px, 0); 
        text-shadow: -3px 0 0 rgba(255, 230, 109, 0.8);
    }
    40% {
        transform: translate(5px, -5px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    50% {
        transform: translate(-4px, 4px); 
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
    60% {
        transform: translate(8px, 0); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    70% {
        transform: translate(0, 8px); 
        text-shadow: -3px 0 0 rgba(255, 230, 109, 0.8);
    }
    80% {
        transform: translate(-3px, -5px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    90% {
        transform: translate(4px, 2px); 
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
}
/* Glitch animation for name */
.name.glitch {
    position: relative;
    color: var(--text);
    font-size: 4rem;
    letter-spacing: 2px;
    animation: glow-subtle 3s infinite alternate;
    transition: text-shadow 0.2s ease;
}

.name.glitch.intense {
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(78, 205, 196, 0.9),
        0 0 20px rgba(78, 205, 196, 0.7),
        0 0 40px rgba(78, 205, 196, 0.5);
    animation: intense-glitch 0.2s step-end infinite;
}

.name.glitch::before,
.name.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
}

.name.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--secondary);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.name.glitch::after {
    left: -2px;
    text-shadow: 1px 0 var(--primary);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(59% 0 42% 0); }
    5% { clip-path: inset(29% 0 59% 0); }
    10% { clip-path: inset(60% 0 8% 0); }
    15% { clip-path: inset(98% 0 2% 0); }
    20% { clip-path: inset(42% 0 31% 0); }
    25% { clip-path: inset(19% 0 11% 0); }
    30% { clip-path: inset(49% 0 30% 0); }
    35% { clip-path: inset(94% 0 4% 0); }
    40% { clip-path: inset(1% 0 70% 0); }
    45% { clip-path: inset(66% 0 19% 0); }
    50% { clip-path: inset(35% 0 46% 0); }
    55% { clip-path: inset(76% 0 12% 0); }
    60% { clip-path: inset(20% 0 70% 0); }
    65% { clip-path: inset(33% 0 33% 0); }
    70% { clip-path: inset(54% 0 9% 0); }
    75% { clip-path: inset(89% 0 7% 0); }
    80% { clip-path: inset(14% 0 63% 0); }
    85% { clip-path: inset(38% 0 46% 0); }
    90% { clip-path: inset(67% 0 13% 0); }
    95% { clip-path: inset(88% 0 7% 0); }
    100% { clip-path: inset(41% 0 24% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(19% 0 41% 0); }
    5% { clip-path: inset(81% 0 8% 0); }
    10% { clip-path: inset(10% 0 66% 0); }
    15% { clip-path: inset(84% 0 12% 0); }
    20% { clip-path: inset(32% 0 32% 0); }
    25% { clip-path: inset(67% 0 5% 0); }
    30% { clip-path: inset(90% 0 6% 0); }
    35% { clip-path: inset(20% 0 52% 0); }
    40% { clip-path: inset(35% 0 41% 0); }
    45% { clip-path: inset(67% 0 18% 0); }
    50% { clip-path: inset(14% 0 29% 0); }
    55% { clip-path: inset(52% 0 31% 0); }
    60% { clip-path: inset(71% 0 12% 0); }
    65% { clip-path: inset(64% 0 26% 0); }
    70% { clip-path: inset(16% 0 68% 0); }
    75% { clip-path: inset(53% 0 42% 0); }
    80% { clip-path: inset(30% 0 23% 0); }
    85% { clip-path: inset(46% 0 22% 0); }
    90% { clip-path: inset(81% 0 11% 0); }
    95% { clip-path: inset(47% 0 46% 0); }
    100% { clip-path: inset(20% 0 58% 0); }
}

@keyframes intense-glitch {
    0%, 100% { 
        transform: translate(0);
        text-shadow: 0 0 8px rgba(78, 205, 196, 0.8);
    }
    10% {
        transform: translate(-5px, -2px);
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
    20% {
        transform: translate(10px, 2px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    30% {
        transform: translate(-9px, 0); 
        text-shadow: -3px 0 0 rgba(255, 230, 109, 0.8);
    }
    40% {
        transform: translate(5px, -5px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    50% {
        transform: translate(-4px, 4px); 
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
    60% {
        transform: translate(8px, 0); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    70% {
        transform: translate(0, 8px); 
        text-shadow: -3px 0 0 rgba(255, 230, 109, 0.8);
    }
    80% {
        transform: translate(-3px, -5px); 
        text-shadow: 3px 0 0 rgba(78, 205, 196, 0.8);
    }
    90% {
        transform: translate(4px, 2px); 
        text-shadow: -3px 0 0 rgba(255, 107, 107, 0.8);
    }
}