/* Анимации */
@keyframes textGlow {
    0%, 100% { 
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.2), 
                     0 0 20px rgba(0, 200, 100, 0.3),
                     0 0 30px rgba(0, 150, 150, 0.2); 
    }
    50% { 
        text-shadow: 0 0 15px rgba(0, 255, 50, 0.6), 
                     0 0 30px rgba(50, 255, 100, 0.5),
                     0 0 45px rgba(100, 255, 150, 0.4),
                     0 0 60px rgba(150, 255, 200, 0.2); 
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.4;
        filter: blur(0.5px);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.08); 
        opacity: 0.8;
        filter: blur(0px);
    }
}

@keyframes scanLine {
    0% { 
        transform: translateX(-100%); 
        opacity: 0;
    }
    10%, 90% { 
        opacity: 0.8;
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0;
    }
}

@keyframes float {
    0% { 
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
        filter: blur(2px);
    }
    10% { 
        opacity: 0.9; 
        filter: blur(0px);
    }
    90% { 
        opacity: 0.9;
    }
    100% { 
        transform: translateY(-120vh) translateX(calc(50px + (var(--rand, 0.5) * 100px))) rotate(10deg);
        opacity: 0;
        filter: blur(3px);
    }
}

/* Улучшенные трясущиеся анимации */
@keyframes shake-slow {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    10%, 30%, 50%, 70%, 90% { 
        transform: translate(calc(-1px - 0.5% * var(--shake-intensity, 1)), 
                   calc(-1px - 0.5% * var(--shake-intensity, 1))) 
                   rotate(calc(-0.5deg * var(--shake-intensity, 1))); 
    }
    20%, 40%, 60%, 80% { 
        transform: translate(calc(1px + 0.5% * var(--shake-intensity, 1)), 
                   calc(1px + 0.5% * var(--shake-intensity, 1))) 
                   rotate(calc(0.5deg * var(--shake-intensity, 1))); 
    }
}

@keyframes shake-little {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1); 
    }
    25% { 
        transform: translate(-0.5px, -0.5px) rotate(-0.2deg) scale(1.005); 
    }
    75% { 
        transform: translate(0.5px, 0.5px) rotate(0.2deg) scale(1.005); 
    }
}

@keyframes shake-on-hover {
    0% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    15% { 
        transform: translate(-3px, -1px) rotate(-1deg); 
    }
    30% { 
        transform: translate(3px, 1px) rotate(1deg); 
    }
    45% { 
        transform: translate(-2px, -2px) rotate(-0.5deg); 
    }
    60% { 
        transform: translate(2px, 2px) rotate(0.5deg); 
    }
    75% { 
        transform: translate(-1px, 0px) rotate(-0.2deg); 
    }
    100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
}

/* Применение анимаций */
.shake-slow {
    --shake-intensity: 1.5;
    animation: shake-slow 7s infinite ease-in-out, textGlow 4s infinite alternate;
    will-change: transform;
}

.shake-little {
    animation: shake-little 4s infinite ease-in-out;
    will-change: transform;
}

.shake-on-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

.shake-on-hover:hover {
    animation: shake-on-hover 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.pulse {
    animation: pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform, opacity;
}

.scan-line {
    position: relative;
    overflow: hidden;
}

.scan-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
              transparent, 
              rgba(0, 255, 100, 0.8), 
              rgba(0, 200, 200, 0.6), 
              transparent);
    box-shadow: 0 0 10px rgba(0, 255, 150, 0.5);
    animation: scanLine 3.5s infinite cubic-bezier(0.8, 0, 0.2, 1);
    will-change: transform;
}

/* Дополнительные эффекты */
.float-element {
    --rand: calc(Math.random());
    animation: float calc(10s + (var(--rand) * 5s)) infinite ease-in;
    animation-delay: calc(var(--rand) * 2s);
}

/* Глитч анимации */
@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0) }
    10% { clip: rect(112px, 9999px, 76px, 0) }
    20% { clip: rect(85px, 9999px, 77px, 0) }
    30% { clip: rect(27px, 9999px, 97px, 0) }
    40% { clip: rect(64px, 9999px, 98px, 0) }
    50% { clip: rect(61px, 9999px, 85px, 0) }
    60% { clip: rect(99px, 9999px, 114px, 0) }
    70% { clip: rect(34px, 9999px, 115px, 0) }
    80% { clip: rect(98px, 9999px, 129px, 0) }
    90% { clip: rect(43px, 9999px, 96px, 0) }
    100% { clip: rect(82px, 9999px, 64px, 0) }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 119px, 0) }
    10% { clip: rect(79px, 9999px, 109px, 0) }
    20% { clip: rect(16px, 9999px, 39px, 0) }
    30% { clip: rect(92px, 9999px, 103px, 0) }
    40% { clip: rect(50px, 9999px, 101px, 0) }
    50% { clip: rect(111px, 9999px, 70px, 0) }
    60% { clip: rect(30px, 9999px, 92px, 0) }
    70% { clip: rect(105px, 9999px, 53px, 0) }
    80% { clip: rect(90px, 9999px, 91px, 0) }
    90% { clip: rect(58px, 9999px, 84px, 0) }
    100% { clip: rect(98px, 9999px, 51px, 0) }
}

/* Анимация печатающей машинки */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { opacity: 0.3; } /* Менее заметное исчезновение */
    50% { opacity: 0.9; }
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Применение анимаций */
.glitch::before {
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

.typewriter {
    animation: typing 3.5s steps(30, end);
}

.typewriter::after {
    animation: blink-caret 0.75s step-end infinite;
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}