/* moving item */

.asset{
    position: absolute;
    background-position: center;
    background-size: cover;
}

.light{
    width: 100%;
    height: 100%;
    background-image: url('../asset/light.png');
    z-index: 1;
    top: -20px;
    animation: 
        oplight 2s infinite alternate,
        movelight 10s linear infinite;
}

@keyframes oplight {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

@keyframes movelight {
    0% {left: -1200px;}
    100% {left: 1200px;}
  }

.boat{
    background-image: url('../asset/boat.png');
    width: 550px;
    aspect-ratio: 1093/724;
    left: 450px;
    top: 400px;
    animation: ty20 3s infinite alternate;
}

@keyframes ty20 {
    0% {transform: translateY(0px);}
    100% {transform: translateY(10px);}
    /* อย่าลืมใส่หน่วย */
}

.bird{
    background-image: url('../asset/bird.png');
    width: 180px;
    aspect-ratio: 187/162;
    animation: movebird 17s infinite linear;
}

.smallbird{
    background-image: url('../asset/bird.png');
    width: 100px;
    opacity: 0.5;
    aspect-ratio: 187/162;
    animation: movebird 10s infinite ease-in-out;
}

@keyframes movebird {
    0% {left: 103%; top: 200px;}
    100% {left: 0px; top: -200px;}
}

.cloud1{
    background-image: url('../asset/cloud1.png');
    width: 250px;
    aspect-ratio: 757/73;
    top: 100px;
    right: 50px;
    animation: 
        cloudY 2.5s linear infinite alternate,
        cloudX 30s linear infinite alternate;
}
.cloud2{
    background-image: url('../asset/cloud2.png');
    width: 170px;
    aspect-ratio: 757/73;
    top: 180px;
    left: 50px;
    animation: 
        cloudY 2.8s linear infinite alternate,
        cloudXreverse 25s linear infinite alternate;
}

@keyframes cloudY {
    0% {transform: translateY(0px);}
    100% {transform: translateY(5px);}
}
@keyframes cloudX {
    0% {right: 50px;}
    100% {right: 700px;}
}
@keyframes cloudXreverse {
    0% {left: 50px;}
    100% {left: 1000px;}
}

.bubble{
    background-image: url('../asset/bubble2.png');
    aspect-ratio: 2/3;
    animation: movebubble 3s linear infinite;
}



.bubble.two{
    animation: movebubble 5s linear infinite;
}
.bubble.three{
    animation: movebubble 5s 2s linear infinite;
}

@keyframes movebubble {
    0% {opacity: 0; transform: translateY(0px);}
    25% {opacity: .7; transform: translateY(-20px);}
    75% {opacity: .7; transform: translateY(-40px);}
    100% {opacity: 0; transform: translateY(-50px);}
}

.fishNemo{
    background-image: url('../asset/fish_nemo.png');
    aspect-ratio: 1/1;
    animation: movefish 2s infinite alternate;
}

.fishNemo.one{
    animation: movefish 2s infinite alternate;
}
.fishNemo.two{
    animation: movefish 2s infinite alternate;
}
.fishNemo.three{
    animation: movefish 2s 1.5s infinite alternate;
}

@keyframes movefish {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(10px,-10px);}
}
@keyframes movefishflip {
    0% {transform: translate(0px,0px) rotateY(180deg);}
    100% {transform: translate(30px,-30px) rotateY(180deg);}
}

/* scene 2 */

.fishGroup{
    background-image: url('../asset/fish_group.png');
    width: 350px;
    top: 150px;
    left: -350px;
    aspect-ratio: 638/209;
    animation: movefishgroup 30s infinite linear;
}

@keyframes movefishgroup {
    0% {transform: translate(0px,0px) rotate(0deg);}
    50% {transform: translate(900px,-150px) rotate(5deg);}
    90% {transform: translate(1600px,-140px) rotate(10deg);}
    100% {transform: translate(1600px,-125px) rotate(10deg);}
}

.fish2{
    background-image: url('../asset/fish2.png');
    width: 120px;
    aspect-ratio: 199/49;
}

.fish2.one{
    animation: movefish 5s infinite alternate;
}
.fish2.two{
    animation: movefish 3s .7s infinite alternate;
}
.fish2.three{
    animation: movefish 4s 1.5s infinite alternate;
}

.back_fish_1.one{
    animation: movefish 2s infinite alternate inherit;
}
.fish.two{
    animation: movefish 2s .7s infinite alternate inherit;
}
.fish.three{
    animation: movefish 2s 1.5s infinite alternate;
}

.brokeCoral1{
    background-image: url('../asset/broke\ coral1.png');
    aspect-ratio: 135/121;
}
.brokeCoral1.one{
    animation: 
    brokeCoralLeftDown 5s infinite,
    brokeCoralShow 5s infinite;
}
.brokeCoral1.two{
    animation: 
    brokeCoralRightUp 5s 3s infinite,
    brokeCoralShow 5s 3s infinite;
}

.brokeCoral2{
    background-image: url('../asset/broke\ coral2.png');
    aspect-ratio: 56/46;
}
.brokeCoral2.one{
    animation: 
    brokeCoralLeftUp 5s 4s infinite,
    brokeCoralShow 5s 4s infinite;
}
.brokeCoral2.two{
    animation: 
    brokeCoralRightUp 3s infinite,
    brokeCoralShow 3s infinite;
}
.brokeCoral2.three{
    animation: 
    brokeCoralRightDown 5s 1s infinite,
    brokeCoralShow 5s 1s infinite;
}

.brokeCoral3{
    background-image: url('../asset/broke\ coral3.png');
    aspect-ratio: 14/15;
    animation: 
    brokeCoralLeftDown 4s 1s infinite,
    brokeCoralShow 4s 1s infinite;
}
.brokeCoral4{
    background-image: url('../asset/broke\ coral4.png');
    width: 80px;
    left: 325px;
    bottom: 100px;
    aspect-ratio: 110/103;
    animation: 
    brokeCoralLeftUp 7s 2s infinite,
    brokeCoralShow 7s 2s infinite;
}
.brokeCoral5{
    background-image: url('../asset/broke\ coral5.png');
    width: 90px;
    left: 350px;
    bottom: 170px;
    aspect-ratio: 43/34;
    animation: 
    brokeCoralRightUp 7s 4s infinite,
    brokeCoralShow 7s 4s infinite;
}

@keyframes brokeCoralRightUp {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(25px,-25px);}
}
@keyframes brokeCoralRightDown {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(25px,25px);}
}
@keyframes brokeCoralLeftUp {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-25px,-25px);}
}
@keyframes brokeCoralLeftDown {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-25px,25px);}
}
@keyframes brokeCoralShow {
    0% {opacity: 0;}
    10% {opacity: 1;}
    70% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 0;}
}

.scene2light1{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene2_light1.png');
    animation: oplight 4s infinite alternate;
}
.scene2light2{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene2_light2.png');
    animation: oplight 4s 5s infinite alternate;
}


/* scene3 */


.scene3light1{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene3_light1.png');
    animation: oplight 4s infinite alternate;
}
.scene3light2{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene3_light2.png');
    animation: oplight 5s infinite alternate;
}

.fish_brown{
    background-image: url('../asset/fish_brown.png');
    width: 150px;
    aspect-ratio: 262/186;
}
.fish_nokyung{
    background-image: url('../asset/fish_nokyung_red.png');
    width: 150px;
    aspect-ratio: 289/216;
}
.fish_saba{
    background-image: url('../asset/fish_saba.png');
    width: 150px;
    aspect-ratio: 345/243;
}
.fish_yellow{
    background-image: url('../asset/fish_yellow.png');
    width: 150px;
    aspect-ratio: 158/133;
}
.fish_rainbow{
    background-image: url('../asset/fish_rainbow.png');
    width: 150px;
    aspect-ratio: 326/264;
}

.fishNemo.s3two, .fish_yellow.one{
    animation: movefishflip 4s infinite alternate;
}

.fish_yellow.two{
    animation: movefishflip 6s infinite alternate;
}
.fish_nokyung, .fishNemo.s3one{
    animation: movefishflip 4s 2s infinite alternate;
}
.fishNemo.s3five, .fish_rainbow, .fish_yellow.three{
    animation: movefishmore 5s infinite alternate;
}
.fish_yellow.four, .fishNemo.s3three, .fish_brown{
    animation: movefishmore 5s 1.5s infinite alternate;
}
.fish_saba, .fishNemo.s3four, .fish_yellow.three{
    animation: movefishmore 6s 3s infinite alternate;
}

@keyframes movefishmore {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(30px,-30px);}
}

.kraben{
    background-image: url('../asset/kraben.png');
    width: 150px;
    aspect-ratio: 367/260;
    animation: movekraben 15s linear infinite;
}
@keyframes movekraben {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-700px,800px);}
}

.turtle{
    background-image: url('../asset/turtle.png');
    width: 150px;
    aspect-ratio: 292/232;
    animation: moveturtle 40s 5s linear infinite;
}
@keyframes moveturtle {
    0% {transform: translate(0px,0px) rotateY(180deg);}
    100% {transform: translate(1200px,0px) rotateY(180deg);}
}

/* jmj */

.back_fish_1{
    animation: backfish1 4s 0s alternate infinite;
}

.back_fish_2{
    animation: backfish1 5s 0s alternate infinite;
}

.leftleg{
    animation: leftleg 5s alternate infinite;
}
.rightleg{
    animation: rightleg 7s alternate infinite;
}

.body{
    animation: body 5s alternate infinite;
}

.handleft{
    animation: handleft 3s 2s alternate infinite;
}

.hair{
    animation: hair 3s alternate-reverse infinite;
}

.face {
    animation: face 3s alternate infinite;
}

.namha{
    animation: namha 3s alternate infinite;
}

@keyframes backfish1 {
    0% {
        transform: translate(0px,0px);
        opacity: 0.3;}
    50%{
        opacity: 0.1;
    }
    100% {
        transform: translate(30px,-30px);
        opacity: 0.4;
    }
}

@keyframes leftleg{
    0% {
        transform: rotatez(0deg);
    }
    100% {
        transform: rotatez(10deg);
    }
}

@keyframes rightleg{
    0% {
        transform: rotatez(0deg);
    }
    100% {
        transform: rotatez(-5deg);
    }
}

@keyframes body{
    0% {
        transform: rotatez(0deg);
    }
    100% {
        transform: rotatez(10deg);
    }
}

@keyframes handleft{
    0%{
        transform: rotatez(0deg);
    }
    100%{
        transform: rotatez(10deg);
    }
}

@keyframes hair{
    0%{
        transform: rotatez(-5deg);
    }


    100%{
        transform: rotatez(5deg);
    }
}

@keyframes face{
    0%{
        transform: rotatez(-2deg);
    }


    100%{
        transform: rotatez(5deg);
    }
}

@keyframes namha{
    0%{
        transform: rotatez(0deg);
    }


    100%{
        transform: rotatez(20deg);
    }
}

.wetsuit{
    animation: wetsuit 10s alternate infinite;
}

@keyframes wetsuit{
    0%{
        transform: rotatez(0deg);
    }

    20%{
        transform: translateY(-30px);
    }
    50%{
        transform: rotatez(5deg);
    }
    80%{
        transform: translateY(30px);
    }
    100%{
        transform: rotatez(3deg);
    }
}


.fishback2,.fishback3-1{
    animation: backfish1se 4s 0s alternate infinite;
}

.fishback1,.fishback3{
    animation: backfish1se 2s 01s alternate infinite;
}

.fishback3-2{
    animation: backfish1se 3s 0s alternate infinite;
}

@keyframes backfish1se {
    0% {
        transform: translate(0px,0px);
        opacity: 1;}
    50%{
        opacity: 0.5;
    }
    100% {
        transform: translate(30px,-30px);
        opacity: 0.8;
    }
}

.lighte{
    width: 100%;
    height: 100%;
    background-image: url('../asset/light.png');
    z-index: 1;
    top: -40px;
    animation: 
        oplighte 2s infinite alternate;
}

@keyframes oplighte {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

.turtleeiktua{
    width: 50%;
    animation: movefishmore 3s infinite alternate;
}