#wedding-effects {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* =========================
    FALLING PETALS
========================= */

.petal {
    position: absolute;
    top: -40px;
    width: 12px;
    height: 18px;
    border-radius: 100% 0 100% 0;
    opacity: 0.75;

    animation:
        petal-fall linear infinite,
        petal-sway ease-in-out infinite alternate;
    rainbow-shift 4s linear infinite;
}

@keyframes petal-fall {
    0% {
        transform: translateY(-40px) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
    }
}

@keyframes petal-sway {
    0% {
        margin-left: -30px;
    }

    100% {
        margin-left: 30px;
    }
}


/* =========================
    SMALL FLOWERS
========================= */

.flower {
    position: absolute;
    top: -50px;
    font-size: 18px;
    opacity: 0.75;

    animation:
        flower-fall linear infinite,
        flower-sway ease-in-out infinite alternate;
}

@keyframes flower-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(540deg);
    }
}


/* =========================
    FIREWORKS
========================= */

.firework {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;

    animation: firework-show 4s ease-out infinite;
}

.firework::before,
.firework::after {
    content: "";
    position: absolute;
    inset: -35px;

    background:
        radial-gradient(circle at center,
            transparent 0 4px,
            rgba(255, 215, 140, .9) 5px,
            transparent 7px),

        conic-gradient(from 0deg,
            transparent 0deg 10deg,
            rgba(255, 215, 140, .9) 11deg 13deg,
            transparent 14deg 25deg,
            rgba(255, 230, 170, .8) 26deg 28deg,
            transparent 29deg 40deg,
            rgba(255, 215, 140, .9) 41deg 43deg,
            transparent 44deg 360deg);

    border-radius: 50%;
    animation: firework-rays 4s ease-out infinite;
}

.firework::after {
    transform: rotate(45deg);
}

@keyframes firework-show {

    0%,
    65% {
        opacity: 0;
        transform: scale(.1);
    }

    70% {
        opacity: 1;
    }

    82% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes firework-rays {
    0% {
        transform: scale(.1);
        opacity: 0;
    }

    70% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}