/* ============================================================
   TITO.TRADE – GooeyNav (Vanilla-Port, React-Bits)
   Gooey-Pill + Blasen um den aktiven Nav-Link.
   Farben via SITE_CONFIG.gooeyNav.colors -> --gooey-color-N
   ============================================================ */

:root {
    --gooey-ease: linear(
        0, 0.068, 0.19 2.7%, 0.804 8.1%, 1.037, 1.199 13.2%, 1.245,
        1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, 0.996 28%,
        0.949, 0.928 33.3%, 0.926, 0.933 36.8%, 1.001 45.6%, 1.013,
        1.019 50.8%, 1.018 54.4%, 1 63.1%, 0.995 68%, 1.001 85%, 1
    );
    /* Farbindizes (1-4) der Blasen – auf TITO-Palette gemappt */
    --gooey-color-1: var(--color-accent);        /* Neonweiß */
    --gooey-color-2: #fbffff;                    /* Neonweiß */
    --gooey-color-3: #fbffff;                    /* Neonweiß */
    --gooey-color-4: var(--color-text);          /* Weiss */
}

.gooey-nav-container { position: relative; }

.gooey-nav-container nav {
    display: flex;
    position: relative;
    z-index: 3; /* echte Nav-Links ueber der Gooey-Pill */
    transform: translate3d(0, 0, 0.01px);
}

.gooey-nav-container nav ul {
    display: flex;
    gap: 0.4em;
    list-style: none;
    margin: 0;
    position: relative;
    z-index: 3;
}

.gooey-nav-container nav ul li {
    border-radius: 100vw;
    position: relative;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 0 0.5px 1.5px transparent;
}

.gooey-nav-container nav ul li a {
    display: inline-block;
    padding: 0.6em 1em;
}

.gooey-nav-container nav ul li:focus-within:has(:focus-visible) {
    box-shadow: 0 0 0.5px 1.5px var(--color-accent);
}

/* Weisse Pill hinter dem aktiven Link: nur die Filter-Ebene zeichnet
   (auf den gemessenen Link erweitert, damit der Rahmen den Text voll abdeckt) */
.gooey-nav-container nav ul li::after { display: none; }

.gooey-nav-container nav ul li.active { color: #0a0b10; }
.gooey-nav-container nav ul li.active .nav-link { color: #0a0b10; }

/* ---------- Effekt-Ebenen ---------- */
.gooey-nav-container .effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    z-index: 1;
}

/* Text-Spiegel: exakt ueber der Pill, gleicher Font wie der Link */
.gooey-nav-container .effect.text {
    color: var(--color-text-muted);
    font-weight: 600;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    z-index: 2;
}

.gooey-nav-container .effect.text.active { color: #0a0b10; }

/* Gooey-Filter-Ebene: SVG-Alpha-Filter (kein Backdrop noetig) */
.gooey-nav-container .effect.filter {
    filter: url(#goo-filter);
}

.gooey-nav-container .effect.filter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    transform: scale(0);
    opacity: 0;
    z-index: -1;
    border-radius: 100vw;
}
/* Fokus-Ring am li bleibt sichtbar */

.gooey-nav-container .effect.filter.active::after {
    animation: gooey-pill 0.3s ease both;
}

@keyframes gooey-pill {
    to { transform: scale(1); opacity: 1; }
}

/* ---------- Partikel ---------- */
.gooey-nav-container .particle,
.gooey-nav-container .point {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transform-origin: center;
}

.gooey-nav-container .particle {
    --time: 5s;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    animation: gooey-particle calc(var(--time)) ease 1 -350ms;
}

.gooey-nav-container .point {
    background: var(--color);
    opacity: 1;
    animation: gooey-point calc(var(--time)) ease 1 -350ms;
}

@keyframes gooey-particle {
    0% {
        transform: rotate(0deg) translate(var(--start-x), var(--start-y));
        opacity: 1;
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    70% {
        transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
        opacity: 1;
        animation-timing-function: ease;
    }
    85% {
        transform: rotate(calc(var(--rotate) * 0.66)) translate(var(--end-x), var(--end-y));
        opacity: 1;
    }
    100% {
        transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
        opacity: 1;
    }
}

@keyframes gooey-point {
    0% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    25% { transform: scale(calc(var(--scale) * 0.25)); }
    38% { opacity: 1; }
    65% { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease; }
    85% { transform: scale(var(--scale)); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* Reduced Motion: keine Blasen, nur die Pill */
@media (prefers-reduced-motion: reduce) {
    .gooey-nav-container .particle { display: none; }
}

html.no-motion .gooey-nav-container .particle { display: none; }
html.no-motion .gooey-nav-container .effect.filter { filter: none; }