// ===== Mixins =====

.center-cicle() {
    position: absolute !important;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: url(./image/bg.png);
    background-size: 100px;
}

.img-bg(@url) {
    position: absolute;
    transform: translate(-50%);
    background: url(@url) no-repeat center center;
    background-size: contain;
}

// ===== Styles =====

html {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

body {
    padding: 0px;
    margin: 0px;
    background: url(./image/fg.png);
    background-size: 100px;
    overflow: hidden;
}

#live2dcanvas {
    .center-cicle();

    &.in {
        animation: canvasIn 500ms ease-out forwards;
    }
}

@keyframes canvasIn {
    0% {
        // transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
}

.loading {
    .center-cicle();
    z-index: 100000;
    overflow: hidden;

    @taihe-real-width: 813px;
    @sun-real-width: 360px;
    @cloud-1-real-width: 116px * 1.2;
    @cloud-2-real-width: 64px * 1.2;
    @cloud-3-real-width: 60px * 1.2;
    
    @top-offset: 12%;
    @taihe-top: @top-offset + 20%;
    @sun-top: @top-offset + 30%;
    @cloud-1-top: @top-offset + 14%;
    @cloud-2-top: @top-offset + 24%;
    @cloud-3-top: @top-offset + 30%;

    @cloud-1-left: 55%;
    @cloud-2-left: 35%;
    @cloud-3-left: 66%;

    @taihe-padding: 48%;

    .padding(@width) {
        @padding: @taihe-padding * (@width / @taihe-real-width);
        padding-right: @padding;        
        padding-bottom: @padding;
    }

    &.out {
        .inner {
            animation: loadingOut 1500ms ease-in forwards;
        }
    }

    .inner {
        position: relative;
    }

    @keyframes loadingOut {
        100% {
            transform: translateY(-160%) scale(20);
            opacity: 0;
        }
    }

    .taihe {
        top: @taihe-top;
        left: 50%;
        padding-right: @taihe-padding;
        padding-bottom: @taihe-padding;
        .img-bg('./image/taihe-p.png');
        opacity: 0.9;
    }

    .sun {
        top: @sun-top;
        left: 50%;
        .padding(@sun-real-width);
        .img-bg('./image/sun-p.png');
        animation: rise 12s linear forwards;
        opacity: 0.9;
    }

    .cloud-1 {
        top: @cloud-1-top;
        left: @cloud-1-left;
        .padding(@cloud-1-real-width);
        .img-bg('./image/cloud-1-p.png');
        animation: swim1 20s linear infinite;
        opacity: 0.9;
    }

    .cloud-2 {
        top: @cloud-2-top;
        left: @cloud-2-left;
        .padding(@cloud-2-real-width);
        .img-bg('./image/cloud-2-p.png');
        animation: swim2 30s linear infinite;
        opacity: 0.9;
    }

    .cloud-3 {
        top: @cloud-3-top;
        left: @cloud-3-left;
        .padding(@cloud-3-real-width);
        .img-bg('./image/cloud-3-p.png');
        animation: swim3 40s linear infinite;
        opacity: 0.9;
    }

    .text {
        bottom: 16%;
        left: 50%;
        padding-right: 18%;
        padding-bottom: 12%;
        .img-bg('./image/loading-text.png');
        animation: load 0.8s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
        opacity: 0.9;
    }

    @keyframes rise {
        100% {
            top: 8%;
            transform: translate(-50%) scale(0.7);
        }
    }

    @keyframes swim1 {
        54% {
            left: -10%;
            top: @cloud-1-top;
        }
        55% {
            left: -10%;
            top: -10%;
        }
        56% {
            left: 110%;
            top: -10%;
        }
        57% {
            left: 110%;
            top: @cloud-1-top;
        }
        100% {
            left: @cloud-1-left;
            top: @cloud-1-top;
        }
    }

    @keyframes swim2 {
        34% {
            left: -10%;
            top: @cloud-2-top;
        }
        35% {
            left: -10%;
            top: -10%;
        }
        36% {
            left: 110%;
            top: -10%;
        }
        37% {
            left: 110%;
            top: @cloud-2-top;
        }
        100% {
            left: @cloud-2-left;
            top: @cloud-2-top;
        }
    }

    @keyframes swim3 {
        65% {
            left: -10%;
            top: @cloud-3-top;
        }
        66% {
            left: -10%;
            top: -10%;
        }
        67% {
            left: 110%;
            top: -10%;
        }
        78% {
            left: 110%;
            top: @cloud-3-top;
        }
        100% {
            left: @cloud-3-left;
            top: @cloud-3-top;
        }
    }

    @keyframes load {
        100% {
            transform: translate(-50%) scale(1.1);
        }
    }
}

.contact {
    position: absolute;
    padding: 16px 16px;
    left: 0;
    bottom: 0;
    opacity: 0.8;

    .author {
        display: block;
        margin: 0 auto 18px;
        width: 20px;
        height: 39px;
        background: url(./image/author-v.png) no-repeat center center;
        background-size: contain;
    }

    a {
        display: block;
        width: 24px;
        height: 24px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        & + a {
            margin-top: 12px;
        }
    }

    .link-github {
        background-image: url(./image/icon-github.png);
    }

    .link-weibo {
        background-image: url(./image/icon-weibo.png);
    }
}
