@charset "utf-8";
/* 갤럭시플립 회전 애니 CSS */

/* 웹폰트 */
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-image: linear-gradient(to bottom, #fff, #883b3b 50%, #fff);
  /* 넘치는 자식요소 숨기기 */
  overflow: hidden;

  /* 회전하는 아이폰을 입체감있게 보이게 하기 위해서 원근 설정- 화면단위로!! */
  perspective: 50vh;
}

/* 아이폰박스 */
.zflip {
  position: absolute;
  /* 박스 정중앙 보내기 */
top: 50%;
left: 50%;
translate: -50% -50%;

  height: 5vh;
/* aspect-ratio: 3/4;  */
/* 비율뭘로하지?ㅇ?ㅇ?? */

  /* 입체적용설정 */
  transform-style: preserve-3d;

  /* 보기 편하게 회전적용 : x축 10도, y축 30도 */
  transform: rotateX(10deg) rotateY(30deg);

  /* 임시선 */
  /* outline: 1px solid #000; */
}
/* 폰 각면 공통 */
.zflip span {
  position: absolute;
  width: 200px;
  height: 400px;

  /* 배경공통 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 배경 투명부분을 흰색으로 채움 - 곡면 사이에 빈공간이 있어서 */
  background-color: #fff;
}

/* 1. 앞면 */
.zflip span:nth-child(1) {
  background-image: url(../images/ip01.png);
  /* z축으로 10px 앞로 보내기 */
  translate: 0 0 10px;
}
/* 2. 뒷면 */
.zflip span:nth-child(2) {
  background-image: url(../images/ip02.png);

  /* z축으로 10px 뒤로 보내기 */
  translate: 0 0 -10px;
  /* 뒷면에서 바로 보여야하니까 y축 180도 회전 */
  rotate: y 180deg;
}
/* 3. 오른쪽면 */
.zflip span:nth-child(3) {
  background-image: url(../images/ip03.png);

  /* 폰은 얇으니까 가로크기 재설정 */
  width: 20px;

  /* 오른쪽 끝으로 위치이동 */
  /* 크기의 반 나가서 회전 */
  right: -10px;
  /* y축 90도 회전 */
  rotate: y 90deg;
}
/* 4. 왼쪽면 */
.zflip span:nth-child(4) {
  background-image: url(../images/ip04.png);

  /* 폰은 얇으니까 가로크기 재설정 */
  width: 20px;

  /* 왼쪽 끝으로 위치이동 */
  /* 크기의 반 나가서 회전 */
  left: -10px;
  /* y축 -90도 회전: 아이폰이미지에 그림자가 있어서 각도 맞춤 */
  rotate: y -90deg;
}
/* 5. 아랫면 */
.zflip span:nth-child(5) {
  background-image: url(../images/ip05.png);

  /* 폰은 얇으니까 세로크기 재설정 */
  height: 20px;

  /* 아래쪽 끝으로 위치이동 */
  bottom: -10px;
  /* x축 90도 회전 */
  rotate: x 90deg;
}

/* 6. 윗면 */
.zflip span:nth-child(6) {
  background-image: url(../images/ip06.png);

  /* 폰은 얇으니까 세로크기 재설정 */
  height: 20px;

  /* 위쪽 끝으로 위치이동 */
  top: -10px;
  /* x축 90도 회전 */
  rotate: x 90deg;
}

/* 아이폰애니클래스 */
.zflip {
  /* 애니메이션적용 */
  animation: zflip-ani 2s ease-in-out 1s 2 alternate;
  /* 2초간, 처음과 끝을 천천히, 1초 기다린 후, 2번 실행, 반대방향 애니 세팅*/
}

/* 아이폰 회전 애니메이션 */

@keyframes zflip-ani {
  to {
    /* 최종상태 */
    transform: rotateX(-350deg) rotateY(390deg);
  }
}

/* 흘러가는 글자 박스 */
.flow-box {
  /* 박스 포지션 */
  position: fixed;
  top: 2vh;
  background: #ffc53c;
}

/* 글자박스 */
.text-box {
  /* 플렉스박스 : ul과 ul도 옆으로 흐르게함 */
  display: flex;
  

  /* 보이는 화면만큼 가로폭 */
  width: 100vw;

  /* 애니메이션 호출 */
  /* animation: text-flow-ani 5s linear infinite; */
  /* 반대방향: reverse */
  animation: text-flow-ani 5s linear infinite reverse;
}

/* 두번째 박스 */
.flow-box.box2 {
  /* 위치를 하단으로 이동 */
  top: auto;
  bottom: 2vh;
}

/* 두번째 박스의 글자박스 */
.box2 .text-box {
  /* 방향 변경 */
  animation-direction: normal;
}

/* 글자박스 ul */
.text-box ul {
  /* 플렉스박스 */
  display: flex;
  /* 부모박스채우기 
  -> flex-shrink값을 0이여야만 적용됨!!! */
  width: 100%;
  /* 부모에 맞춰서 줄어드는 flex자식속성인
  flex-shrink 기본값이 1이므로 내가 원하는
  크기를 설정하려면 이 속성값을 0으로 해야
  자동으로 줄어드는 속성을 없앨 수 있다! */
  flex-shrink: 0;

  /* 초기화 */
  margin: 0;
  /* 패딩말고 간격 넓히는 다른 방법없을까? 질문 */
  padding: 7px;
  list-style: none;
}
/* 글자박스 ul li */
.text-box ul li {
  /* 가로크기 4등분 */
  /* width: calc(100vw/4);이렇게 가로크키 계산보다 flex:1세팅이 더 플렉스스러운세팅!*/
  flex: 1;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: 1.5vw;
  font-style: italic;
  /* outline: 2px dashed red; */

  /* 글자에 그라데이션 넣기: 3가지 세팅 필수!!! */
  /* 1. 배경색 그라데이션 넣기 또는 이미지 넣기 */
  background-image: linear-gradient(to bottom, #0a0a0a, #ff0000);
  /* 2. 배경 클리핑 값 text로 설정 */
  background-clip: text;
  /* 3. 글자색 투명으로 설정 */
  color: transparent;
  /*아래와 같이 글자색 투명 설정해도 유효함
  /* -webkit-text-fill-color: transparent; */

  /* 글자에 그림자넣기*/
  /* text-shadow: -5px -5px 1px rgb(27, 26, 29); */
  /* 질문?!?!@>@>@>@ 이렇게 하니까 그림자가 글자 위로 와여- 이건 클리핑한 글자라서 그럼
  그냥 그림자 주면 안되고 다르게!: 필터 드롭쉐도우 효과주기!!!!!!!!!! */
  filter: drop-shadow(3px 3px 7px rgb(255, 33, 33));

  /* 글자그림자를 text-shadow로 넣으면
  그라데이션 색 넣기 글자이므로 그림자가
  앞으로보임(이유는 글자색이 투명해서!)
  그래서 filter속성의 drop-shadow를 사용하면 된다!
    filter효과는 요소 전체에
  종합적인 효과를 주는 속성이다! */
}

/* 글자이동 애니메이션 키프레임 : .text-box에서 호출함*/
@keyframes text-flow-ani {
  to {
    /* x축으로 내크기의 절반만큼 왼쪽으로 이동함! */
    translate: -50%;
  }
}

/* 아이폰 미리보기 중앙흘러가는 박스 */
.preview-box {
  position: fixed;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  text-align: center;
  /* 크기 */
  width: 100vw;
/* 넘치는 자식 안보이게 숨기기 */
  overflow: hidden;
  z-index: -1;
}

/* 무빙박스 */
.moving-box {
  /* 플렉스박스 */
  display: flex;
  /* 가로크기 */
  width: 200%;
   /* 애니메이션 호출 : 이시이지반방마 */
  animation: image-flow-ani 20s linear infinite;

}
/* 파트박스: 무빙박스의 자식박스 2개  */
.part-box {
  /* 플렉스박스 */
  display: flex;
  flex: 1;
  /* 자식요소간 사이간격 -> flex의 간격은 gap!!!
  gap: 줄간격 열간격/// 하나만 쓰면 줄 열 동시세팅*/
  gap: 4vw;
  /* 박스 앞뒤패딩 */
  padding: 0 4vw;
}

/* 개별박스 */
.part-box div{
   position: relative;
  /* 부모자격! */
  flex: 1;
}
/* 개별박스의 이미지 공통 */
.part-box div img{
  width: 100%;

} 
/* 두번째 이미지를 앱솔루트로 변경! */
.part-box div img:last-child{
 position: absolute;
  top: 50%;
    translate: 0 -50%;
    left: 4%;
    width: 92%;
  /* 가로사이즈에 맞게 테두리둥글리니까 vw!!!단위 너무 좋아 */
  /* 근데 테두리 둥글릴 필요없이 그냥 클리핑하면 안되나여? -> 포토샵클리핑마스크같은건 없나봐*/

  /* 프레임 이미지보다 아래에 위치 */
  z-index: -1;
}

/* 폰5개 애니메이션 키프레임 : .moving-box에서 호출함*/
@keyframes image-flow-ani {
  to {
    /* x축으로 내크기의 절반만큼 왼쪽으로 이동함! */
    translate: -50%;
  }
}


/* 이미지 크기가 다르니까 가상요소로 수정하기 */

.part-box div::before {
    content: '';
    position: absolute;
    top: 2%;
    left: 1%;
    width: 96%;
    height: 96%;
    background-color: black;
    z-index: -1;
    border-radius: 2vw; 
  }