@charset "utf-8";
/* Open Door CSS - OpenDoor.css */

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');
/* font-family: 'Comfortaa', cursive; */

/* 초기화 */
html, body, h1{
    margin: 0;
    padding: 0;
}

body{
    background-color: #9c0;

    /* 배경색 애니메이션 : 이시이지반방마 */
    animation: bgAni 10s linear infinite;
}

/* 배경색 키프레임 */
@keyframes bgAni {
    0%{
        background-color: #9c0;
    }
    20%{
        background-color: rgb(228, 196, 15);
    }
    40%{
        background-color: rgb(0, 155, 147);
    }
    60%{
        background-color: rgb(172, 0, 29);
    }
    80%{
        background-color: rgb(139, 0, 204);
    }
    100%{
        background-color: #9c0;
    }
}

/* 전체 타이틀 */
.tit{
    /* height: 50px; => auto로 글자크기만큼 유동적으로 커졌다 작아졌다하게 두기 */
    font-family: 'Comfortaa', cursive;
    /* 최대 글자크기 지정 */
    font-size: min(5vw, 42px);
    margin: 5vh 0;
    /* 마진/패딩도 보이는 화면 기준으로 주면 good */
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #222;

    /* 넘치는 자식(span) 숨기기 */
    overflow: hidden;
}

/* 글자만 싸고 있는 span */
.tit span{
    display: block;
    transform: translateY(100%);

    /* 등장 애니메이션 : 이시이지반방마 */
    animation: upAni .3s ease-out 1.5s forwards;
}

/* 등장 키프레임 */
@keyframes upAni {
    to{
        transform: translateY(0%);
    }
} /* upAni 키프레임 끝 */

/* 전체 랩핑 박스 */
.wrap{
    overflow: hidden;

    /* 3D 문이 열렸을 때 위아래가 잘리는 것을 방지하기 위해서 패딩을 줌 */
    padding: 50px 0;
}


/* 전체 문 부모 */
.cont{
    width: 200px;
    height: 300px;
    margin: 0 auto;
    background-color: #900;

    /* 트랜스폼 y축 이동 - 위아래 패딩을 줬기 때문에, 그거 고려해서 내 크기보다 조금 더 큰 값을 줌 */
    transform: translateY(120%);

    /* 등장 애니메이션 : 이시이지반방마 */
    animation: upAni .6s cubic-bezier(0.18, 0.89, 0.45, 1.59) 1s forwards;
}

/* 문 프레임 */
.frame{
    /* 전체 문 부모의 상단에서 살짝 떨어져 아래로 내려오게 만듦 */
    position: relative;
    top: 20px;

    width: 150px;
    height: 280px;
    margin: 0 auto;
    background: url(../images/seashore.jpg) no-repeat center/auto 100%;

    /*******************************************
        [ 3D 원근 설정 ]
    1.셋팅위치 : 3D 원근 설정 할 대상의 부모 요소
    2.설정방법
    perspective : 수치;
    ->'수치'는 px단위로, 숫자가 클수록 소실점이 먼 것임 = 각도가 작아짐
    (이 거리는 기준점에서 소실점까지의 거리임)
    *******************************************/
    perspective: 480px;
    /*******************************************
        [ 뷰포인트(관찰자위치) 변경옵션 ]
    perpective-origin : 가로 세로;
    - 가로축: left, center, right, px, % 등 단위
    - 세로축: top, center, bottom, px, % 등 단위
    -> 두 값 중에 하나만 쓸 수 있고 복합일 경우
    2가지를 같이 셋팅함!
    *******************************************/
    /* perspective-origin: top; */

    /* 파도치는 애니 넣기 */
    animation: waveAni 3s ease-in-out infinite alternate;
}

/* 배경이미지 크기 변경으로, 파도치는 애니 */
@keyframes waveAni {
    to{
        background-size: auto 120%;
    }
} /* 파도치는 애니 끝 */

/* 문짝 */
.door{
    position: relative;
    /* 부모자격 : .handle */
    z-index: 1;
    /* 엘사보다 위에 있게 만듦 */
    width: 150px;
    height: 280px;
    background-color: #c90;

    /* 문짝 회전 */
    transform: rotateY(30deg);
    /* 문짝 회전축 변경(축의 기본값은 가운데임) */
    transform-origin: left;
    /*
        [ 트랜스폼 회전축 변경속성 ]
    transform-origin: 가로축 세로축
    - 가로축: left, center, right, px, % 등 단위
    - 세로축: top, center, bottom, px, % 등 단위
    */

    /* 애니메이션 지정 : 이시이지반방마 */
    animation:
    /* 처음에 1초간 열림 후 끝상태 유지 */
    openFirst 1s ease-in-out forwards,
    /* 처음 열리는 애니 기다렸다가(1초 후) 계속 여닫기 애니 작동 */
    openDoor 2s ease-in-out 1s infinite alternate;

    /* 애니메이션 상태 관리 - anips : 처음에 멈추게 설정해두기 */
    animation-play-state: paused;
    /*
    animation-play-state 상태 속성
    1.running : 작동
    2.paused : 멈춤
    */

}

/* 문짝 부모에 마우스오버시 문짝 애니 적용 */
.cont:hover .door{
    /* 마우스오버하면 움직이게 설정해두기 */
    animation-play-state: running;
}

/* 문짝 처음 열기 키프레임 */
@keyframes openFirst {
    to{
        transform: rotateY(60deg);
    }
} /* 문짝 처음 열기 키프레임 끝 */

/* 문짝 여닫기 키프레임 */
@keyframes openDoor {
    0%{
        transform: rotateY(60deg);
    }
    100%{
        transform: rotateY(-60deg);
    }
} /* 문짝 여닫기 키프레임 끝 */

/* 손잡이 */
.handle{
    position: absolute;
    top: 140px;
    right: 10px;

    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: blue;
}

/* 엘사박스 */
#elsa{
    position: absolute;
    top: 0;

    width: 150px;
    height: 280px;
    overflow: hidden;
}

/* 엘사 이미지 */
#elsa img{
    margin-left: 133px;
    transform-origin: bottom;

    /* 엘사 애니 : 이시이지반방마 */
    animation: elsaAni 1s ease-in-out infinite alternate;
    /* 처음에 멈춰있기 (문열릴때부터 같이 움직이기) */
    animation-play-state: paused;
}

/* 마우스오버시 엘사애니 작동 */
.cont:hover #elsa img{
    animation-play-state: running;
}

/* 엘사 애니 키프레임 */
@keyframes elsaAni {
    to{
        transform: rotate(-10deg);
    }
} /* 엘사 애니 키프레임 끝 */