/*static\base\animation\ffa500_backroundfly.css */
/* Grundstil für den Hintergrund */
body.background-animated {
    overflow: hidden;
    position: relative;
    /* Notwendig für absolute Positionierung der Balken */
}

/* Grundlegende Stile für die Rechtecke */
.background-rectangle {
    position: absolute;
    background-color: #ffa500cc;
    bottom: -30vh;
    /* Start etwas außerhalb des Bildschirms */
    left: -20vw;
    /* Start links außerhalb des Bildschirms */
    opacity: 0;
    animation: flyIn 0.5s ease-out forwards;
    z-index: -10;
    /* Hintergrund-Ebene */
}

/* Verschiedene Größen und Animationen für die Balken */
.background-rectangle:nth-child(1) {
    width: 40vw;
    /* Mittelgroß */
    height: 25vh;
    transform: rotate(-50deg);
    animation-delay: 0s;
    animation-name: flyIn1;
}

.background-rectangle:nth-child(2) {
    width: 60vw;
    /* Am längsten */
    height: 25vh;
    transform: rotate(-50deg);
    animation-delay: 0s;
    animation-name: flyIn2;
}

.background-rectangle:nth-child(3) {
    width: 20vw;
    height: 25vh;
    transform: rotate(-50deg);
    animation-delay: 0s;
    animation-name: flyIn3;
}

.background-rectangle:nth-child(4) {
    width: 80vw;
    height: 25vh;
    transform: rotate(-50deg);
    animation-delay: 0s;
    animation-name: flyIn4;
}



/* Keyframe-Animationen für unterschiedliche Endpositionen */

/* Balken 1: Linker Balken */
@keyframes flyIn1 {
    0% {
        transform: translate(0, 0) rotate(-30deg);
        opacity: 0;
    }

    100% {
        transform: translate(35vw, -20vh) rotate(-70deg);
        /* Endposition etwas nach rechts oben */
        opacity: 1;
    }
}

/* Balken 2: Mittlerer Balken */
@keyframes flyIn2 {
    0% {
        transform: translate(0, 0) rotate(-30deg);
        opacity: 0;
    }

    100% {
        transform: translate(45vw, -25vh) rotate(-70deg);
        /* Mehr nach rechts und etwas höher */
        opacity: 1;
    }
}

/* Balken 3: Rechter Balken */
@keyframes flyIn3 {
    0% {
        transform: translate(0, 0) rotate(-30deg);
        opacity: 0;
    }

    100% {
        transform: translate(25vw, -15vh) rotate(-70deg);
        /* Weniger nach rechts und weniger hoch */
        opacity: 1;
    }
}

@keyframes flyIn4 {
    0% {
        transform: translate(0, 0) rotate(-30deg);
        opacity: 0;
    }

    100% {
        transform: translate(57vw, -40vh) rotate(-70deg);
        opacity: 1;
    }
}