@charset "utf-8";

/* 트랜스폼 사용법  
    y축 회전
    transform: rotateY(각도deg)
    == 같은 세팅 rotate: y 각도deg
    */

/* 영상이 스크롤하면서 크기 커지면서 시작하게 설정하는 건?
 */
.house{
  animation: 
  house-hi-ani 1s ease-in-out .5s forwards,
  house-bye-ani 1.5s ease-in 12s 3 alternate forwards;
}
@keyframes house-hi-ani {
  100%{top: 0%;
    scale: 2;
    transition: 3s;
  }
}
@keyframes house-bye-ani {
  100%{top: -80%;
    scale: 1;
    transition: 1s;
  }
}

  /*타이틀 움직이기*/
  .title{
    animation: title-ani 0.8s ease-out .5s forwards,
    title-moving-ani 3s ease-in-out 4s 10 alternate;
  }

  @keyframes title-ani {
    0%{
      top: 0;    
      left: 0;
          
    }
    100%{
    top: 80%;
    left: 50%;
    }
  }
  @keyframes title-moving-ani {
 to {
    left: 300px;
  }
  }


/* 서브타이틀 움직이기 */
.sub-title{
  animation: sub-ani 2s linear 3s forwards;
}
@keyframes sub-ani {
0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}



/* 1-1. 문짝에 애니메이션 호출적용! */
.door {
  /* 애니메이션- animation: 이시이지반방마 */
  /* animation: door-ani 1s ease-in-out 1s 3 alternate forwards; */
  /* alternate 는 from->to 경로 애니를 반대방향도 진행해주는 옵션값.
    기본값(backwards): 애니가 끝나면 처음값으로 돌아감.
     forwards 애니가 끝나면 끝나는 값으로 유지하게 하는 옵션값 */

  animation: door-ani 1s ease-in-out forwards;
}
/* 1-2. 문 열기 애니 키프레임 */
@keyframes door-ani {
  0% {
    transition: 0;
  }
  30% {
    opacity: 0%;
  }

  100% {
    opacity: 0;
  }
}

/* 2-1. 문대 애니호출 설정 */
.mundae {
  animation: mundae-ani 2s 0.2s forwards;
}

/* 2-2. 문대 걸어나오기 키프레임 */
@keyframes mundae-ani {
  0% {
    top: 339px;
    left: 329px;
    width: 84px;
  }
  20% {
    /* 중간장면 */
    top: 349px;
    left: 329px;
    width: 84px;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
  40% {
    top: 349px;
    left: 329px;
    width: 90px;
    /* 기울어지는 거 방지 */
    rotate: 0deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }

  50% {
    top: 369px;
    left: 329px;
    width: 90px;
    /* 기울어지기 */
    rotate: -10deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
  70% {
    top: 379px;
    left: 320px;
    width: 100px;
    /* 기울어지기 */
    rotate: 10deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
  80% {
    top: 310px;
    left: 280px;
    width: 150px;
    /* 기울어지기 */
    rotate: -10deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
  90% {
    top: 300px;
    left: 280px;
    width: 180px;
    /* 기울어지기 */
    rotate: 10deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
  100% {
    top: 200px;
    left: 250px;
    width: 300px;
    /* 기울어지기 */
    rotate: 0deg;
    /* 문짝보다 위로 오게 */
    z-index: 1;
  }
}

/* 애니메이션 호출설정 */
.ah {
  animation: ah-ani 3s ease-in-out 1s forwards;
}
.sj {
  animation: sj-ani 2s ease-in-out 4s forwards;
}
.rb {
  animation: rb-ani 2s ease-in-out 2s forwards;
}
.yj {
  /* animation: 하나, 둘; */
  /* 복합설정! */
  /* 유진이 등장 애니메이션 */
  /* 유진이 계속 움직이는 애니메이션 */
  animation: yj-ani 2s ease-in-out 1s forwards, 
  yj-moving-ani 1s ease-in-out 3s /* infinite */ 20 alternate;
}



.cw {
  animation: cw-ani 1s ease-in-out 4s forwards;
}
.bsj {
  animation: bsj-ani .5s 1s forwards;
}

/* 키프레임 */
/* 아현이 왼쪽 위에서 문대 왼쪽 옆으로 사선으로 사르르 내려옴 */
@keyframes ah-ani {
  0% {
    top: -200px;
    left: 10px;
    width: 100px;
  }
  50% {
    top: 50px;
    left: 20px;
    width: 100px;
  }
  70% {
    top: 50px;
    left: 10px;
    width: 100px;
  }

  100% {
    top: 180px;
    left: 0px;
    width: 300px;
  }
}
/* 유진이 오른쪽 창문에서 튀어나와서 문대왼쪽 아래로 사라졌다가 위로 뿅 올라옴 */
@keyframes yj-ani {
  0% {
    top: 212px;
    right: 99px;
    width: 30px;
  }
  30% {
    top: 200px;
    right: 275px;
    width: 300px;
  }
  70% {
    top: 400px;
    left: 30px;
    width: 300px;
  }

  /* 80% {
    top: 300px;
    right: 311px;
    width: 300px;
    z-index: 1;
  } */
  100% {
    top: 300px;
    left: 30px;
    width: 300px;
    z-index: 1;
    
  }
}

@keyframes yj-moving-ani {
  0% {
    top: 300px;
    left: 30px;
    width: 300px;
    z-index: 1;
    
  }
  /* 50%{translate: -100px;} */
  100%{translate: 300px;}
  z-index: 1;
}

/* 큰세느 문대 나온곳에서 나와서 문대 옆으로 커짐 */
@keyframes sj-ani {
  80% {
    top: 200px;
    left: 209px;
    width: 300px;
  }
  100% {
    top: 200px;
    left: 159px;
    width: 300px;
  }
}

/* 래빈 */
@keyframes rb-ani {
  /* 80% {
    top: 200px;
    right: 35px;
    width: 300px;
  } */
  0%
  {
    top: 212px;
    left: 99px;
    width: 30px; 
  }
  50% {
    top: 220px;
    right: -100px;
    width: 300px;
  }
  100% {
    top: 200px;
    left: 400px;
    width: 300px;
  }
}
/* 청우 */
@keyframes cw-ani {
  
  0%{
    top: 500px;
    left: -100px;
    width: 300px;
    transform-origin: bottom;
    rotate: 0deg;
  }
  30%{
    top: 175px;
    left: -100px;
    width: 300px;
    transform-origin: bottom;
    right: -231px;
    rotate: -18deg;
  }
  100% {
    top: 155px;
    left: -110px;
    width: 320px;
    rotate: 0deg;
  }
}

/* 배세진 */
@keyframes bsj-ani {
  0%{
    opacity: 0.3;
    top: 300px;
    right: 80px;
    width: 300px;  
  }
  100% {
    top: 250px;
    right: -100px;
    width: 300px;
    opacity: 1;
  }
}