/* ==========================================================================
   orjicloud Lumi - Universelles, skalierbares 3D-Licht- & Waber-Logo
   Verwendbar in Blazor-Komponenten sowie auf externen Partner-Websites.
   Steuerung der Größe über die CSS-Variable: --lumi-size (Standard: 360px)
   ========================================================================== */

:root {
    --lumi-size: 360px;
    --lumi-color-primary: #31AA64;
    --lumi-color-glow: rgba(74, 255, 170, 0.9);
    --lumi-color-glow-soft: rgba(49, 170, 100, 0.7);
}

/* Vordefinierte Größen-Klassen */
.lumi-size-xs { --lumi-size: 48px; }
.lumi-size-sm { --lumi-size: 96px; }
.lumi-size-md { --lumi-size: 180px; }
.lumi-size-lg { --lumi-size: 260px; }
.lumi-size-xl { --lumi-size: 360px; }

/* ── Basis-Container ── */
.lumi-logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lumi-size, 360px);
    height: var(--lumi-size, 360px);
    perspective: 1000px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.lumi-logo-container.non-interactive {
    cursor: default;
}

/* 1. Weich diffundierende äußere Lichtwolke */
.lumi-fluid-aura {
    position: absolute;
    width: calc(var(--lumi-size, 360px) * 0.92);
    height: calc(var(--lumi-size, 360px) * 0.92);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.3) 0%, rgba(49, 170, 100, 0.15) 50%, transparent 75%);
    filter: blur(calc(var(--lumi-size, 360px) * 0.1));
    pointer-events: none;
    animation: lumiAuraBreathe 8s ease-in-out infinite alternate;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, filter 0.7s ease;
}

@keyframes lumiAuraBreathe {
    0% { transform: scale(0.92); opacity: 0.55; }
    100% { transform: scale(1.15); opacity: 0.95; }
}

/* 2. Organisch morphende, wabernde Plasma-Lichtschichten */
.lumi-fluid-blob {
    position: absolute;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, filter 0.6s ease;
}

.lumi-fluid-blob.blob-1 {
    width: calc(var(--lumi-size, 360px) * 0.7);
    height: calc(var(--lumi-size, 360px) * 0.7);
    background: radial-gradient(circle at 45% 45%, rgba(74, 255, 170, 0.5) 0%, rgba(49, 170, 100, 0.28) 50%, transparent 75%);
    filter: blur(calc(var(--lumi-size, 360px) * 0.045));
    animation: lumiBlobMorph1 10s ease-in-out infinite alternate;
}

.lumi-fluid-blob.blob-2 {
    width: calc(var(--lumi-size, 360px) * 0.76);
    height: calc(var(--lumi-size, 360px) * 0.76);
    background: radial-gradient(circle at 55% 55%, rgba(52, 211, 153, 0.42) 0%, rgba(16, 185, 129, 0.22) 55%, transparent 80%);
    filter: blur(calc(var(--lumi-size, 360px) * 0.065));
    animation: lumiBlobMorph2 13s ease-in-out infinite alternate;
}

.lumi-fluid-blob.blob-3 {
    width: calc(var(--lumi-size, 360px) * 0.61);
    height: calc(var(--lumi-size, 360px) * 0.61);
    background: radial-gradient(circle at 50% 35%, rgba(167, 243, 208, 0.55) 0%, rgba(49, 170, 100, 0.3) 45%, transparent 70%);
    filter: blur(calc(var(--lumi-size, 360px) * 0.035));
    animation: lumiBlobMorph3 8s ease-in-out infinite alternate;
}

@keyframes lumiBlobMorph1 {
    0% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: rotate(0deg) scale(0.95);
        opacity: 0.7;
    }
    33% {
        border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
        transform: rotate(120deg) scale(1.08);
        opacity: 0.95;
    }
    66% {
        border-radius: 30% 70% 70% 30% / 50% 30% 70% 50%;
        transform: rotate(240deg) scale(0.98);
        opacity: 0.8;
    }
    100% {
        border-radius: 58% 42% 38% 62% / 42% 65% 35% 58%;
        transform: rotate(360deg) scale(1.05);
        opacity: 0.85;
    }
}

@keyframes lumiBlobMorph2 {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(360deg) scale(1.04);
        opacity: 0.6;
    }
    50% {
        border-radius: 35% 65% 60% 40% / 40% 55% 45% 60%;
        transform: rotate(180deg) scale(0.92);
        opacity: 0.88;
    }
    100% {
        border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
        transform: rotate(0deg) scale(1.06);
        opacity: 0.65;
    }
}

@keyframes lumiBlobMorph3 {
    0% {
        border-radius: 50% 50% 65% 35% / 35% 65% 35% 65%;
        transform: rotate(0deg) scale(0.9);
        opacity: 0.75;
    }
    50% {
        border-radius: 65% 35% 40% 60% / 60% 40% 60% 40%;
        transform: rotate(-180deg) scale(1.12);
        opacity: 1;
    }
    100% {
        border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
        transform: rotate(-360deg) scale(0.94);
        opacity: 0.8;
    }
}

/* 3. Sanft expandierende, flüssige Lichtwellen */
.lumi-fluid-wave {
    position: absolute;
    width: calc(var(--lumi-size, 360px) * 0.53);
    height: calc(var(--lumi-size, 360px) * 0.53);
    border: 2px solid rgba(74, 255, 170, 0.45);
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    filter: blur(calc(var(--lumi-size, 360px) * 0.01));
    pointer-events: none;
    animation: lumiWaveMorph 6.5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
    transition: border-color 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
}

.lumi-fluid-wave.wave-2 {
    animation-delay: 3.25s;
}

@keyframes lumiWaveMorph {
    0% {
        transform: scale(0.85) rotate(0deg);
        opacity: 0.75;
        border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    }
    50% {
        opacity: 0.35;
        border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    }
    100% {
        transform: scale(1.9) rotate(180deg);
        opacity: 0;
        border-radius: 60% 40% 55% 45% / 50% 50% 45% 55%;
    }
}

/* 4. Sanft fließender Lichtschimmer um den Ring */
.lumi-fluid-sweep {
    position: absolute;
    width: calc(var(--lumi-size, 360px) * 0.83);
    height: calc(var(--lumi-size, 360px) * 0.83);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(74, 255, 170, 0.22) 50deg,
        transparent 100deg,
        rgba(49, 170, 100, 0.15) 190deg,
        transparent 250deg,
        rgba(74, 255, 170, 0.25) 310deg,
        transparent 360deg
    );
    filter: blur(calc(var(--lumi-size, 360px) * 0.055));
    pointer-events: none;
    animation: lumiSweepSpin 14s linear infinite;
    transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
}

@keyframes lumiSweepSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 5. Zentrales Logo-Element */
.lumi-logo-wrap {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Das eigentliche grüne Lumi-Ring-Logo */
.lumi-hero-logo {
    position: relative;
    width: calc(var(--lumi-size, 360px) * 0.485);
    height: calc(var(--lumi-size, 360px) * 0.485);
    object-fit: contain;
    filter: 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.055) rgba(74, 255, 170, 0.9)) 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.125) rgba(49, 170, 100, 0.7)) 
        drop-shadow(0 calc(var(--lumi-size, 360px) * 0.033) calc(var(--lumi-size, 360px) * 0.066) rgba(0, 0, 0, 0.5));
    animation: lumiRingFloat 5s ease-in-out infinite alternate;
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lumiRingFloat {
    0% {
        transform: translateY(0px) scale(0.98);
        filter: 
            drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.044) rgba(74, 255, 170, 0.8)) 
            drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.105) rgba(49, 170, 100, 0.6)) 
            drop-shadow(0 calc(var(--lumi-size, 360px) * 0.028) calc(var(--lumi-size, 360px) * 0.055) rgba(0, 0, 0, 0.45));
    }
    100% {
        transform: translateY(calc(var(--lumi-size, 360px) * -0.022)) scale(1.03);
        filter: 
            drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.077) rgba(74, 255, 170, 1)) 
            drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.166) rgba(49, 170, 100, 0.85)) 
            drop-shadow(0 calc(var(--lumi-size, 360px) * 0.044) calc(var(--lumi-size, 360px) * 0.083) rgba(0, 0, 0, 0.6));
    }
}

/* ── Hover- & Interaktions-Effekte ── */
.lumi-logo-container:not(.non-interactive):hover {
    transform: translateY(calc(var(--lumi-size, 360px) * -0.01));
}

.lumi-logo-container:not(.non-interactive):hover .lumi-hero-logo {
    transform: translateY(calc(var(--lumi-size, 360px) * -0.038)) scale(1.1) rotate(3deg);
    filter: 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.083) rgba(74, 255, 170, 1)) 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.18) rgba(49, 170, 100, 0.95)) 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.3) rgba(74, 255, 170, 0.6)) 
        drop-shadow(0 calc(var(--lumi-size, 360px) * 0.061) calc(var(--lumi-size, 360px) * 0.116) rgba(0, 0, 0, 0.75));
}

.lumi-logo-container:not(.non-interactive):hover .lumi-fluid-aura {
    transform: scale(1.35);
    opacity: 1;
    filter: blur(calc(var(--lumi-size, 360px) * 0.08));
}

.lumi-logo-container:not(.non-interactive):hover .blob-1 {
    transform: scale(1.22) rotate(45deg);
    opacity: 1;
    filter: blur(calc(var(--lumi-size, 360px) * 0.033));
}

.lumi-logo-container:not(.non-interactive):hover .blob-2 {
    transform: scale(1.26) rotate(-60deg);
    opacity: 0.95;
    filter: blur(calc(var(--lumi-size, 360px) * 0.05));
}

.lumi-logo-container:not(.non-interactive):hover .blob-3 {
    transform: scale(1.3) rotate(90deg);
    opacity: 1;
    filter: blur(calc(var(--lumi-size, 360px) * 0.028));
}

.lumi-logo-container:not(.non-interactive):hover .lumi-fluid-wave {
    border-color: rgba(110, 255, 180, 0.85);
    box-shadow: 0 0 calc(var(--lumi-size, 360px) * 0.07) rgba(74, 255, 170, 0.7);
    filter: blur(calc(var(--lumi-size, 360px) * 0.006));
}

.lumi-logo-container:not(.non-interactive):hover .lumi-fluid-sweep {
    transform: scale(1.18);
    opacity: 0.95;
    filter: blur(calc(var(--lumi-size, 360px) * 0.04));
}

/* Klick-Impuls beim Drücken */
.lumi-logo-container:not(.non-interactive):active .lumi-hero-logo {
    transform: translateY(calc(var(--lumi-size, 360px) * -0.011)) scale(0.96);
    transition: transform 0.15s ease;
}

.lumi-logo-container:not(.non-interactive):active .lumi-fluid-aura {
    transform: scale(1.15);
    transition: transform 0.15s ease;
}

/* ==========================================================================
   LIGHT MODE ANPASSUNGEN (data-theme="light")
   ========================================================================== */
html[data-theme="light"] .lumi-fluid-aura {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.25) 0%, rgba(49, 170, 100, 0.12) 50%, transparent 75%);
}

html[data-theme="light"] .lumi-fluid-blob.blob-1 {
    background: radial-gradient(circle at 45% 45%, rgba(74, 222, 128, 0.35) 0%, rgba(49, 170, 100, 0.18) 50%, transparent 75%);
}

html[data-theme="light"] .lumi-fluid-blob.blob-2 {
    background: radial-gradient(circle at 55% 55%, rgba(52, 211, 153, 0.3) 0%, rgba(16, 185, 129, 0.15) 55%, transparent 80%);
}

html[data-theme="light"] .lumi-fluid-blob.blob-3 {
    background: radial-gradient(circle at 50% 35%, rgba(167, 243, 208, 0.4) 0%, rgba(49, 170, 100, 0.2) 45%, transparent 70%);
}

html[data-theme="light"] .lumi-hero-logo {
    filter: 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.042) rgba(74, 222, 128, 0.65)) 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.083) rgba(49, 170, 100, 0.4)) 
        drop-shadow(0 calc(var(--lumi-size, 360px) * 0.022) calc(var(--lumi-size, 360px) * 0.05) rgba(0, 0, 0, 0.12));
}

html[data-theme="light"] .lumi-logo-container:not(.non-interactive):hover .lumi-hero-logo {
    filter: 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.07) rgba(74, 222, 128, 0.85)) 
        drop-shadow(0 0 calc(var(--lumi-size, 360px) * 0.14) rgba(49, 170, 100, 0.6)) 
        drop-shadow(0 calc(var(--lumi-size, 360px) * 0.038) calc(var(--lumi-size, 360px) * 0.077) rgba(0, 0, 0, 0.18));
}