/* Animations */

@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate--pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}
.animate--bounce {
    animation: bounce 1s infinite;
}


@keyframes animateArea {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate--area {
    /* background-color: var(--grayColor100); */
    background-color: transparent;
    padding: var(--padding-base);
    border-radius: 0.5rem ;
    animation: animateArea 250ms ease-in;
}



/* FadeIn Animations */
.fade--in--animation {
    animation: fadeInAnimation 400ms ease-in-out;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in and scale object */
.fade---in--scale {
    scale: .8;
    opacity: 0;
    animation: fade---in--scale linear forwards;
    animation-timeline: view();
    animation-range-start: 200px;
    animation-range-end: 500px;
}


/* fade---in--scale animation */
@keyframes fade---in--scale {
    to {
        scale: 1;
        opacity: 1;
    }
}