/* Контейнер-обёртка */
.image-swap {
    position: relative;
    display: inline-block;
}

/* Оба изображения внутри контейнера */
.image-swap img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* Изображение, которое видно всегда (по умолчанию) */
.image-swap .img-visible {
    position: relative;
    pointer-events: none !important;
    z-index: 2;
}

/* Изображение, которое скрыто и появляется при наведении */
.image-swap .img-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
}

/* При наведении на контейнер: скрываем видимое, показываем скрытое */
.image-swap:hover .img-visible {
    opacity: 0;
}

.image-swap:hover .img-hidden {
    opacity: 1;
}



/* Курсор-указатель для всех кнопок и ссылок */
.tn-atom,
.t-btn,
.btn-order,
a,
button,
[role="button"] {
    cursor: pointer !important;
}




/* НАСТРОЙКА МЕНЮ */
/* Стили для смены изображений (из предыдущего) */
.image-swap {
    position: relative;
    display: inline-block;
}
.image-swap img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}
.image-swap .img-visible {
    position: relative;
    z-index: 2;
}
.image-swap .img-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
}
.image-swap:hover .img-visible {
    opacity: 0;
}
.image-swap:hover .img-hidden {
    opacity: 1;
}

/* Стили для меню и двух иконок */
.menu-icon-open {
    display: block; /* или inline-block, в зависимости от вашего макета */
}
.menu-icon-close {
    display: none;
}
.hidden {
    display: none !important;
}
.menu-group {
    display: none !important;
}
.menu-group.show {
    display: block !important; /* если нужно flex, замените block на flex */
}


/* Фирменное выделение текста */
::selection {
    background: #00F5FF;  /* электрик — основной акцент */
    color: #FFFFFF;
}

/* Для Firefox */
::-moz-selection {
    background: #00F5FF;
    color: #FFFFFF;
}



    /* Скрываем стандартный скроллбар */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    html {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Индикатор прогресса прокрутки — С ПРАВОЙ СТОРОНЫ */
    #scroll-indicator {
        position: fixed;
        top: 0;
        right: 0;          /* прижимаем к правому краю */
        height: 0%;        /* будет заполняться сверху вниз */
        width: 8px;        /* толщина линии — в 2 раза больше (было 4px) */
        background: linear-gradient(180deg, #00F5FF, #FF00E5);
        z-index: 99999;
        transition: height 0.1s ease-out;
        box-shadow: 0 0 12px rgba(0, 245, 255, 0.3);
        border-radius: 2px 0 0 2px;
    }