.spring-petals-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 35;
    isolation: isolate;
}

.spring-petals-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 213, 236, 0.18), transparent 28%),
        radial-gradient(circle at top left, rgba(255, 240, 207, 0.18), transparent 26%);
    opacity: 0.9;
}

.spring-petal {
    position: absolute;
    top: -14vh;
    left: var(--petal-left, 50%);
    width: var(--petal-size, 16px);
    height: calc(var(--petal-size, 16px) * 1.35);
    opacity: 0;
    pointer-events: none;
    border-radius: 75% 0 75% 0 / 95% 0 100% 10%;
    background: linear-gradient(160deg, var(--petal-color-a, #ffd5e8), var(--petal-color-b, #ff8fb1));
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        0 10px 24px rgba(214, 109, 152, 0.18);
    transform: translate3d(0, -14vh, 0) rotate(var(--petal-rotate-start, 0deg));
    animation:
        spring-petal-fall var(--petal-duration, 11s) linear var(--petal-delay, 0s) forwards,
        spring-petal-sway var(--petal-sway-duration, 4.2s) ease-in-out var(--petal-delay, 0s) infinite alternate;
    will-change: transform, opacity;
}

.spring-petal::after {
    content: "";
    position: absolute;
    top: 16%;
    left: 20%;
    width: 42%;
    height: 22%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    filter: blur(0.2px);
    transform: rotate(-24deg);
}

.spring-petal.shape-2 {
    border-radius: 82% 12% 76% 8% / 96% 14% 88% 12%;
}

.spring-petal.shape-3 {
    border-radius: 68% 10% 84% 6% / 100% 10% 92% 8%;
}

@keyframes spring-petal-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -14vh, 0) rotate(var(--petal-rotate-start, 0deg)) scale(0.92);
    }
    12% {
        opacity: var(--petal-opacity, 0.92);
    }
    82% {
        opacity: calc(var(--petal-opacity, 0.92) - 0.08);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--petal-drift-x, 48px), 112vh, 0) rotate(var(--petal-rotate-end, 360deg)) scale(1.06);
    }
}

@keyframes spring-petal-sway {
    0% {
        margin-left: -10px;
    }
    50% {
        margin-left: 10px;
    }
    100% {
        margin-left: -14px;
    }
}

@media (max-width: 768px) {
    .spring-petals-container {
        z-index: 25;
    }

    .spring-petals-container::before {
        opacity: 0.6;
    }

    .spring-petal {
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.65),
            0 8px 18px rgba(214, 109, 152, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spring-petals-container,
    .spring-petal {
        display: none !important;
    }
}