.animation-container {
  position: relative;
  width: 100vw;
  height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.circle {
  position: absolute;
  width: 280px; /* 원의 크기 유지 */
  height: 280px;
  border-radius: 50%;
  border: 5px solid #ffffff67;
  opacity: 0;
  transform: translate(-20%, -20%) scale(0); /* 초기 중앙 정렬 및 크기 0 */

  /* 원 안의 글자를 중앙 정렬하기 위한 Flexbox 설정 */
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center;   /* 수직 중앙 정렬 */
}


/* 개별 원의 색상 (반투명) */
.circle-1 { background-color: rgba(255, 99, 71, 0.5); }
.circle-2 { background-color: rgba(70, 130, 180, 0.5); }
.circle-3 { background-color: rgba(60, 179, 113, 0.5); }

/* 원 안의 글자 스타일 */
.circle span {
  color: #ffffff; /* 글자 색상 (원색과 대비되도록) */
  font-size: 1.2em; /* 글자 크기 */
  font-weight: bold;
  opacity: 1; /* 초기에는 글자가 보이지 않도록 */
  /* transform: translateY(20px); // 필요없음 */
  z-index: 10; /* 원 위에 표시되도록 */
  text-align: center;
}

.text-overlay {
  position: absolute;
  color: #ffffff;
  font-size: 2em;
  font-weight: normal;
  opacity: 0;
  transform: translateY(40px);
  z-index: 10;
}