.logo {
    font-size: 50px;
    text-decoration: none;
    text-align: center;
    color: #62176d;
    font-weight: 800;
    display: flex;
    width: 300px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    animation: techColorShift 6s linear infinite;
    position: relative;
    font-family: 'UnifrakturMaguntia', cursive;
}

@keyframes techColorShift {
    0% {
        text-shadow:
            0 0 10px #ff00ff,
            /* Яркий пурпурный */
            0 0 25px #ff00ff,
            0 0 40px #ff00ff,
            0 0 60px #c77dff;
        /* Светло-фиолетовый */
    }

    33% {
        text-shadow:
            0 0 10px #9d4edd,
            /* Фиолетово-синий */
            0 0 25px #9d4edd,
            0 0 40px #9d4edd,
            0 0 60px #5a00ff;
        /* Глубокий синий */
    }

    66% {
        text-shadow:
            0 0 10px #7640ec,
            /* Яркий голубой */
            0 0 25px #7f44ff,
            0 0 40px #7434ff,
            0 0 60px #5f3fa4;
        /* Сине-голубой */
    }

    100% {
        text-shadow:
            0 0 10px #ff00ff,
            0 0 25px #ff00ff,
            0 0 40px #ff00ff,
            0 0 60px #c77dff;
    }
}

.logo .magic-t {
    display: inline-block;
    position: relative;
    color: #ff6bff;
    /* Яркий фуксия */
    text-shadow:
        0 0 15px #ff00ff,
        /* Фиолетовое свечение */
        0 0 30px #d400ff,
        0 0 45px #9d00ff,
        0 0 10px #fff,
        0 0 20px #fff;
    animation: wandGlow 1.8s ease-in-out infinite alternate;
}

/* Анимация свечения палочки */
@keyframes wandGlow {
    from {
        filter: brightness(1);
        text-shadow:
            0 0 12px #ff00ff,
            0 0 25px #d400ff,
            0 0 35px #9d00ff;
    }

    to {
        filter: brightness(1.4);
        /* Убираем transform: translateY(-1px); - это был прыжок */
        text-shadow:
            0 0 22px #ff00ff,
            0 0 45px #d400ff,
            0 0 65px #9d00ff,
            0 0 15px #fff,
            0 0 35px #fff;
    }
}


/* Частицы магии вокруг буквы (красные/фиолетовые) */
.logo .magic-t::before,
.logo .magic-t::after {
    position: absolute;
    font-size: 0.35em;
    opacity: 0;
    animation: sparkleFlow 4s infinite linear;
}



/* Анимация движения частиц */
@keyframes sparkleFlow {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(0.5);
    }

    25% {
        opacity: 1;
        transform: translateY(-12px) rotate(90deg) scale(1.2);
    }

    50% {
        opacity: 0.7;
        transform: translateY(-20px) rotate(180deg) scale(1);
    }

    75% {
        opacity: 0.3;
        transform: translateY(-15px) rotate(270deg) scale(0.8);
    }
}

.particle {
    position: absolute;
    font-size: 0.25em;
    animation: particleOrbit 3s infinite linear;
    pointer-events: none;
    z-index: -1;
}

/* Первая частица (золотая) - вращается ближе всего к букве */
.particle-1 {
    color: #ffdd66;
    text-shadow: 0 0 5px #ffaa00;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -5px;
    animation: particleOrbit 4.5s infinite linear;

}

/* Вторая частица (красная) - вращается дальше и медленнее */
.particle-2 {
    content: '❖';
    color: #ffdd66;
    text-shadow: 0 0 5px #ffaa00;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -10px;
    animation: particleOrbit 5.5s infinite linear reverse;

}

/* Третья частица (фиолетовая) - вращается по другой траектории */
.particle-3 {
    color: #ffdd66;
    text-shadow: 0 0 5px #ffaa00;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -15px;
    animation: particleOrbit 4s infinite linear;

}

/* Анимация вращения для всех частиц */
@keyframes particleOrbit {
    from {
        transform: rotate(0deg) translateX(15px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(15px) rotate(-360deg);
    }
}


@media (max-width: 768px) {



    .logo {
        font-size: 30px;
    }

}