.falling-leaf {
    width: 160px;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    will-change: transform, opacity;

    /* Zamiast sztywnych 5s, warto przekazać czas z JS lub ustawić optymalny czas */
    animation: fallingLeaf 4s ease-out forwards;
}

#container {
    min-height: 300px;
    min-width: 100%;
    color: #ffffff;
}

.flipped {
    scale: -1 1;
}

@keyframes fallingLeaf {
    /* 0%: Start nad ekranem / w miejscu kursora */
    0% {
        opacity: 1;
        transform: translate(calc(var(--startX) - 30px), calc(var(--startY) - 50px)) rotate(0deg);
    }

    /* 30%: Pierwsze bujnięcie w prawo + lekki spadek w dół */
    30% {
        opacity: 1;
        transform: translate(calc(var(--startX) + 30px), calc(var(--startY) + 100px)) rotate(15deg);
    }

    /* 60%: Bujnięcie w lewo + dalszy spadek */
    60% {
        opacity: 1;
        transform: translate(calc(var(--startX) - 30px), calc(var(--startY) + 250px)) rotate(-15deg);
    }

    /* 85%: ZATRZYMANIE SPADANIA (Lądowanie) */
    85% {
        opacity: 1;
        transform: translate(var(--startX), calc(var(--startY) + 350px)) rotate(5deg);
    }

    /* 100%: SZYBKIE ZNIKANIE w miejscu zatrzymania */
    100% {
        opacity: 0;
        transform: translate(var(--startX), calc(var(--startY) + 350px)) rotate(5deg);
    }
}