$(document).ready(function () {
    var tl = new TimelineMax();
    tl.fromTo('.intro-title strong', 1, { autoAlpha: 0, y: -150 }, { autoAlpha: 1, y: 0 })
        .fromTo('.about-intro p', 1, { autoAlpha: 0, y: 150 }, { autoAlpha: 1, y: 0 }, "-=.5")
        .fromTo('.about-intro .btn', 1, { autoAlpha: 0, y: 150 }, { autoAlpha: 1, y: 0 }, "-=.7")
        .fromTo('.intro-title span', .3, { scale: 0 }, { scale: 1 }, "-=.5")
        .staggerFromTo($(".site-statistic >div"), 3, { autoAlpha: 0, y: -150 }, { autoAlpha: 1, y: 0 }, .5, "-=4")
        .fromTo($(".about-atributies p"), 1, { autoAlpha: 0, y: 250 }, { autoAlpha: 1, y: 0 }, "-=.5")
    //---------------------------------------------------------------------------------
    var maskY = 380;
    var maskMove = 300;
    var itemsize = 260;
    var lastMove = -150;
    if (window.innerWidth <= 991 && window.innerWidth > 767) {
        maskY = 300;
        maskMove = 200;
        itemsize = 200;
        var lastMove = -100;
    }
    else if (window.innerWidth <= 767 && window.innerWidth > 500) {
        maskY = 200;
        maskMove = 150;
        itemsize = 150;
        var lastMove = -100;
    }
    else if (window.innerWidth <= 500) {
        maskY = 150;
        maskMove = 170;
        itemsize = 170;
        var lastMove = -100;
    }
    var tlMask = new TimelineMax({ paused: true });
    tlMask.fromTo($('.blue-tree'), 2, { autoAlpha: 0 }, { autoAlpha: 1, webkitMaskPositionY: maskY + "px" })
        .fromTo($('.main-tree'), 2, { autoAlpha: 0 }, { autoAlpha: 1, webkitMaskPositionY: maskY }, "-=2")

        .fromTo($('.ul-bg'), 2, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=2")
        .fromTo($("#MASK"), 2, { y: "100%" }, { y: "66%" }, "-=2")
        .fromTo($('.live-tree'), .5, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=2")

        .to($('.blue-tree'), 2, { webkitMaskPositionY: parseInt(maskY - maskMove) + "px" }, "+=.5")
        .to($('.main-tree'), 2, { webkitMaskPositionY: parseInt(maskY - maskMove) + "px" }, "-=2")
        .to($('.ul-bg'), 2, { y: -itemsize }, "-=2")
        .fromTo($("#MASK"), 2, { y: "66%" }, { y: "33%" }, "-=2.5")
        .fromTo($('.exact-tree'), .5, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=1")

        .to($('.blue-tree'), 2, { webkitMaskPositionY: (-(maskY - 50)) + "px" }, "+=1")
        .to($('.main-tree'), 2, { webkitMaskPositionY: (-(maskY + (lastMove * 2))) + "px" }, "-=2")
        .to($('.ul-bg'), 2, { y: -(itemsize * 2) }, "-=2")
        .fromTo($("#MASK"), 2, { y: "33%" }, { y: "0%" }, "-=2.5")
        .fromTo($('.invest-tree'), .5, { autoAlpha: 0 }, { autoAlpha: 1 }, "-=1")

        .to($('.blue-tree'), 2, { webkitMaskPositionY: (2.5 * (-maskY)) + "px" }, "+=.5")
        .to($('.main-tree'), 1, { webkitMaskPositionY: lastMove + "px" }, "-=2")
        .fromTo($('.ul-bg'), 1, { autoAlpha: 1 }, { autoAlpha: 0 }, "-=1")
        .fromTo(".atributies-holder h2", 1, { autoAlpha: 0, x: 50 }, { autoAlpha: 1, x: 0 }, "+=.05")

    //-------------------------------------------------
    var tlLine = new TimelineMax({ paused: true });
    tlLine.staggerFromTo('.degree', 4, { autoAlpha: 0 }, { autoAlpha: 1 }, .15)

    //--------------------------------------------------------------------------------
    var tl2 = new TimelineMax({ paused: true });
    tl2.fromTo('.certificate-section h2', .5, { autoAlpha: 0, x: -150 }, { autoAlpha: 1, x: 0 })
        .fromTo('.certificate-section p', .5, { autoAlpha: 0, x: -150 }, { autoAlpha: 1, x: 0 }, "-=.2")
        .fromTo('.certificate-section .btn', .5, { autoAlpha: 0, x: -150 }, { autoAlpha: 1, x: 0 }, "-=.2")
        .fromTo('.certificate-section img', .5, { autoAlpha: 0, scale: 0 }, { autoAlpha: 1, scale: 1 }, "+=.1")

    var scrollMagicControl = new ScrollMagic.Controller();

    var scene1 = new ScrollMagic.Scene({ triggerElement: ".about-content", reverse: false })
        .on("enter", function () { tlMask.play(), tlLine.play() })

    var scene2 = new ScrollMagic.Scene({ triggerElement: ".certificate-section", reverse: false })
        .on("enter", function () { tl2.play() })

    scrollMagicControl.addScene([scene1, scene2]);

})