body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    overflow: hidden;

    background-color: transparent;
    background-color: black;
    // background-img: url('/threejs/static/img/mountainyun/吸云山_00014.png');
    background-size: cover;
}

#cloud,
#fade-cloud,
#webgl-container,
.webgl-container {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
#webgl-container {
    will-change: transform;
    // transition: .5s all ease-in;
    // transition: 5s all ease-in;   
    // &.scale {
    //     transform: scale(.05, .05);
    // }
}

#fade-cloud {
    // background-image: url('/threejs/static/img/上下云透明.png');
    background-size: cover;
    will-change: transform;
    // transition: .5s all ease-in;
    // transition: 3s all ease-in;
    transition: 3s all linear;

    &.scale-to-mouth {
        transform: scale(.15, .15);
        transition: 1s all linear;
    }
    &.scale {
        transform: scale(.05, .05);
    }
    &.fly-down {
        transform: translate(0, 15px) scale(.15, .15);
        opacity: 0;
        transition: 1s all linear;
    }
    .left-cloud {
        // position: absolute;
        // left: 0;
        // top: 0;
        // height: 100%;
        // width: 100%;
        // margin-top: -88%;
        // margin-left: -55%;
        // background-image: url(/threejs/static/img/canvas_moutain_left.png);
        // background-size: auto 200%;
        position: absolute;
        left: 0;
        top: 0;
        height: 200%;
        width: 200%;
        margin-top: -88%;
        margin-left: -55%;
        background-image: url(/threejs/static/img/canvas_moutain_left.png);
        background-size: auto 100%;
    }
    .right-cloud {        
        // position: absolute;
        // right: 0;
        // top: 0;
        // height: 100%;
        // width: 100%;
        // margin-top: -89%;
        // margin-right: -64%;
        // background-image: url(/threejs/static/img/canvas_moutain_right.png);
        // background-size: auto 200%;
        // background-position: 100% 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 200%;
        width: 200%;
        margin-top: -89%;
        margin-right: -64%;
        background-image: url(/threejs/static/img/canvas_moutain_right.png);
        background-size: auto 100%;
        background-position: 100% 0;

    }
    .bottom-cloud {        
        position: absolute;
        left: 0;
        bottom: 0;
        height: 200%;
        width: 200%;
        margin-left: -56%;
        margin-bottom: -89%;
        background-image: url(/threejs/static/img/canvas_moutain_bottom.png);
        background-size: cover;
        background-position: 0 100%;
    }
}

#water {
    position: absolute;
    left: 0;
    top: 33%;
    width: 100%;
    height: 100%;
    // background-image: url('/threejs/static/img/water/合成 1_2_00000.png');
    background-image: url('/threejs/static/img/canvas_mountain_flybow.png');
    background-size: auto 100%;
    will-change: transform;

    &.ready {
        animation: ready 10s 0s infinite alternate linear;
    }
    &.crazy {
        animation: crazy .3s 0s infinite alternate linear;
    }
    &.scale {
        transition: 1s all linear;
        transform: scale(.8, .8) translate(-15px, -135px);
    }
}

#loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#animal {
    position: absolute;
    left: 0;
    top: 0;
    height: 120px;
    width: 120px;
}

#product-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;


    .product {
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        width: 120%;
        height: 100%;
        background-image: url('/threejs/static/img/product/产品页-依云水-产品.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    .case-open {
        display: none;
        position: absolute;
        left: 50%;
        background-image: url('/threejs/static/img/product/产品页-宝箱打开序列.png');
        background-position: 0 0;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .case-shake {
        position: absolute;
        left: 50%;
        background-image: url('/threejs/static/img/product/产品页-宝箱抖动序列.png');
        background-position: 0 0;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .buy-btn {
        position: absolute;
        left: 50%;
        background-position: 0 0;
        background-size: auto 100%;
        background-image: url('/threejs/static/img/product/购买按钮.png');
        background-repeat: no-repeat;
    }
}

@keyframes ready {
    0% {
        transform: translate(0, 0);
    } 
    10% {
        transform: translate(2%, 2%);
    }
    20% {
        transform: translate(3%, 2%);
    }
    30% {  
        transform: translate(3%, 3%);
    }
    40% {  
        transform: translate(2%, 4%);
    }
    50% {  
        transform: translate(0, 5%);
    }
    60% {  
        transform: translate(-1%, 4%);
    }
    70% {  
        transform: translate(-3%, 3%);
    }
    80% {  
        transform: translate(-4%, 2%);
    }
    90% {  
        transform: translate(-3%, -1%);
    }
    100% {  
        transform: translate(0, 0);
    }
}

@keyframes crazy {
    0% {
        // left: 50%;
        // bottom: -62%;
        transform: translate(0, 0%);
    } 
    12.5% {
        transform: translate(2%, 1%);
    }
    25% {
        transform: translate(0%, 0);
    }
    37.5% {
        transform: translate(-2%, 1%);
    }
    50% {
        transform: translate(0%, 0);
    }
    62.5% {
        transform: translate(2%, 1%);
    }
    75% {
        transform: translate(0%, 0);
    }
    87.5% {
        transform: translate(-2%, 1%);
    }
    100% {
        transform: translate(0, 0);
    }
}