/* Animation keyframes for overlay fade-out */
@keyframes fade-out-overlay {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Animation: white <-> yellow color cycling */
@keyframes star-color-cycle {

    0%,
    100% {
        filter: sepia(0%) saturate(100%) brightness(1);
        transform: scale(1);
    }

    50% {
        filter: sepia(100%) saturate(500%) brightness(1.2);
        transform: scale(1.50);
    }
}

/* Animation: smooth flicker with easing */
@keyframes star-flicker {

    0%,
    45% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    55%,
    100% {
        opacity: 1;
    }
}

/* === Shooting Stars Animationen mit 60s Intervall === */

/* Alle Shooting Stars: gemeinsame Grundeigenschaften */
.shooting-fast-high,
.shooting-short-right,
.shooting-long-oblique,
.shooting-diagonal-fade,
.shooting-trailing {
    animation-duration: 60s;
    /* Gesamtzyklus: 1 Minute */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* endlose Wiederholung */
    animation-fill-mode: forwards;
    animation-play-state: running;
}


/* === Einzelne Animationen mit sichtbarer Phase 0–8% und langer Pause === */

.shooting-fast-high {
    animation-name: shooting-fast-high;
}

@keyframes shooting-fast-high {
    0% {
        transform: translate(10vw, 20vh);
        opacity: 0;
    }

    1%,
    10% {
        opacity: 1;
    }

    12% {
        transform: translate(-80vw, 80vh);
        opacity: 0;
    }

    12.001%,
    100% {
        transform: translate(-80vw, 80vh);
        opacity: 0;
    }
}

.shooting-short-right {
    animation-name: shooting-short-right;
}

@keyframes shooting-short-right {
    0% {
        transform: translate(30vw, 30vh);
        opacity: 0;
    }

    2%,
    10% {
        opacity: 1;
    }

    14% {
        transform: translate(-40vw, 0vh);
        opacity: 0;
    }

    14.001%,
    100% {
        transform: translate(-40vw, 0vh);
        opacity: 0;
    }
}

.shooting-long-oblique {
    animation-name: shooting-long-oblique;
}

@keyframes shooting-long-oblique {
    0% {
        transform: translate(0vw, 0vh);
        opacity: 0;
    }

    4%,
    14% {
        opacity: 1;
    }

    18% {
        transform: translate(-130vw, 100vh);
        opacity: 0;
    }

    18.001%,
    100% {
        transform: translate(-130vw, 100vh);
        opacity: 0;
    }
}

.shooting-diagonal-fade {
    animation-name: shooting-diagonal-fade;
}

@keyframes shooting-diagonal-fade {
    0% {
        transform: translate(0vw, 0vh);
        opacity: 0;
    }

    3%,
    12% {
        opacity: 1;
    }

    16% {
        transform: translate(-80vw, 40vh);
        opacity: 0;
    }

    16.001%,
    100% {
        transform: translate(-80vw, 40vh);
        opacity: 0;
    }
}

.shooting-trailing {
    animation-name: shooting-trailing;
}

@keyframes shooting-trailing {
    0% {
        transform: translate(0vw, 0vh);
        opacity: 0;
    }

    5%,
    15% {
        opacity: 1;
    }

    20% {
        transform: translate(-130vw, 120vh);
        opacity: 0;
    }

    20.001%,
    100% {
        transform: translate(-130vw, 120vh);
        opacity: 0;
    }
}

@keyframes earth-zoom-in {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    100% {
        width: 125vh;
        height: 125vh;
        opacity: 1;
    }
}

@keyframes logo-fly-in-out {
    0% {
        left: 120vw;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40%,
    60%,
    100% {
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /*    90% {
        opacity: 1;
    }

    100% {
        left: -120vw;
        opacity: 0;
    }*/

}

@keyframes logo-glow-opacity {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.2;
    }

    40% {
        opacity: 0.5;
    }

    50%,
    100% {
        opacity: 0.7;
    }

    /* Max in der Mitte */
    /*    60% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
    }*/
}