/* --- Анімація динамічної лінії під хедером --- */
.header-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Основна помаранчева лінія */
    background-color: var(--primary-color );
    overflow: hidden;
}

.header-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 35%; /* Ширина градієнта бліка */
    height: 8px; /* Товщина бліка */
    transform: translateY(-50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 73, 0, 0.7) 20%, /* Початок з помаранчевого */
        rgba(255, 255, 255, 1) 50%, /* Яскраво-білий центр */
        rgba(255, 73, 0, 0.7) 80%, /* Кінець з помаранчевого */
        transparent 100%
    );
    filter: blur(6px); /* Розмиття для м'якості */
    box-shadow: 0 0 15px 4px rgba(255, 100, 0, 0.5); /* Помаранчевий ореол */
    animation: move-flare 6s ease-in-out infinite; /* 6 секунд на цикл */
    animation-delay: 2s;
    opacity: 0; /* Початково невидимий */
}

@keyframes move-flare {
    0% {
        transform: translateX(-40%); /* Починаємо за лівим краєм */
        opacity: 0;
    }
    10% {
        opacity: 1; /* З'являється на початку руху */
    }
    25% {
        /* Швидкий рух за 15% часу */
        transform: translateX(300%); /* Рухаємось далеко за правий край */
        opacity: 1;
    }
    26% {
        opacity: 0; /* Миттєво зникає */
    }
    100% {
        transform: translateX(300%);
        opacity: 0; /* Залишається невидимим до кінця циклу */
    }
}