.logo-wrap {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
}

.logo {
    width: min(520px, 90vw);
    height: auto;
    overflow: visible;
    --txt: #e5e7eb;
    --glow: rgba(96,165,250,.35);
}

/* Viloläge (ingen animation) */
.ring {
    fill: none;
    stroke: url(#logoGrad);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 170;
    stroke-dashoffset: 0; /* visa ringen statiskt */
    filter: drop-shadow(0 0 10px rgba(96,165,250,.25));
}

.core {
    fill: #60a5fa;
    opacity: .85; /* stilla */
}

.full-name, .initials {
    font: 700 22px system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing: 2px;
    fill: #212529; /* passar bg-light */
}

/* Visa initialer som standard i footer (oftast bäst) */
.full-name {
    opacity: 0;
}

.initials {
    opacity: 1;
}

/* När hover: “ritar” ringen, pulserar core, visar fulla namnet, sen blir initialer */
.logo-wrap:hover .ring {
    stroke-dashoffset: 170;
    animation: draw 1.15s ease-out forwards;
}

.logo-wrap:hover .core {
    animation: pulse 1.1s ease-in-out .2s infinite;
}

.logo-wrap:hover .full-name {
    opacity: 0;
    transform: translateX(-10px);
    animation: nameIn .55s ease-out .6s forwards, nameOut .45s ease-in 1.8s forwards;
}

.logo-wrap:hover .initials {
    opacity: 0;
    transform-origin: left center;
    transform: translateX(-6px) scale(0.92);
    letter-spacing: 10px;
    animation: initialsIn .55s cubic-bezier(.2,.9,.2,1) 1.9s forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.6);
        opacity: .55;
    }
}

@keyframes nameIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* “kollapsa” namnet så det känns som att det blir initialer */
@keyframes nameOut {
    to {
        opacity: 0;
        transform: translateX(6px);
        letter-spacing: -2px;
        filter: blur(1px);
    }
}

@keyframes initialsIn {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        letter-spacing: 2px;
    }
}

/* Respektera reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ring, .core, .full-name, .initials {
        animation: none !important;
    }

    .ring {
        stroke-dashoffset: 0;
    }

    .full-name {
        opacity: 0;
    }

    .initials {
        opacity: 1;
        transform: none;
        letter-spacing: 2px;
    }
}