body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: white;
  overflow: hidden;
  cursor: url('pngwing.com\ \(21\).png'), auto;
  display: flex; /* Flexbox 활성화 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-content: center;
}


.logo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  opacity: 0; /* 처음엔 보이지 않도록 설정 */
  animation: fadeIn 3s forwards; /* fadeIn 애니메이션 */
  animation-delay: 0s; /* 로고는 즉시 나타남 */
}

.container {
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}



h2 {
  position: absolute;
  bottom: 45%;
  text-align: center;
  opacity: 0; /* 처음에는 보이지 않도록 설정 */
  animation: fadeIn 3s forwards;
  animation-delay: 6s; /* 텍스트는 마지막에 나타남 */
  animation-fill-mode: forwards; /* 애니메이션 후 마지막 상태 유지 */
  opacity: 0; /* 애니메이션 후 텍스트는 0.9 투명도 유지 */
  font-size: 20px;
  line-height: 25px;
  font-weight: 400;
  font-family: 'SUIT-Regular';
  letter-spacing: 1px;
  animation: blink 1.5s ease-in-out 3;
    z-index: 100; /* 텍스트를 다른 이미지들보다 위에 배치 */
}

/* 깜박이는 애니메이션 */
@keyframes blink {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}


  /* 고양이 애니메이션 설정 */
  .cat {
    position: absolute;
    opacity: 0; /* 고양이도 처음엔 안 보임 */
    animation: fadeIn 3s forwards;
    animation-delay: 3s; /* 고양이는 마지막에 나타남 */
  }
  
  /* 고양이 커서 이벤트 */
  .cat {
    z-index: 10; /* 고양이는 항상 위에 */
    position: absolute;
    bottom: -400px;
    left: 0%;
    transition: bottom 1s ease-in-out; /* 부드럽게 이동 */
  }
  
  /* 커서를 올렸을 때 이미지 이동 */
  .cat:hover {
    bottom: -10%;
  }
/* fadeIn 애니메이션 정의 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 처음에는 보이지 않음 */
  }
  100% {
    opacity: 1; /* 마지막에는 완전히 보이게 됨 */
  }
}