/* ======================================================
   ГОРИЗОНТАЛЬНЫЕ БЛОКИ
   Используется на всех страницах, где JS создаёт классы
   .horizontal-container и .horizontal-wrapper
   ====================================================== */

.horizontal-container {
    width: 100%;
    overflow: hidden;
    background-color: #242529;
}

.horizontal-wrapper {
    display: flex;
    flex-flow: row nowrap;
    width: max-content;
    will-change: transform;
}

.horizontal-wrapper > div {
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    flex: 0 0 100vw;
}


/* ======================================================
   СВЕЧЕНИЕ КНОПОК ПРИ НАВЕДЕНИИ
   ====================================================== */

.glow-btn-strong {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .glow-btn-strong:hover {
        animation: strongTealGlow 2.5s infinite ease-in-out;
    }
}

@keyframes strongTealGlow {
    0%,
    100% {
        box-shadow:
            0 0 8px rgba(74, 158, 154, 0.8),
            0 0 12px rgba(74, 158, 154, 0.4);
        transform: translateZ(0) scale(1);
    }

    50% {
        box-shadow:
            0 0 25px rgba(74, 158, 154, 1),
            0 0 40px rgba(74, 158, 154, 0.7),
            0 0 60px rgba(74, 158, 154, 0.3);
        transform: translateZ(0) scale(1.02);
    }
}


/* ======================================================
   ПОСТОЯННЫЙ БЕГУЩИЙ БЛИК
   ====================================================== */

.glow-shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.glow-shine::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -150px;
    left: -40px;

    width: 10px;
    height: 300px;

    background: rgba(255, 255, 255, 0.5);
    opacity: 0.5;

    transform: rotate(45deg);
    animation: slideGlow 3.33s ease-in-out infinite;
    pointer-events: none;
}

@keyframes slideGlow {
    0% {
        left: -10%;
        margin-left: 0;
    }

    30%,
    100% {
        left: 110%;
        margin-left: 80px;
    }
}


/* Отключение движения для пользователей
   с системной настройкой уменьшения анимации */

@media (prefers-reduced-motion: reduce) {
    .glow-shine::after,
    .glow-btn-strong:hover {
        animation: none;
    }
}