/**
 * animations.css
 * Файл с анимациями для приложения
 */

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

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

/* Пульсация */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Вращение */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Анимация карты */
@keyframes cardFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Анимированные точки загрузки */
@keyframes loadingDots {
    0%, 20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80%, 100% {
        opacity: 0;
    }
}

/* Анимация кнопки */
@keyframes buttonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(227, 6, 19, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0);
    }
}

/* Классы для быстрого применения анимаций */
.fadeIn {
    animation: fadeIn 0.5s ease forwards;
}

.fadeOut {
    animation: fadeOut 0.5s ease forwards;
}

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

.spin {
    animation: spin 1s linear infinite;
}

.float {
    animation: cardFloat 6s infinite ease-in-out;
}

/* Добавляем анимацию для сканирования QR-кода */
@keyframes scanPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7);
        border-color: rgba(227, 6, 19, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(227, 6, 19, 0);
        border-color: rgba(227, 6, 19, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(227, 6, 19, 0);
        border-color: rgba(227, 6, 19, 0.7);
    }
}

.qr-scanner-frame {
    animation: scanPulse 2s infinite;
}