@keyframes fall-from-ceiling {
    0% {
        transform: translateY(-1000px);
    }

    100% {
        transform: translateY(-250px) rotate(720deg);
    }
}

.fall-n-spin {
    position: absolute;
    transform: translateY(-1000px);
    animation: fall-from-ceiling 0.5s linear forwards;
    animation-delay: 0.5s;
}

@keyframes charge {
    0% {
        transform: scale(1) translate(0%, 0%);
    }

    100% {
        transform: scale(3) translate(0%, 25%);
    }
}

.charge-forward {
    animation: charge 0.5s forwards;
    transform: scale(1) translate(0%, 0%);
    animation-delay: 1s;
}

@keyframes turn {
    100% {
        transform: rotate(360deg);
        transform-origin: left top;
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg) translate(-200%, 0%);
    }

    100% {
        transform: rotate(360deg) translate(-200%, 0%);
    }
}

.spin-formation {
    position: absolute;
    z-index: 1 !important;
    height: 40vh !important;
    width: auto;
    transform-origin: center center;
    animation: clockwise 4s infinite linear;
}

@keyframes flap-to-ceiling {
    0% {
        transform: none;
    }

    100% {
        transform: translateY(-1000px);
    }
}

.flap {
    /* position: absolute; */
    /* transform: translateY(-1000px); */
    animation: flap-to-ceiling 4s linear forwards;
    animation-delay: 0.5s;
}

@keyframes spinAndMove {
  0% {
    transform: translateX(100vw) rotate(0deg); /* Start at the right, no rotation */
  }
  100% {
    transform: translateX(100px) rotate(-720deg); /* Move left across viewport, spin twice */
  }
}

.spin-right-to-left {
    transform: translate(100vw, 0%);
    animation: spinAndMove 0.6s linear forwards;
    animation-delay: 0.5s;
}