body,html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
body {
    // background-color: #59568f;    
    // background: url('/threejs/static/img/canvas_ship.png') repeat-x;
    // background-size: auto 100%;

    background-color: rgba(0, 0, 0, .9);
    overflow: hidden;

    // animation: animatedBackground 10s linear;
    // animation-iteration-count: 1;
}

#webgl-container,
#bubbles,
#bubbles2,
#bubbles3 {
    position: absolute;
    left: 0;
    top: 0;
}

#webgl-container {
    &.scale {
        transform: scale(1.5, 1.5) translate(0, -65px);
        transition: 1s all linear;        
    }
}
// 影藏
#fish-hider {
    position: absolute;
    width: 90%;
    height: 70%;
    background-color: blue;
    left: 50%;
    bottom: -43%;
    transform: translate(-50%, 0%);
    background: url('/threejs/static/img/canvas_yuwang1.png') no-repeat;
    background-size: 100% auto;
    transform-origin: 50% bottom;
    opacity: 0;
}


#fish-catcher2 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    background-image: url('/threejs/static/img/yuwang/YW0000.png');
    // background-size: 100% auto;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}

#fish-catcher {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    bottom: -62%;
    transform: translate(-50%, 0%) scale(1.2, 1.2);
    background-image: url('/threejs/static/img/yuwang/YW0000.png');
    // background: url('/threejs/static/img/canvas_yuwang1.png') no-repeat;
    // background-size: 100% auto;
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: 50% bottom;
    &.rotate {
        animation: music-move .5s 0s infinite alternate ease-in-out;

    }
    &.ready {
        animation: ready 10s 0s infinite alternate linear;
    }
}
#fish-catcher-right {
    position: absolute;
    width: 90%;
    height: 64%;
    background-color: blue;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%) rotate(5deg);
    transform-origin: 50% bottom;
    background: url('/threejs/static/img/canvas_yuwang2.png') no-repeat;
    background-size: 100% auto;
    opacity: 0;
    &.rotate {
        animation: music-show .3s 0s infinite alternate ease-in-out;
    }
}

#fish-catcher-left {
    position: absolute;
    width: 90%;
    height: 64%;
    background-color: blue;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%) rotate(-5deg);
    transform-origin: 50% bottom;
    background: url('/threejs/static/img/canvas_yuwang3.png') no-repeat;
    background-size: 100% auto;
    opacity: 0;
    &.rotate {
        animation: music-show .3s 0s infinite alternate ease-in-out;
    }
}


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

#ship {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    
    background: url('/threejs/static/img/ship/chuan0045.png') no-repeat;
    background-size: 100% auto;
}

#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 music-move {
    0% { 
        // -webkit-transform: rotate(0deg);
        transform: translate(-50%, 0%) rotate(0deg);
    } 
    33% {  
        // -webkit-transform: rotate(-5deg);
        transform: translate(-50%, 0%) rotate(-5deg);
    }
    66% {  
        // -webkit-transform: rotate(5deg);
        transform: translate(-50%, 0%) rotate(5deg);
    }
    100% {  
        // -webkit-transform: rotate(0deg);
        transform: translate(-50%, 0%) rotate(0deg);
    }
}
@keyframes music-show {
    0% {
        opacity: 0;
    } 
    33% {
        opacity: .33;  
    }
    66% {  
        opacity: .66;
    }
    100% {  
        opacity: .1;
    }
}

@keyframes ready {
    0% {
        left: 50%;
        bottom: -62%;
    } 
    10% {
        left: 52%;
        bottom: -60%;
    }
    20% {  
        left: 53%;
        bottom: -60%;
    }
    30% {  
        left: 53%;
        bottom: -59%;
    }
    40% {  
        left: 52%;
        bottom: -58%;
    }
    50% {  
        left: 50%;
        bottom: -57%;
    }
    60% {  
        left: 49%;
        bottom: -58%;
    }
    70% {  
        left: 47%;
        bottom: -59%;
    }
    80% {  
        left: 46%;
        bottom: -60%;
    }
    90% {  
        left: 47%;
        bottom: -63%;
    }
    100% {  
        left: 50%;
        bottom: -62%;
    }
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: -100% 0; }
}
