export default {
    Home: {
        styleTargetsScoped: true,
        mounted: [
            [
                "anime: Home; hide",
                "anime: NavArrow; hide",
                "anime: NavMenu; hide",
                "anime: Game; hide"
            ],

            "scatterText: .hello, .subtext; letter",
            "css: .letter; display; inline-block",
            "css: .letter; lineHeight; 1em",
            "css: .hello > .letter; transformOrigin; 0 100%",
            [
                "anime: Home; title",
                "anime: Home; subtext"
            ],
            [
                "anime: NavArrow; in",
                "anime: NavMenu; in",
                "anime: ButtonLines; in",
                "anime: Game; in"
            ],
        ],
        routeLeave: [
            [
                "anime: NavArrow; out",
                "anime: NavMenu; out",
                "anime: ButtonLines; out",
                "anime: Game; out",
                {
                    targets: ".hello",
                    opacity: [1, 0],
                    //translateY: -200,
                    easing: "easeOutSine",
                    duration: 600
                },
                {
                    targets: ".subtext",
                    opacity: [1, 0],
                    //translateY: 200,
                    easing: "easeOutSine",
                    duration: 600
                }
            ],
        ],
        hide: [
            "css: .hello, .subtext; opacity; 0",
        ],
        title: [
            {
                targets: ".hello",
                opacity: [0, 1],
                duration: 3000,
                easing: "easeOutSine",
                delay: function (el, i) {
                    return 700 + 105 * i;
                }
            }
        ],
        subtext: [
            "css: .subtext; opacity; 1",
            {
                targets: ".subtext .letter",
                rotateY: [-90, 0],
                scale: [4, 1],
                duration: 430,
                delay: function (el, i) {
                    return 700 + 45 * i;
                }
            }
        ]
    },

    NavArrow: {
        hide: [
            "css: .main; opacity; 0",
            "css: .main; pointer-events; none"
        ],
        in: [
            "css: .main; pointer-events; auto",
            {
                targets: ".main",
                opacity: [0, 1],
                scale: [0, 1],
                easing: "easeOutSine",
                duration: 300
            }
        ],
        out: [
            {
                targets: ".main",
                opacity: [1, 0],
                scale: [1, 0],
                easing: "easeOutSine",
                duration: 300
            }
        ]
    },

    NavMenu: {
        hide: [
            "css: .nav-component; opacity; 0",
            "css: .nav-component; pointer-events; none"
        ],
        in: [
            [
                "css: .nav-component; top; -100",
                "css: .nav-component; opacity; 1",
                "css: .nav-component; pointer-events; auto"
            ],
            {
                targets: ".nav-component",
                top: [-100, 0],
                easing: "easeOutElastic",
                duration: 3000
            }
        ],
        out: [
            [
                {
                    targets: ".nav-component",
                    top: [0, -100],
                    easing: "easeOutElastic",
                    duration: 500
                },
                {
                    targets: ".nav-item",
                    scale: 0,
                    opacity: 0,
                    easing: "easeOutElastic",
                    duration: 500
                }
            ],
            "css: .nav-item; left; 0"
        ]
    },

    ButtonLines: {

        mounted: [
            "css: .main; opacity; 0"
        ],
        in: [
            {
                targets: ".main",
                opacity: [0, 1],
                translateY: [50, 0],
                easing: "easeOutSine",
                duration: 800
            }
        ],
        out: [
            {
                targets: ".main",
                opacity: [1, 0],
                translateY: [0, 50],
                easing: "easeOutSine",
                duration: 800
            }
        ]

    },

    Game: {
        hide: [
            "css: .game-img; opacity; 0",
            "css: .game-img; pointer-events; none"
        ]
    }
};