/******* image hover styles *******/

// hover styles
.img-block {
    overflow: hidden;
    position: relative;
    &:hover {
        img {
            opacity: 1;
            filter: alpha(opacity=100);
            transition: opacity 0.35s ease 0s;
        }
    }
    &.image-zoom {
        img {
            transition: opacity 0.35s, transform 0.35s;
            transform: scale(1.12);
        }
    }
    &.image-zoom:hover {
        img {
            opacity: 0.5;
            transform: scale(1);
        }
    }
    //image-zoom-2
    &.image-zoom-2 {
        img {
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
        }
        &:hover {
            background-color: $image-zoom-2-bg-color;
            img {
                -webkit-transform: scale3d(2, 2, 1);
                transform: scale3d(2, 2, 1);
            }
        }
        &::before {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            border: 2px solid $image-zoom-2-before-border-color;
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2);
            content: '';
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: scale3d(1.4, 1.4, 1);
            transform: scale3d(1.4, 1.4, 1);
        }
    }
}

//border effect
.border-hover-effect {
    &:before,
    &:after {
        bottom: 1.25rem;
        content: "";
        left: 1.25rem;
        opacity: 0;
        position: absolute;
        right: 1.25rem;
        top: 1.25rem;
        transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
        z-index: 1;
    }
    &:before {
        border-bottom: 1px solid $border-hover-effect-border-color;
        border-top: 1px solid $border-hover-effect-border-color;
        transform: scale(0, 1);
    }
    &:after {
        border-left: 1px solid $border-hover-effect-border-color;
        border-right: 1px solid $border-hover-effect-border-color;
        transform: scale(1, 0);
    }
    &:hover {
        background-color: $border-hover-effect-bg-color;
        &:before,
        &:after {
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
        img {
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    }
}

//apollo effect
.shine-effect {
    position: relative;
    overflow: hidden;
    &:before {
        position: absolute;
        top: 0;
        left: 30px;
        width: 100%;
        height: 100%;
        background: $shine-effect-before-bg-color;
        opacity:0.5;
        content: '';
        transition: transform 0.6s;
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    }
    &:hover:before {
        left: -30px;
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
    }
    &:hover {
        background-color: $shine-effect-hover-bg-color;
    }
}

//border-effect-2
.border-effect-2 {
    background-color: $border-effect-2-bg-color;
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 1px solid $border-effect-2-after-border-color;
        border-bottom: 1px solid $border-effect-2-after-border-color;
        content: '';
        opacity: 0;
        transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
        transform-origin: 50% 50%;
        transition: opacity 0.35s, transform 0.35s;
    }
    &:hover::after {
        opacity: 1;
        transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
    }
}

//curtain effect
.curtain-effect {
    [class^=image-vertical] {
        position: absolute;
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        background: $curtain-effect-bg-color;
        opacity:0.5;
        transition: all .3s ease;
    }
    .image-vertical-right {
        left: auto;
        right: 0;
    }
    &:hover {
        .image-vertical-left,
        .image-vertical-right {
            width: 50%;
        }
    }
}

//ripple-image-wrap effect
.ripple-image-wrap {
    [class^=image-ripple] {
        display: block;
        margin: 0 auto;
        width: 35px;
        height: 35px;
        position: absolute;
        border-radius: 100%;
        background: $ripple-image-wrap-bg-color;
        opacity: 0.3;
        transform: scale(0);
        transition: all .5s ease;
    }
    .image-ripple-t {
        top: 20%;
        left: 20%;
    }
    .image-ripple-r {
        top: 20%;
        right: 20%;
    }
    .image-ripple-l {
        bottom: 20%;
        left: 20%;
    }
    .image-ripple-b {
        bottom: 20%;
        right: 20%;
    }
    &:hover {
        .image-ripple-t,
        .image-ripple-r,
        .image-ripple-l,
        .image-ripple-b {
            transform: scale(15);
            opacity: 0;
        }
        .image-ripple-t~.image-ripple-r {
            transition-delay: .2s;
        }
        .image-ripple-r~.image-ripple-b {
            transition-delay: .3s;
        }
        .image-ripple-b~.image-ripple-r {
            transition-delay: .4s;
        }
    }
}

// image greyscale effect
.grayscale-effect {
    img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        transition: filter linear .3s;
    }
    &:hover {
        img {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
        }
    }
}

// image greyscale effect
.reverse-grayscale-effect {
    img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        transition: filter linear .3s;
    }
    &:hover {
        img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
    }
}


/******* button hover styles *******/

.c-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: $c-ripple-bg-color;
}

.c-ripple__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: $c-ripple-circle-bg-color;
    .c-ripple.is-active & {
        animation: a-ripple .4s ease-in;
    }
}


/**
 * Animation: Ripple
 * --------------------------------------------------
 */

@keyframes a-ripple {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
    }
}