/**
 * Shimmer Animation - Анимация перелива синих полосок
 * Основная фишка дизайна для всех страниц
 */

/* === Базовая анимация перелива === */
@keyframes shimmerFlow {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes blueShimmer {
    0% {
        background-position: -300% 0;
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        background-position: 300% 0;
        opacity: 0.3;
    }
}

@keyframes waveShimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(300%) skewX(-15deg);
        opacity: 0;
    }
}

/* === Основной класс для анимации перелива === */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 144, 226, 0.1) 25%,
        rgba(91, 163, 245, 0.2) 50%,
        rgba(107, 182, 255, 0.1) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmerFlow 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* === Усиленный эффект для важных элементов === */
.shimmer-enhanced {
    position: relative;
    overflow: hidden;
}

.shimmer-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(74, 144, 226, 0.15) 20%,
        rgba(91, 163, 245, 0.3) 40%,
        rgba(107, 182, 255, 0.4) 50%,
        rgba(91, 163, 245, 0.3) 60%,
        rgba(74, 144, 226, 0.15) 80%,
        transparent 100%
    );
    background-size: 300% 300%;
    animation: blueShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* === Волновой эффект === */
.shimmer-wave {
    position: relative;
    overflow: hidden;
}

.shimmer-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(74, 144, 226, 0.3) 50%,
        transparent 100%
    );
    animation: waveShimmer 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* === Применение для карточек === */
.card-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #252525 0%, #2a2a2a 100%);
}

.card-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 144, 226, 0.08) 25%,
        rgba(91, 163, 245, 0.15) 50%,
        rgba(74, 144, 226, 0.08) 75%,
        transparent 100%
    );
    animation: shimmerFlow 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* === Для кнопок === */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 70%
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-shimmer:hover::before {
    left: 100%;
}

/* === Для заголовков === */
.title-shimmer {
    position: relative;
    background: linear-gradient(
        135deg,
        #4a90e2 0%,
        #5ba3f5 25%,
        #6bb6ff 50%,
        #5ba3f5 75%,
        #4a90e2 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerFlow 4s ease-in-out infinite;
}

/* === Мягкий эффект для контента === */
.content-shimmer {
    position: relative;
    overflow: hidden;
}

.content-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(74, 144, 226, 0.03) 30%,
        rgba(91, 163, 245, 0.06) 50%,
        rgba(74, 144, 226, 0.03) 70%,
        transparent 100%
    );
    background-size: 250% 250%;
    animation: blueShimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* === Граничный эффект === */
.border-shimmer {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                linear-gradient(45deg, 
                    rgba(74, 144, 226, 0.3) 0%,
                    rgba(91, 163, 245, 0.5) 25%,
                    rgba(107, 182, 255, 0.3) 50%,
                    rgba(91, 163, 245, 0.5) 75%,
                    rgba(74, 144, 226, 0.3) 100%
                ) border-box;
    background-size: 200% 200%;
    animation: shimmerFlow 3s ease-in-out infinite;
}

/* === Адаптивность === */
@media (prefers-reduced-motion: reduce) {
    .shimmer-effect::before,
    .shimmer-enhanced::before,
    .shimmer-wave::after,
    .card-shimmer::before,
    .title-shimmer,
    .content-shimmer::before,
    .border-shimmer {
        animation: none;
    }
}

/* === Вариации скорости === */
.shimmer-slow {
    animation-duration: 5s;
}

.shimmer-fast {
    animation-duration: 2s;
}

/* === Активация при hover === */
.shimmer-on-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-on-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 144, 226, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.shimmer-on-hover:hover::before {
    left: 100%;
}