@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: var(--final-opacity, 1);
    }
}

@keyframes fade-out {
    from {
        opacity: var(--final-opacity, 1);
    }
    to {
        opacity: 0;
    }
}


@keyframes slide-up-in {
    from {
        opacity: 0;
        translate: 0 30%;
        translate: 0 30%;
    }
    to {
        opacity: var(--final-opacity, 1);
        translate: 0 0;
        -webkit-translate: 0 0;
    }
}

@keyframes slide-down-in {
    from {
        opacity: 0;
        translate: 0 -30%;
        -webkit-translate: 0 -30%;
    }
    to {
        opacity: var(--final-opacity, 1);
        translate: 0 0;
        -webkit-translate: 0 0;
    }
}

@keyframes slide-down-out {
    from {
        opacity: var(--final-opacity, 1);
        translate: 0 0;
        -webkit-translate: 0 0;
    }
    to {
        opacity: 0;
        translate: 0 30%;
        -webkit-translate: 0 30%;
    }
}

@keyframes slide-up-out {
    from {
        opacity: var(--final-opacity, 1);
        translate: 0 0;
        -webkit-translate: 0 0;
    }
    to {
        opacity: 0;
        translate: 0 -30%;
        -webkit-translate: 0 -30%;
    }
}


@keyframes expandSticky {
    from {
        height: calc(100vh - (75px + 1.5em + 30px + 82px) - 25px);
    }
    to {
        height: calc(100vh - (40px + 82px) - 25px);
    }
}


@keyframes dynamic-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(var(--mx), var(--my)) rotate(var(--mrot));
  }
  100% {
    transform: translate(calc(var(--mx) * -0.5), calc(var(--my) * -0.3)) rotate(0deg);
  }
}


/* - Auxiliary animations for allowing other animations run while changing element's visibility - */
@keyframes visibility-show {
    0% {
        visibility: hidden;
    }
    1% {
        visibility: visible;
    }
    100% {
        visibility: visible;
    }
}

@keyframes visibility-hide {
    0% {
        visibility: visible;
    }
    99% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}