/* Logo animation and effects */
.logo {
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    transition: all 0.5s ease;
}

/* Gradient effect for the logo text */
.logo-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, #4361ee 50%, #3a0ca3 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease infinite;
}

/* Animated dot in the logo */
.logo span {
    display: inline-block;
    color: var(--primary-color);
    position: relative;
    transform-origin: center;
    animation: pulse 2s infinite ease-in-out;
}

/* 3D hover effect */
.logo:hover {
    transform: perspective(200px) translateZ(10px);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Special hover effect for the dot */
.logo:hover span {
    animation: spin 1s ease-in-out;
}

/* Special glow on dark mode */
[data-theme="dark"] .logo-text {
    background: linear-gradient(135deg, #536dfe 0%, #4361ee 50%, #6d83ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease infinite;
    text-shadow: 0 0 10px rgba(83, 109, 254, 0.5);
}

[data-theme="dark"] .logo span {
    text-shadow: 0 0 10px var(--primary-color);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Neon light effect on dark mode */
[data-theme="dark"] .logo:hover span {
    animation: neon-pulse 1s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px var(--primary-color),
            0 0 35px var(--primary-color), 0 0 40px var(--primary-color), 0 0 50px var(--primary-color),
            0 0 75px var(--primary-color);
    }
    to {
        text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px var(--primary-color),
            0 0 17.5px var(--primary-color), 0 0 20px var(--primary-color), 0 0 25px var(--primary-color),
            0 0 37.5px var(--primary-color);
    }
}