section .animate {
    transition: 1s;
    transition-timing-function: ease-out;
}

.invitation {
    overflow-x: hidden;
}

.badzcie .badz.animate {
    transform: scale(0);
    opacity: 0;
}

.badzcie.show-animate .badz.animate {
    transform: scale(1);
    opacity: 1;
}

.sec-1 .furka.animate {
    transform: translateX(100%) scale(0);
    opacity: 0;
    
}

.sec-1.show-animate .furka.animate {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.kwiaty .animate {
    transform: scale(0);
    opacity: 0;
}

.kwiaty.show-animate .animate {
    transform: scale(1);
    opacity: 1;
}

.sec-2 .boxO.animate {
    transform: translateX(-100%);
    opacity: 0;
    transition-delay: calc(.2s * var(--i));
}

.sec-2.show-animate .boxO.animate {
    transform: translateX(0);
    opacity: 1;
}

#plan {
    overflow-x: hidden;
}

.sec-3 .animate {
    transform: translateX(100%);
    opacity: 0;
    transition-delay: calc(.1s * var(--i));
}

.sec-3.show-animate .animate {
    transform: translateX(0);
    opacity: 1;
}

.sec-4 {
    overflow-x: hidden;
}

.sec-4 .h1.animate {
    transform: translate(100%);
    opacity: 0;
}

.sec-4 .p.animate {
    transform: translate(-100%);
    opacity: 0;
}

.sec-5 .animate {
    transform: scale(0);
    opacity: 0;
}

.sec-4.show-animate .h1.animate {
    transform: translateX(0);
    opacity: 1;
}

.sec-4.show-animate .p.animate {
    transform: translateX(0);
    opacity: 1;
}

.sec-5.show-animate .animate {
    transform: scale(1);
    opacity: 1;
}

.sec-6 {
    overflow-x: hidden;
}

.sec-6 .animate{
    transform: translateX(100%);
    opacity: 0;
}

.sec-6.show-animate .animate {
    transform: translateX(0);
    opacity: 1;
}