/* Blinking */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-blink {
    animation: blink 1.5s infinite;
}


/* Slide Top on Hover */
.scale-up-ver-bottom {
    -webkit-animation: scale-up-ver-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-ver-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

/* Text Blur on Out */
.text-blur-out {
    -webkit-animation: text-blur-out 1.2s cubic-bezier(.55,.085,.68,.53) reverse both;
    animation: text-blur-out 1.2s cubic-bezier(.55,.085,.68,.53) reverse both
}

@-webkit-keyframes text-blur-out {
    0% {
        -webkit-filter: blur(.01);
        filter: blur(.01)
    }

    100% {
        -webkit-filter: blur(12px) opacity(0);
        filter: blur(12px) opacity(0)
    }
}

@keyframes text-blur-out {
    0% {
        -webkit-filter: blur(.01);
        filter: blur(.01)
    }

    100% {
        -webkit-filter: blur(12px) opacity(0);
        filter: blur(12px) opacity(0)
    }
}


/* Kenburns effect on image */
.kenburns-top {
    -webkit-animation: kenburns-top 20s ease-out both;
    animation: kenburns-top 20s ease-out both
}

@-webkit-keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%
    }

    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top
    }
}

@keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%
    }

    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top
    }
}

/* Border below color (secondary) on hover */

/* Reserve space for the border and avoid shifting */
.hover-effect {
    transition: box-shadow 0.3s ease;
}

    .hover-effect:hover {
        box-shadow: inset 0 -7px 0 0 var(--mud-palette-secondary);
    }

.scale-up-center:hover {
    -webkit-animation: scale-up-center 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}