/* ==========================================
   LOGO RING ANIMATION - ESTELLE
   Glitzernder goldener Ring um das Logo
   ========================================== */

.logo {
    position: relative;
    display: inline-block;
}

.logo-ring-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: fadeInRing 2s ease-out 0.5s forwards;
}

.logo-img,
.custom-logo-link img {
    position: relative;
    z-index: 2;
}

.logo-ring-animation {
    width: 100%;
    height: 100%;
    display: block;
}

/* Fade In Animation */
@keyframes fadeInRing {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Ring-Animation komplett ausgeblendet */
.logo-ring-wrapper {
    display: none !important;
}

/* Optional: Ring nur auf Startseite anzeigen */
body:not(.home) .logo-ring-wrapper {
    display: none;
}

/* Alternative: Ring ausblenden wenn Header gescrollt ist */
header.scrolled .logo-ring-wrapper {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}