/* =================================================================== */
/* DATEI: splash-animation.css                                        */
/* ------------------------------------------------------------------- */
/* Vereinfachte Version ohne Logik zum Überspringen.                  */
/* =================================================================== */

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #111111;
    z-index: 9999;
    display: grid;
    place-items: center;
    opacity: 1;
    /* Die Transition für das finale Ausblenden. */
    transition: opacity 1s ease-in-out; 
    perspective: 800px;
}

#splash-logo-svg {
    width: 250px; 
    height: auto;
    overflow: visible; 
    /* Die Transition für das finale Schrumpfen und Verschieben. */
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
}
.socialchat-text-splash {
    opacity: 0;
    /* Diese Animation hat 2s Verzögerung und funktioniert bereits */
    animation: fade-in-text 1s forwards 2s;
}

/* ===================================================================== */
/* KEYFRAMES UND ANIMATIONEN (unverändert)                             */
/* ===================================================================== */

@keyframes interlock-green-3d {
    0% {
        transform: translateX(-400px) rotateY(90deg) rotateZ(90deg);
        opacity: 0;
    }
    100% {
        transform: translateX(-10px) translateY(0px) rotateY(0deg) rotateZ(10deg);
        opacity: 1;
    }
}

@keyframes interlock-violet-3d {
    0% {
        transform: translateX(400px) rotateY(-90deg) rotateZ(-90deg);
        opacity: 0;
    }
    100% {
        transform: translateX(60px) translateY(-3px) rotateY(0deg) rotateZ(180deg);
        opacity: 1;
    }
}

@keyframes fade-in-text {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ------------------------------------------------------------------- */
/* KORREKTUR (03.11.25): Robuster Firefox-Rendering-Fix
Wir setzen die 'opacity: 0' explizit als Standard-Stil, 
bevor die Animation beginnt. */
#gear-green, #gear-violet {
    transform-origin: center;
    transform-box: fill-box;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out; 
    opacity: 0; /* NEU: Setzt den Startzustand für Firefox */
}

/* Die Verzögerung von 0.2s (statt 0.1s) gibt Firefox
garantiert Zeit, die 'opacity: 0' zu rendern, bevor 
die 3-Sekunden-Animation startet. */
#gear-green {
    filter: drop-shadow(0 0 7px #39FF14) drop-shadow(0 0 15px #39FF14);
    animation-name: interlock-green-3d;
    animation-delay: 0.2s; /* Firefox-Fix (erhöht) */
}
#gear-violet {
    filter: drop-shadow(0 0 7px #9D00FF) drop-shadow(0 0 15px #9D00FF);
    animation-name: interlock-violet-3d;
    animation-delay: 0.2s; /* Firefox-Fix (erhöht) */
}
/* ------------------------------------------------------------------- */


/* ===================================================================== */
/* ZIEL-ZUSTAND: Wenn die .animate-out Klasse hinzugefügt wird          */
/* ===================================================================== */

#splash-screen.animate-out {
    opacity: 0;
    pointer-events: none;
}

#splash-screen.animate-out #splash-logo-svg {
    width: 40px;
    transform: translate(calc(-50vw + 35px), calc(-50vh + 27.5px));
}