/* ===== АНИМАЦИИ ===== */

/* Появление заголовка */
@keyframes fadeInTitle {
    0% { 
        opacity: 0; 
        transform: translateY(-30px) scale(0.9); 
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) scale(0.95);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Применение анимации к заголовку */
.title {
    animation: fadeInTitle 3s ease-out forwards;
}

/* Скрытие заголовка */
@keyframes fadeOutTitle {
    0% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-50px) scale(0.9);
    }
}

.title.hidden {
    animation: fadeOutTitle 1.5s ease-in forwards;
}

/* Анимация ухода текста вверх */
@keyframes slideUp {
    0% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-25px) scale(0.98);
        filter: blur(1px);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-100px) scale(0.9);
        filter: blur(3px);
    }
}

/* Анимация мигающего курсора */
@keyframes blink {
    0%, 50% { 
        opacity: 1;
    }
    51%, 100% { 
        opacity: 0;
    }
}

.cursor {
    animation: blink 1s infinite;
}

/* Анимация появления блока */
@keyframes fadeInBlock {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Анимация фонового видео при загрузке */


#bgVideo {
    animation: videoFadeIn 2s ease-out forwards;
}

/* Анимация подложки */
@keyframes overlayFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.overlay {
    animation: overlayFadeIn 1.5s ease-out forwards;
}

/* Анимация для ошибок */


.shake {
    animation: shake 0.5s ease-in-out;
}

/* Анимация пульсации */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Анимация появления с задержкой */
.delayed-fade-in {
    opacity: 0;
    animation: fadeInBlock 1s ease-out forwards;
}

.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1s; }
.delay-3 { animation-delay: 1.5s; }

/* Плавные переходы */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Анимация загрузки */
@keyframes loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.1), 
        transparent);
    background-size: 200px 100%;
    animation: loading 1.5s infinite;
}

/* Hover эффекты */
.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Анимации для состояний загрузки */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.1), 
        transparent);
    animation: loading 1.5s infinite;
}