/* home-animations.css - общие анимации главной страницы */
/* ==================== 2. АНИМАЦИИ ==================== */
@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.1; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.15; 
        transform: translate(-50%, -50%) scale(1.05); 
    }
}

@keyframes starTwinkle {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.7; 
        transform: scale(0.9); 
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes gradientFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes buttonPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4); 
    }
}

@keyframes markerAppear {
    from { 
        transform: scale(0.5); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

@keyframes notificationSlideIn {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes pulseCircle {
    0% {
        width: 60px;
        height: 60px;
        opacity: 0.7;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}

@keyframes dateTimeModalPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }
}

@keyframes dateTimeModalSlideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes dateTimeModalSlideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes dateTimeModalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dateTimeModalFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes dialogAppear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mapShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes buttonStickAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stickyGlow {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3),
                    0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow: 0 10px 35px rgba(30, 58, 138, 0.4),
                    0 0 0 3px rgba(59, 130, 246, 0.3);
    }
}

@keyframes buttonSlideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes buttonReappear {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blueLabelFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}