/* ...... Blob Floater ...... */
/* .......................... */
.blob-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
/* Wrapper für float-animation */
.blob-wrapper {
    position: absolute;
    width: 200px;
    height: 400px;
    animation: float 20s ease-in-out infinite alternate;
}
/* Eigentlicher Blob: nur Parallax durch JS */
.blob {
    width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    border-radius: 48% 52% 50% 50% / 71% 71% 29% 29%;
    filter: blur(80px);
    opacity: 0.6;
    mix-blend-mode: screen;
    position: absolute;
    top: 0;
    left: 0;
}
.float-blue {
    top: 5%;
    left: -5%;
    width: 200px;
    height: 600px;
    animation-delay: 0s;
}
.float-blue2 {
    top: 25%;
    left: 15%;
    width: 200px;
    height: 400px;
    animation-delay: 1s;
}
.float-pink {
    top: 5%;
    left: 60%;
    width: 200px;
    height: 400px;
    animation-delay: 4s;
}
.float-pink2 {
    top: 40%;
    left: 60%;
    width: 200px;
    height: 400px;
    animation-delay: 2s;
}
.float-pink3 {
    top: 50%;
    left: 40%;
    width: 200px;
    height: 400px;
    animation-delay: 4s;
}
.blob-blue {
    background: #63b23c;
}
.blob-blue2 {
    background: #00BEFF;
}
.blob-pink {
    background: #00bd56;
}
.blob-pink2 {
    background: #63b23c;
}
.blob-pink3 {
    background: #00BEFF;
}
/*
@keyframes definiert eine CSS-Animation, die zwischen verschiedenen Zwischenzuständen (Keyframes) über eine bestimmte Zeitdauer interpoliert.
0% (Start): Das Element ist an seiner normalen Position (kein Versatz).
50% (Mitte der Animation): Das Element ist (X) und (Y) verschoben.
100% (Ende): Das Element ist (X) und (Y) verschoben.
*/
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(400px, -30px) rotate(-45deg);
    }
    100% {
        transform: translate(-30px, 200px) rotate(45deg);
    }
}

/* ...... Udo in Space ...... */
/* .......................... */

/* Funktion für zufällige Sterne (Positionen mit box-shadow simuliert) */
/* Drei Layer von Sternen mit unterschiedlicher Dichte */
/* Sternenlayer mit unterschiedlicher Geschwindigkeit */
#stars, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    box-shadow: 130px 130px #FFF; /* wird per JS gesetzt; */
}
#stars {
    width: 0.1%;
    height: 0.1%;
    animation: animStar 50s linear infinite;
}

#stars2 {
    width: 2px;
    height: 2px;
    animation: animStar 100s linear infinite;
}

#stars3 {
    width: 3px;
    height: 3px;
    animation: animStar 150s linear infinite;
}


/* horizon-Objekt: Lichtschein und Farbverlauf am unteren Bildrand */
#horizon {
    position: absolute;
    width: 160%;
    height: 70%;
    border-radius: 100%/100%;
    background: #038bff;
    filter: blur(30px);
    left: 50%;
    bottom: -50%;
    margin-left: -80%;
}
/* Inneres Leuchten */
#horizon:before {
    content: " ";
    position: absolute;
    width: 81.25%;
    height: 70%;
    border-radius: 100%/100%;
    background: #51AFFF;
    filter: blur(30px);
    opacity: 0.6;
    margin-left: 9.375%;
}
/* Helleres Zentrum */
#horizon:after {
    content: " ";
    position: absolute;
    width: 32%;
    height: 20%;
    border-radius: 650px/350px;
    background: #B0DAFF;
    filter: blur(30px);
    opacity: 0.5;
    margin-left: 34%;
}
/* Blaue Leuchtkorona */
#horizon .glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%/100%;
    background: #215496;
    filter: blur(200px);
    opacity: 0.7;
    top: -10%;
}

/* ERDE-Objekt: große dunkle Kugel, die von unten „hochkommt" */
#earth {
    position: absolute;
    width: 200%;
    height: 100%;
    background: black;
    /* border-radius: 100%/100%; */
    border-radius: 50% 50% 0 0;
    left: 50%;
    bottom: -80%;
    margin-left: -100%;
}
    /* Innerer Schein */
    #earth:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100% / 100%;
    box-shadow: inset 0 0 62px 20px rgba(60, 105, 138, 0.85);
    }
    /* Horizontale Abdunklung */
    #earth:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100% / 100%;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
    }

#flyingudo {
    animation: animStar 50s linear infinite;
}

/* Bewegung der Sterne nach oben (loop) */
@keyframes animStar {
    from {
    transform: translateY(0);
    }
    to {
    transform: translateY(-2000px);
    }
}


@keyframes ellipse {
    0% {top: 10%;   left: -25%;}
    /* 20% { top: 15%;  left: 60%;} */
    40% {top: 21%;  left: 28%;}
    /* 60% {top: 55%;  left: 80%;} */
    /* 90% {top: 25%;  left: 90%;} */
    100% {top: 30%;  left: 105%;}
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-10deg); }
50% { transform: translateY(-45px) rotate(20deg); }
}
.ani-ellipse {
    animation: ellipse 20s linear infinite alternate,
    float 9s ease-in-out infinite;
}
.ani-none {
    animation: ellipse 600s linear infinite;
}