/* blink */

.eff-blink {
    animation-name: key-blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes key-blink {
    50% { opacity: 0.5; }
}


/* pop */

.eff-hover {
    transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.eff-hover:hover {
    animation-name: key-hover;
    animation-duration: 0.25s;
    box-shadow: 5px 10px 18px gray;
}

@keyframes key-hover {
    50% { transform: scale(1.02); }
}


/* pop image */

.eff-zoom:hover img {
    transition: transform 6s, filter 15s linear;
    transform: scale(1.1);
}


/* scroll */

.eff-scroll {
    transform: translateX(100%);
    white-space: nowrap;
    animation-name: key-scroll;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

.eff-scroll:hover
{
    cursor: pointer;
    animation-play-state: paused;
}

@keyframes key-scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-160%); }
}


/* load spinner */

.eff-load-spinner {
    --size: 86px;
    --stroke: 8px;
    border: var(--stroke) solid #f3f3f3;
    border-left: var(--stroke) solid #3498db;
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    margin: 30px auto;
    animation: spin 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}