.animation-button::before,
.animation-button::after {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    opacity: 0;
}

.heart-button::before {
    background-image: url('/static/img/heart.svg?v=1.0');
}

.heart-button::after {
    background-image: url('/static/img/heart-reverse.svg?v=1.0');
} 

.heart-button.active::before {
    animation: heart 1.5s ease-out forwards;
}

.heart-button.active::after {
    animation: heart 1.5s 0.2s ease-out forwards;
}

@keyframes heart {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) scale(1.4);
        opacity: 0;
    }
}



.sparkling-button::before {
    background-image: url('/static/img/sparkling.svg?v=1.0');
    top: 0;
    left: -10px;
}

.sparkling-button::after {
    background-image: url('/static/img/sparkling-reverse.svg?v=1.0');
    bottom: -10px;
    right: -10px;
}

.sparkling-button.active::before {
    animation: sparkling 1.5s ease-out forwards;
}

.sparkling-button.active::after {
    animation: sparkling 1.5s 0.2s ease-out forwards;
}

@keyframes sparkling {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) scale(1.4);
        opacity: 0;
    }
}



.heart-water-button::before {
    background-image: url('/static/img/svg/heart-water-reverse.svg?v=1.0');
    top: 0;
    left: -35px;
    width: 40px;
    height: 40px;
}

.heart-water-button::after {
    background-image: url('/static/img/svg/heart-water.svg?v=1.0');
    bottom: -20px;
    right: -35px;
    width: 40px;
    height: 40px;
}

.heart-water-button.active::before {
    animation: heart-water 1.5s ease-out forwards;
}

.heart-water-button.active::after {
    animation: heart-water 1.5s 0.2s ease-out forwards;
}

@keyframes heart-water {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) scale(1.4);
        opacity: 0;
    }
}



@keyframes iconAppear {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes textAppear {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes contentAppear {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes buttonsAppear {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}