#petal-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allows you to click things behind the petals */
        z-index: 9999; /* Keeps petals on top of everything */
        overflow: hidden;
    }

    .petal {
        position: absolute;
        top: -50px;
        background-size: contain;
        background-repeat: no-repeat;
        animation: fall linear forwards;
    }

   @keyframes fall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        /* This creates the 'sway' mid-fall */
        transform: translateY(25vh) translateX(var(--sway)) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--sway) * -1)) rotate(180deg);
    }
    75% {
        transform: translateY(75vh) translateX(var(--sway)) rotate(270deg);
    }
    100% {
        transform: translateY(105vh) translateX(var(--drift)) rotate(var(--rotation));
        opacity: 0.6;
    }
}

/* The Clover Shape */
.clover-leaf {
    background: radial-gradient(circle at 30% 30%, #2ecc71, #27ae60);
    border-radius: 50% 50% 0 50%;
    transform-origin: center;
}

.clover-leaf::before, .clover-leaf::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

.clover-leaf::before {
    transform: rotate(90deg);
}

.clover-leaf::after {
    transform: rotate(180deg);
}

/* Add a fourth leaf */
.clover-leaf-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(270deg);
}

/* The Realistic Fall Animation */
@keyframes fallRealistic {
    0% {
        transform: translateY(0) translateX(0) rotate3d(0, 0, 0, 0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    33% {
        transform: translateY(33vh) translateX(40px) rotate3d(1, 0.5, 0, 120deg);
    }
    66% {
        transform: translateY(66vh) translateX(-40px) rotate3d(0, 1, 0.5, 240deg);
    }
    100% {
        transform: translateY(105vh) translateX(var(--drift)) rotate(var(--rotation));
        opacity: 0.2;
    }
}