psuedo-slider.less

// Abandoned. Cool trick but timing was off, and the whole thing is just a real goddamn mess.

.primo-fluid.landing-page {
    .backgroundify(@index) {
        background: url(~"/media/primo/landing-page/pro-0@{index}.jpg") center center no-repeat;
        .background-size(cover);
    }

    .pseudo-background(@index, @animation-name) {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        .backgroundify(@index);

        .key-frame-animation(@animation-name, @total-time, linear, infinite);

        @media @mobile {
            display: none;
        }
    }

    @slide-duration: 5s;
    @slide-count: 3;
    @total-time: (@slide-duration * @slide-count);

    .slide-keyframes(@opaque-points, @transparent-points) {
        @{opaque-points} {
            opacity: 1;
        }

        @{transparent-points} {
            opacity: 0;
        }
    }

    // this isn't perfect. needs fine tuning.

    @-webkit-keyframes slide-two {
        .slide-keyframes(~"0%, 33%", ~"43%, 90%");
    }
    @-moz-keyframes slide-two {
        .slide-keyframes(~"0%, 33%", ~"43%, 90%");
    }
    @-ms-keyframes slide-two {
        .slide-keyframes(~"0%, 33%", ~"43%, 90%");
    }
    @-o-keyframes slide-two {
        .slide-keyframes(~"0%, 33%", ~"43%, 90%");
    }

    @-webkit-keyframes slide-three {
        .slide-keyframes(~"33%, 66%", ~"0%, 23%, 76%, 100%");
    }
    @-moz-keyframes slide-three {
        .slide-keyframes(~"33%, 66%", ~"0%, 23%, 76%, 100%");
    }
    @-ms-keyframes slide-three {
        .slide-keyframes(~"33%, 66%", ~"0%, 23%, 76%, 100%");
    }
    @-o-keyframes slide-three {
        .slide-keyframes(~"33%, 66%", ~"0%, 23%, 76%, 100%");
    }

    // Default to first slide
    .backgroundify(1);

    // Store 2nd and 3rd slides as pseudos
    &:before {
        .pseudo-background(2, slide-two);
    }

    &:after {
        .pseudo-background(3, slide-three);
    }
}