/* =========================================================
   GeFB – Animiertes Vereinslogo (Hero, index.php)
   Nutzt assets/images/logo.svg (inline eingebunden)
   ========================================================= */

.gefb-logo {
    /* Quelle für die Shine-Maske. MUSS hier stehen, nicht als style="" im
       Markup: relative url() in Custom Properties löst Chrome gegen das
       Stylesheet auf, in dem das var() benutzt wird -- also gegen
       assets/css/. Inline gesetzt ergab das assets/css/assets/images/logo.svg
       (404 -> nginx lieferte index.php als "Bild" zurück). */
    --gefb-logo-src: url('../images/logo.svg');

    position: relative;
    width: clamp(12rem, 36vw, 24rem);
    aspect-ratio: 1 / 1;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Ausgangszustand nur setzen, wenn JS aktiv ist (Failsafe ohne JS) */
/* perspective() gehört in den Transform selbst: die perspective-Eigenschaft
   auf .gefb-logo wirkt nur auf die Kinder (den Tilt-Layer), nicht auf das
   Element selbst -- ohne sie wäre rotateY hier nur ein flaches Stauchen. */
.gefb-js .gefb-logo {
    opacity: 0;
    transform: perspective(1200px) translateY(40px) scale(0.86) rotateY(-22deg);
}

/* Startet, sobald der Preloader durch ist (body.gefb-ready) */
.gefb-ready .gefb-logo {
    animation: gefbLogoEnter 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gefbLogoEnter {
    from { opacity: 0; transform: perspective(1200px) translateY(40px) scale(0.86) rotateY(-22deg); }
    to   { opacity: 1; transform: perspective(1200px) translateY(0)    scale(1)    rotateY(0deg); }
}

/* --- Ebene 1: 3D-Neigung per Maus (JS setzt --rx / --ry) --- */
.gefb-logo__tilt {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

/* --- Ebene 2: sanftes Schweben --- */
.gefb-logo__float {
    position: absolute;
    inset: 0;
    animation: gefbFloat 7s ease-in-out 1.1s infinite;
}

@keyframes gefbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* --- Das SVG selbst --- */
.gefb-logo svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}

/* Farbgruppen des Logos nacheinander einblenden.

   WICHTIG: Auf den <g>-Gruppen darf NUR fill-opacity animiert werden.
   Sobald hier opacity, transform oder filter animiert wird, hebt Chrome
   jede Gruppe auf einen eigenen Compositing-Layer. Die Pfade liegen in der
   Koordinatenwelt des äußeren <g transform="translate(0,2814) scale(0.1,-0.1)">
   und das Logo steckt zusätzlich in einem animierten 3D-Stack (perspective +
   __tilt + __float). Chrome berechnet die Layer-Bounds dann falsch: das Logo
   wurde zu einem schwarzen Halbkreis zerschnitten, Weiß und Gelb fehlten ganz.
   fill-opacity wird nicht compositet -> normaler Repaint -> korrekt.
   Getestet: identische Darstellung wie das statische SVG. */
.gefb-js .gefb-logo svg > g > g {
    fill-opacity: 0;
}

.gefb-ready .gefb-logo svg > g > g {
    animation: gefbPartIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gefb-ready .gefb-logo svg > g > g:nth-child(1) { animation-delay: 0.10s; }
.gefb-ready .gefb-logo svg > g > g:nth-child(2) { animation-delay: 0.22s; }
.gefb-ready .gefb-logo svg > g > g:nth-child(3) { animation-delay: 0.34s; }
.gefb-ready .gefb-logo svg > g > g:nth-child(4) { animation-delay: 0.46s; }
.gefb-ready .gefb-logo svg > g > g:nth-child(5) { animation-delay: 0.58s; }

@keyframes gefbPartIn {
    from { fill-opacity: 0; }
    to   { fill-opacity: 1; }
}

/* --- Lichtreflex, der über das Logo wandert (per Maske) --- */
.gefb-logo__shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    background-image: linear-gradient(
        115deg,
        transparent 42%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 237, 0, 0.55) 54%,
        transparent 62%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--gefb-logo-src);
            mask-image: var(--gefb-logo-src);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.gefb-ready .gefb-logo__shine {
    animation: gefbShine 5.5s ease-in-out 1.4s infinite;
}

@keyframes gefbShine {
    0%       { background-position: 160% 0; opacity: 0; }
    12%      { opacity: 1; }
    45%, 100% { background-position: -60% 0; opacity: 0; }
}

/* --- Leuchtender Halo hinter dem Logo --- */
.gefb-logo__halo {
    position: absolute;
    inset: -18%;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 237, 0, 0.22) 0%,
        rgba(0, 39, 73, 0.28) 45%,
        transparent 70%
    );
    opacity: 0;
}

.gefb-ready .gefb-logo__halo {
    animation: gefbHalo 5s ease-in-out 0.9s infinite;
}

@keyframes gefbHalo {
    0%, 100% { opacity: 0.45; transform: scale(0.94); }
    50%      { opacity: 0.9;  transform: scale(1.06); }
}

/* --- Hover: kräftigerer Schein --- */
.gefb-logo:hover svg {
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 26px rgba(255, 237, 0, 0.45));
}

.gefb-logo svg { transition: filter 0.4s ease; }

/* --- Barrierefreiheit: Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce) {
    .gefb-js .gefb-logo { opacity: 1; transform: none; }
    .gefb-js .gefb-logo svg > g > g { fill-opacity: 1; }

    .gefb-ready .gefb-logo,
    .gefb-ready .gefb-logo svg > g > g,
    .gefb-ready .gefb-logo__shine,
    .gefb-ready .gefb-logo__halo,
    .gefb-logo__float { animation: none; }

    .gefb-logo__tilt { transition: none; transform: none; }
    .gefb-logo__halo { opacity: 0.5; }
}