/* -------------------------------------------
    Overlay
---------------------------------------------- */

.overlay,
.overlay-visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    transition: padding .3s ease-out, background-color .3s, opacity .3s;
}

.overlay {
    padding-top: 10rem;
    background: rgba(0,0,0,.3);
    opacity: 0;
    a > & {
        cursor: pointer;
    }
    figure:hover & {
        padding-top: 0;
        opacity: 1;
    }
}
.overlay-visible {
    figure:hover & {
        background-color: var(--rio-primary-color-op-90, rgba( #27c, 0.9 ) );
        padding-bottom: 10rem;
    }
}
.overlay-transparent {
    background: transparent;
}
// Global Overlays
.overlay-dark,
.overlay-light {
    figure, .banner {
        position: relative;
    }

    figure::after,
    figure > a::after,
    &.banner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--rio-dark-color, #222);
        opacity: 0;
        transition: opacity .3s, background .3s, transform .3s;
    }

    &:hover figure::after,
    &:hover figure > a::after,
    &.banner:hover::after {
        opacity: .2;
    }

    &.post > figure > a::after {
        z-index: 1;
    }
}

    .overlay-light {
        figure::after,
        figure > a::after,
        &.banner::after {
            background: var(--rio-light-color, #ccc);
        }
    }

// Zoom
.overlay-zoom {
    &,
    .post-media,
    figure {
        overflow: hidden;
        -webkit-transform: translateZ(0);
    }

    img {
        transition: transform .3s;
    }
    &:hover {
        img {
            transform: scale(1.08);
        }
    }
}
// Effect
.overlay-effect-1, .overlay-effect-1 figure {
    &:before,
    &:after {
        content: '';
        position: absolute;
        opacity: 1;
    }

    &:before {
        background: rgba(255, 255, 255, .3);
        bottom: 0;
        #{$left}: 50%;
        #{$right}: 51%;
        top: 0;
    }

    &:after {
        bottom: 50%;
        left: 0;
        right: 0;
        top: 50%;
    }
}
.overlay-effect-1:hover, .overlay-effect-1:hover figure {
    &:before,
    &:after {
        left: 0;
        right: 0;
        opacity: 0;
        transition: .5s linear;
    }
}

.overlay-effect-2,
.overlay-effect-2 figure, 
.overlay-effect-3, 
.overlay-effect-3 figure {
    overflow: hidden;
    position: relative;
}

.overlay-effect-2, .overlay-effect-2 figure {
    &:before,
    &:after {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, .6);
        height: 100%;
        left: 0;
        opacity: .4;
        top: 0;
        transition: .9s;
        width: 100%;
    }

    &:before {
        transform: translate(105%, 0%);
    }

    &:after {
        transform: translate(-105%, 0%);
    }
}
.overlay-effect-2:hover, .overlay-effect-2:hover figure {
    &:before,
    &:after {
        opacity: 0;
        transform: none;
    }
}

.overlay-effect-3, .overlay-effect-3 figure {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 120%;
        height: 60px;
        background: rgba(255, 255, 255, .1);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
        transition: .5s linear;
        backface-visibility: hidden;
    }
}
.overlay-effect-3:hover, .overlay-effect-3:hover figure {
    &::before {
        top: 100%;
        left: -100%;
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
    }   
}

.overlay-effect-4, .overlay-effect-4 figure {
    &:before,
    &:after {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, .1);
        opacity: 1;
        transition: .5s;
    }

    &:before {
        bottom: 0;
        #{$left}: 50%;
        #{$right}: 51%;
        top: 0;
    }
    &:after {
        bottom: 50%;
        left: 0;
        right: 0;
        top: 50%;
    }
}
.overlay-effect-4:hover, .overlay-effect-4:hover figure {
    &:before,
    &:after {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: .5;
    }
}

// Image Filter Options
.overlay-image-filter img {
    transition: filter .4s;
}
.overlay-blur:hover img {
    filter: blur(4px);
}
.overlay-brightness:hover img {
    filter: brightness(1.5);
}
.overlay-contrast:hover img {
    filter: contrast(1.5);
}
.overlay-grayscale:hover img {
    filter: grayscale(1);
}
.overlay-hue:hover img {
    filter: hue-rotate(270deg);
}
.overlay-opacity:hover img {
    filter: opacity(0.5);
}
.overlay-saturate:hover img {
    filter: saturate(3);
}
.overlay-sepia:hover img {
    filter: sepia(0.5);
}

// Banner Background
.background-effect-wrapper {
    overflow: hidden;
}

.background-effect-wrapper, .background-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}