/* Начальное состояние */
#rec2177355971 .t-name,
#rec2177355971 .t-title,
#rec2177355971 .t-descr {
    opacity: 1;
    transition: color 0.4s ease, font-weight 0.4s ease;
}

/* При наведении текст плавно меняет цвет и становится жирнее */
#rec2177355971 .t-item:hover .t-name,
#rec2177355971 .t-item:hover .t-title,
#rec2177355971 .t-item:hover .t-descr {
    color: #1551B6 !important;
    font-weight: 500 !important;
}

/* базовый стиль */
.glow-1 .tn-atom,
.glow-2 .tn-atom,
.glow-3 .tn-atom,
.glow-4 .tn-atom,
.glow-5 .tn-atom {
    border: 0.5px solid rgba(10, 79, 143, 0.25) !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

/* =========================
   АНИМАЦИЯ ТЕКСТА
========================= */

#rec2177355971 .t-name,
#rec2177355971 .t-title,
#rec2177355971 .t-descr {
    opacity: 1;
    transition:
        color 0.4s ease,
        font-weight 0.4s ease;
}

#rec2177355971 .t-item:hover .t-name,
#rec2177355971 .t-item:hover .t-title,
#rec2177355971 .t-item:hover .t-descr {
    color: #1551B6 !important;
    font-weight: 500 !important;
}

/* =========================
   КАРТОЧКИ
========================= */

.glow-1 .tn-atom,
.glow-2 .tn-atom,
.glow-3 .tn-atom,
.glow-4 .tn-atom,
.glow-5 .tn-atom {
    border: 1px solid rgba(21, 81, 182, 0.15) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-sizing: border-box !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    will-change: transform, box-shadow;
}

/* =========================
   ОЧЕРЕДЬ ПОДСВЕТКИ
========================= */

.glow-1 .tn-atom {
    animation: glowCycle 5s infinite 0s;
}

.glow-2 .tn-atom {
    animation: glowCycle 5s infinite 1s;
}

.glow-3 .tn-atom {
    animation: glowCycle 5s infinite 2s;
}

.glow-4 .tn-atom {
    animation: glowCycle 5s infinite 3s;
}

.glow-5 .tn-atom {
    animation: glowCycle 5s infinite 4s;
}

/* =========================
   НЕОНОВОЕ СВЕЧЕНИЕ
========================= */

@keyframes glowCycle {

    0%,
    18%,
    100% {
        transform: scale(1);

        border-color: rgba(21, 81, 182, 0.15);

        box-shadow:
            0 0 0 rgba(21, 81, 182, 0);
    }

    8% {
        transform: scale(1.015);

        border-color: rgba(21, 81, 182, 0.6);

        box-shadow:
            0 0 12px rgba(21, 81, 182, 0.45),
            0 0 25px rgba(21, 81, 182, 0.25),
            0 0 40px rgba(21, 81, 182, 0.12);
    }
}

/* =========================
   ЭФФЕКТ ПРИ НАВЕДЕНИИ
========================= */

.glow-1 .tn-atom:hover,
.glow-2 .tn-atom:hover,
.glow-3 .tn-atom:hover,
.glow-4 .tn-atom:hover,
.glow-5 .tn-atom:hover {

    transform: scale(1.02);

    border-color: rgba(21, 81, 182, 0.7);

    box-shadow:
        0 0 15px rgba(21, 81, 182, 0.5),
        0 0 35px rgba(21, 81, 182, 0.25);
}

/* Фиксация эффекта при наведении */

.glow-1 .tn-atom:hover,
.glow-2 .tn-atom:hover,
.glow-3 .tn-atom:hover,
.glow-4 .tn-atom:hover,
.glow-5 .tn-atom:hover {

    animation: none !important;

    transform: scale(1.02);

    border-color: rgba(21, 81, 182, 0.8);

    box-shadow:
        0 0 15px rgba(21, 81, 182, 0.55),
        0 0 35px rgba(21, 81, 182, 0.30),
        0 0 60px rgba(21, 81, 182, 0.15);
}
    
/* Синяя пульсирующая кнопка */
.blue-pulse-btn {
    position: relative;
    background: #0a4f8f;
    color: #fff;
    border-radius: 14px;
    overflow: visible;
}

.blue-pulse-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #0a4f8f;
    z-index: -1;
    animation: bluePulse 2s infinite;
}

@keyframes bluePulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}