/* ------------------------------ */
/* --------- ANIMATIONS --------- */
/* ------------------------------ */

/* GENERAL */

.hover-pointer:hover {
    cursor: pointer; }

/* ZOOM */

.hover-zoom, .hover-zoom:hover,
.hover-zoom-half, .hover-zoom-half:hover {
    transition: 0.33s; }

.hover-zoom-quick, .hover-zoom-quick:hover {
    transition: 0.1s;
}

.hover-zoom:hover,
.hover-zoom-quick:hover {
    transform: scale(1.125); }

.hover-zoom-half:hover {
    transform: scale(1.0625); }

/* ----- OPACITY ----- */

.hover-slight-fade {
    transition: 0.3s;
    &:hover {
        opacity: 0.8;
        transition: 0.3s;
    }
}

.hover-visible:hover {
    opacity: 1;
    transition: 0.5s;
}

.hover-icon-visible:hover i {
    opacity: 1;
    transition: 0.5s;
}

.hover-opaque {
    transition: 0.5s;
    &:hover {
        filter: opacity(1);
        transition: 0.5s;
    }
}

.hover-span-visible > span {
    opacity: 0;
}

.hover-span-visible:hover > span { opacity: 1; }

/* ----- BRIGHTNESS / SHINING ----- */

.hover-bright {
    transition: 0.5s;
    &:hover {
        filter: brightness(1);
        transition: 0.5s;
    }
}

.hover-shine {
    transition: 0.5s;
    &:hover {
        filter: brightness(1.3);
        transition: 0.5s;
    }
}

/* ----- SHINING LEFT TO RIGHT RAY ----- */

.animation-shine {
    overflow: hidden;
    mask-image: url('http://localhost:8000/assets/img/ui/mon-mask.png');
    mask-mode: luminance;
    mask-size: 100%;
    animation: animation-bright 12s ease 1.5s infinite;
    &:before {
        position: absolute;
        z-index: 2;
        content: '';
        top: 0;
        left: -300px;
        width: 30%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        transform: skewX(-30deg);
        animation: animation-shine 12s ease 1.5s infinite;
        opacity: 1;
    }
}

@keyframes animation-bright {
    from {filter: brightness(1);}
    1.2% {filter: brightness(1);}
    2% {filter: brightness(1.3);}
    2.8% {filter: brightness(1);}
}

@keyframes animation-shine {
    from {left: -300px; opacity: 1;}
    4% {left: 300px; opacity: 1;}
    4.4% {opacity: 0;}
    100% {opacity: 0;}
}

/* ----- ANIMATION / STOP ----- */

.hover-stop:hover { animation-duration: 0s; }

.fa-animation-delay { --fa-animation-delay: 0.67s; }