/* ==========================================================
   VOIDVPN SVG GALAXY LOGO
========================================================== */

.brand {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

/* ==========================================================
   SVG LOGO
========================================================== */

.galaxy-logo {
    position: relative;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    overflow: visible;
    isolation: isolate;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

/* Внешнее мягкое свечение */

.galaxy-logo::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216, 180, 254, 0.38) 0%,
            rgba(168, 85, 247, 0.24) 34%,
            rgba(109, 40, 217, 0.12) 58%,
            transparent 76%
        );

    filter: blur(11px);
    opacity: 0.72;

    animation:
        galaxyAura 4.8s ease-in-out infinite;
}

/* Дополнительное тонкое кольцо свечения */

.galaxy-logo::after {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;

    border: 1px solid rgba(216, 180, 254, 0.18);
    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(168, 85, 247, 0.18),
        inset 0 0 10px rgba(192, 132, 252, 0.08);

    animation:
        galaxyRingPulse 5.4s ease-in-out infinite;
}

.galaxy-logo-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    transform-origin: center;
    will-change: transform, filter;

    filter:
        brightness(1)
        saturate(1.08)
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.18))
        drop-shadow(0 0 13px rgba(216, 180, 254, 0.42))
        drop-shadow(0 0 25px rgba(126, 34, 206, 0.32));

    animation:
        galaxyFloat 6s ease-in-out infinite,
        galaxyPulse 4.5s ease-in-out infinite;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s ease;
}

/* ==========================================================
   WORDMARK
========================================================== */

.brand-text {
    display: inline-flex;
    align-items: baseline;

    color: #ffffff;

    font-size: 21px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.7px;
    white-space: nowrap;

    transition:
        transform 0.35s ease,
        text-shadow 0.35s ease,
        filter 0.35s ease;
}

.brand-text span {
    margin-left: 1px;

    color: transparent;

    background:
        linear-gradient(
            180deg,
            #f3e8ff 0%,
            #d8b4fe 28%,
            #c084fc 48%,
            #a855f7 68%,
            #6d28d9 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    text-shadow: none;
}

/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {
    .brand:hover .galaxy-logo {
        transform: scale(1.07);

        filter:
            drop-shadow(0 0 11px rgba(216, 180, 254, 0.42))
            drop-shadow(0 0 24px rgba(126, 34, 206, 0.36));
    }

    .brand:hover .galaxy-logo-image {
        animation:
            galaxyFloatHover 2.8s ease-in-out infinite,
            galaxyPulseHover 2s ease-in-out infinite;

        transform:
            scale(1.06)
            rotate(3deg);

        filter:
            brightness(1.16)
            saturate(1.2)
            drop-shadow(0 0 9px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 18px rgba(216, 180, 254, 0.72))
            drop-shadow(0 0 36px rgba(126, 34, 206, 0.58));
    }

    .brand:hover .brand-text {
        transform: translateX(2px);

        text-shadow:
            0 0 14px rgba(255, 255, 255, 0.12),
            0 0 24px rgba(168, 85, 247, 0.1);
    }
}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes galaxyFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }

    25% {
        transform:
            translateY(-0.7px)
            rotate(0.5deg)
            scale(1.01);
    }

    50% {
        transform:
            translateY(-1.8px)
            rotate(1.5deg)
            scale(1.025);
    }

    75% {
        transform:
            translateY(-0.8px)
            rotate(0.7deg)
            scale(1.01);
    }
}

@keyframes galaxyPulse {
    0%,
    100% {
        filter:
            brightness(0.96)
            saturate(1.02)
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.14))
            drop-shadow(0 0 12px rgba(216, 180, 254, 0.34))
            drop-shadow(0 0 22px rgba(126, 34, 206, 0.24));
    }

    50% {
        filter:
            brightness(1.15)
            saturate(1.2)
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.24))
            drop-shadow(0 0 17px rgba(216, 180, 254, 0.58))
            drop-shadow(0 0 32px rgba(126, 34, 206, 0.42));
    }
}

@keyframes galaxyAura {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.98;
        transform: scale(1.12);
    }
}

@keyframes galaxyRingPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.06);
    }
}

@keyframes galaxyFloatHover {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1.04);
    }

    50% {
        transform:
            translateY(-2px)
            rotate(4deg)
            scale(1.08);
    }
}

@keyframes galaxyPulseHover {
    0%,
    100% {
        filter:
            brightness(1.05)
            saturate(1.12)
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.22))
            drop-shadow(0 0 16px rgba(216, 180, 254, 0.54))
            drop-shadow(0 0 30px rgba(126, 34, 206, 0.42));
    }

    50% {
        filter:
            brightness(1.24)
            saturate(1.3)
            drop-shadow(0 0 11px rgba(255, 255, 255, 0.34))
            drop-shadow(0 0 23px rgba(216, 180, 254, 0.82))
            drop-shadow(0 0 44px rgba(126, 34, 206, 0.65));
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
    .galaxy-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .brand-text {
        font-size: 19px;
    }
}

@media (max-width: 520px) {
    .brand {
        gap: 8px;
    }

    .galaxy-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .brand-text {
        font-size: 17px;
        letter-spacing: -0.5px;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .galaxy-logo::before,
    .galaxy-logo::after,
    .galaxy-logo-image {
        animation: none !important;
    }

    .galaxy-logo,
    .galaxy-logo-image,
    .brand-text {
        transition: none !important;
    }
}

/* =========================================================
   VOIDVPN HEADER LOGO POLISH
   ========================================================= */

.galaxy-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.galaxy-logo::before {
    inset: 5px;

    background:
        radial-gradient(
            circle,
            rgba(192, 132, 252, 0.32) 0%,
            rgba(139, 92, 246, 0.18) 42%,
            rgba(109, 40, 217, 0.08) 62%,
            transparent 78%
        );

    filter: blur(10px);
}

.galaxy-logo::after {
    inset: 4px;

    border-color: rgba(192, 132, 252, 0.20);

    box-shadow:
        0 0 10px rgba(168, 85, 247, 0.22),
        inset 0 0 10px rgba(192, 132, 252, 0.06);
}

.galaxy-logo-image {
    width: 40px;
    height: 40px;

    mix-blend-mode: screen;

    filter:
        brightness(1.18)
        saturate(1.22)
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.14))
        drop-shadow(0 0 11px rgba(192, 132, 252, 0.50))
        drop-shadow(0 0 24px rgba(109, 40, 217, 0.28));
}