/* Main Section Animation Styles - JavaScript 애니메이션 전용 */

/* main 섹션 text_box 내부 텍스트 애니메이션 초기 상태 */
/* 모든 텍스트 요소가 처음에는 숨겨져 있음 */
#main_section .text_box h1,
#main_section .text_box p {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* first_section 애니메이션 준비 */
#first_section {
  overflow: hidden; /* h3가 커졌을 때 섹션을 벗어나지 않도록 함 */
}

/* 애니메이션 완료 후 상태 */
#main_section .text_box h1.visible,
#main_section .text_box p.visible {
  opacity: 1;
}

/* ---- GSAP 애니메이션 스타일 ---- */

/* second_section 슬롯머신 및 밑줄 효과 */
.main_big_text {
  perspective: 800px;
}
.main_big_text h1 .char {
  display: inline-block;
  will-change: transform;
}
.main_big_text h1 em {
  position: relative;
  z-index: 1;
  font-style: normal;
}
.main_big_text h1 em::before {
  content: "";
  width: 0;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-primary);
  z-index: -1;
  transition: width 0.6s ease-in-out;
}
.main_big_text h1 em.animate::before {
  width: 100%;
}

#main .progress_wrap.hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#main .progress_wrap {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ======================================== */
/* 스크롤 영역 제한을 위한 CSS */
/* ======================================== */

/* 핀된 섹션들의 스크롤 영역 제한 */
#first_section,
#round_section,
#last_section {
  height: 100vh; /* 고정 높이 */
  overflow: hidden; /* 스크롤 영역 제한 */
  position: relative;
}

/* round_section 특별 처리 - 아치 애니메이션을 위한 여유 공간 */
#round_section {
  height: 120vh; /* 아치 효과를 위해 약간 더 높게 */
  min-height: 100vh;
  max-height: 120vh;
}

/* ======================================== */
/* 스크롤 애니메이션을 위한 CSS */
/* ======================================== */

/* fade-up 애니메이션 초기 상태 */
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
  z-index: 100;
}

/* fade-up 애니메이션 활성화 상태 */
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* fade-up이 있는 section에 공간 확보 */
/* section:has(.fade-up) {
  padding-bottom: 50px;
} */

/* ======================================== */
/* RECRUIT 페이지 전용 애니메이션 */
/* ======================================== */

/* recruit 상자 애니메이션 초기 상태 */
#recruit .welfare_box .list_type_02 ul li {
  opacity: 0;
  transform: translateY(80px) scale(0.8) rotateX(15deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* recruit 상자 애니메이션 활성화 상태 */
#recruit .welfare_box .list_type_02 ul li.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* recruit 상자 호버 효과 */
#recruit .welfare_box .list_type_02 ul li:hover {
  transform: translateY(-8px) scale(1.02);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* recruit 상자 내부 텍스트 애니메이션 */
#recruit .welfare_box .list_type_02 ul li .text_box {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.2s;
}

#recruit .welfare_box .list_type_02 ul li.active .text_box {
  opacity: 1;
  transform: translateY(0);
}

/* recruit 상자 배경 그라데이션 효과 */
#recruit .welfare_box .list_type_02 ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

#recruit .welfare_box .list_type_02 ul li:hover::before {
  opacity: 1;
}

/* recruit 상자 텍스트 z-index 조정 */
#recruit .welfare_box .list_type_02 ul li .text_box {
  position: relative;
  z-index: 2;
}

/* recruit work_style 섹션 애니메이션 */
#recruit .work_style .list_type_01 ul li {
  opacity: 0;
  transform: translateX(-60px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#recruit .work_style .list_type_01 ul li:nth-child(even) {
  transform: translateX(60px) scale(0.9);
}

#recruit .work_style .list_type_01 ul li.active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

#recruit .work_style .list_type_01 ul li:hover {
  transform: translateY(-5px) scale(1.02);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* work_style 상자 배경 효과 */
#recruit .work_style .list_type_01 ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(61, 126, 229, 0.05) 0%, rgba(110, 198, 255, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

#recruit .work_style .list_type_01 ul li:hover::before {
  opacity: 1;
}

/* work_style 상자 텍스트 z-index 조정 */
#recruit .work_style .list_type_01 ul li .text_box {
  position: relative;
  z-index: 2;
}

/* ======================================== */
/* CREW 페이지 전용 애니메이션 */
/* ======================================== */

/* crew 리스트 아이템 애니메이션 초기 상태 */
#crew .list_type_03 ul li {
  opacity: 0;
  transform: translateY(60px) scale(0.95) rotateX(8deg);
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* crew 리스트 아이템 애니메이션 활성화 상태 */
#crew .list_type_03 ul li.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* crew 리스트 아이템 호버 효과 (그림자 없음) */
#crew .list_type_03 ul li:hover {
  transform: translateY(-6px) scale(1.03);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* crew 리스트 아이템 텍스트 z-index 조정 */
#crew .list_type_03 ul li .text_wrap {
  position: relative;
  z-index: 2;
}

/* 반응형 처리 */
@media (max-width: 768px) {
  #first_section,
  #round_section,
  #last_section {
    height: 100vh;
  }

  #round_section {
    height: 110vh; /* 모바일에서는 조금 줄임 */
  }

  /* 모바일에서 애니메이션 효과 조정 */
  #recruit .welfare_box .list_type_02 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even) {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li.active {
    transform: translateY(0) scale(1);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even).active {
    transform: translateY(0) scale(1);
  }

  /* crew 페이지 모바일 애니메이션 조정 */
  #crew .list_type_03 ul li {
    transform: translateY(30px) scale(0.98);
  }
}

/* ========================================
   CENTER 페이지 섹션 겹침(카드 오버랩) 효과 (is-soft.co.kr 스타일)
   ======================================== */
#center .list_type_04 {
  position: sticky;
  top: 120px;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

#center .list_type_04.active {
  transform: scale(1);
  filter: brightness(1.02);
}

#center .list_type_04.overlap {
  transform: scale(0.85) translateY(-40px);
  filter: brightness(0.95);
}

#center .list_type_04.next-section {
  /* transform: scale(1.1) translateY(30px); */
}

#center .list_type_04 + .list_type_04 {
  margin-top: -80px;
}

#center .list_type_04.overlap.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

/* ========================================
   ETHICS 페이지 전용 애니메이션
   ======================================== */

/* ethics list_type_06 상자 애니메이션 초기 상태 */
#ethics .list_type_06 li {
  opacity: 0;
  transform: translateY(60px) scale(0.95) rotateX(8deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* ethics list_type_06 상자 애니메이션 활성화 상태 */
#ethics .list_type_06 li.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* ethics list_type_06 상자 호버 효과 */
#ethics .list_type_06 li:hover {
  transform: translateY(-8px) scale(1.02);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 12px 30px rgba(61, 126, 229, 0.15);
}

/* ethics list_type_06 상자 배경 그라데이션 효과 */
#ethics .list_type_06 li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(61, 126, 229, 0.08) 0%, rgba(110, 198, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: 15px;
}

#ethics .list_type_06 li:hover::before {
  opacity: 1;
}

/* ethics list_type_06 상자 텍스트 z-index 조정 */
#ethics .list_type_06 li .txt_box {
  position: relative;
  z-index: 2;
}

/* ethics list_type_06 상자 아이콘 애니메이션 */
#ethics .list_type_06 li .icon_box {
  transition: all 0.4s ease;
}

#ethics .list_type_06 li:hover .icon_box {
  transform: scale(1.1) rotateY(10deg);
}

/* ethics terms_accordion 애니메이션 */
#ethics .terms_accordion .term_item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#ethics .terms_accordion .term_item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ethics terms_accordion 제목 호버 효과 */
#ethics .terms_accordion .term_title {
  transition: all 0.3s ease;
}


/* ethics terms_accordion 화살표 회전 효과 */
#ethics .terms_accordion .term_item.active .term_title i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* 반응형 처리 */
@media (max-width: 768px) {
  #first_section,
  #round_section,
  #last_section {
    height: 100vh;
  }

  #round_section {
    height: 110vh; /* 모바일에서는 조금 줄임 */
  }

  /* 모바일에서 애니메이션 효과 조정 */
  #recruit .welfare_box .list_type_02 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even) {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li.active {
    transform: translateY(0) scale(1);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even).active {
    transform: translateY(0) scale(1);
  }

  /* crew 페이지 모바일 애니메이션 조정 */
  #crew .list_type_03 ul li {
    transform: translateY(30px) scale(0.98);
  }

  /* ethics 페이지 모바일 애니메이션 조정 */
  #ethics .list_type_06 li {
    transform: translateY(30px) scale(0.98);
  }

  #ethics .terms_accordion .term_item {
    transform: translateY(20px);
  }
}

/* ========================================
   ETHICS-GUIDE 페이지 전용 애니메이션
   ======================================== */

/* ethics-guide list_type_06 상자 애니메이션 초기 상태 */
#ethicsGuide .list_type_06 li {
  opacity: 0;
  transform: translateY(60px) scale(0.95) rotateX(8deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* ethics-guide list_type_06 상자 애니메이션 활성화 상태 */
#ethicsGuide .list_type_06 li.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* ethics-guide list_type_06 상자 호버 효과 */
#ethicsGuide .list_type_06 li:hover {
  transform: translateY(-8px) scale(1.02);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 12px 30px rgba(61, 126, 229, 0.15);
}

/* ethics-guide list_type_06 상자 배경 그라데이션 효과 */
#ethicsGuide .list_type_06 li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(61, 126, 229, 0.08) 0%, rgba(110, 198, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: 15px;
}

#ethicsGuide .list_type_06 li:hover::before {
  opacity: 1;
}

/* ethics-guide list_type_06 상자 텍스트 z-index 조정 */
#ethicsGuide .list_type_06 li .txt_box {
  position: relative;
  z-index: 2;
}

/* ethics-guide list_type_06 상자 아이콘 애니메이션 */
#ethicsGuide .list_type_06 li .icon_box {
  transition: all 0.4s ease;
}

#ethicsGuide .list_type_06 li:hover .icon_box {
  transform: scale(1.1) rotateY(10deg);
}

/* ethics-guide list_type_07 상자 애니메이션 초기 상태 */
#ethicsGuide .list_type_07 li {
  opacity: 0;
  transform: translateY(60px) scale(0.95) rotateX(8deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* ethics-guide list_type_07 상자 애니메이션 활성화 상태 */
#ethicsGuide .list_type_07 li.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}


/* ethics-guide content_box 제목 애니메이션 */
#ethicsGuide .content_box h5 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#ethicsGuide .content_box.animate h5 {
  opacity: 1;
  transform: translateY(0);
}

/* ethics-guide content_box 제목 개별 애니메이션 */
#ethicsGuide .content_box h5.animate {
  opacity: 1;
  transform: translateY(0);
}

/* 반응형 처리 */
@media (max-width: 768px) {
  #first_section,
  #round_section,
  #last_section {
    height: 100vh;
  }

  #round_section {
    height: 110vh; /* 모바일에서는 조금 줄임 */
  }

  /* 모바일에서 애니메이션 효과 조정 */
  #recruit .welfare_box .list_type_02 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even) {
    transform: translateY(40px) scale(0.9);
  }

  #recruit .work_style .list_type_01 ul li.active {
    transform: translateY(0) scale(1);
  }

  #recruit .work_style .list_type_01 ul li:nth-child(even).active {
    transform: translateY(0) scale(1);
  }

  /* crew 페이지 모바일 애니메이션 조정 */
  #crew .list_type_03 ul li {
    transform: translateY(30px) scale(0.98);
  }

  /* ethics 페이지 모바일 애니메이션 조정 */
  #ethics .list_type_06 li {
    transform: translateY(30px) scale(0.98);
  }

  #ethics .terms_accordion .term_item {
    transform: translateY(20px);
  }

  /* ethics-guide 페이지 모바일 애니메이션 조정 */
  #ethicsGuide .list_type_06 li {
    transform: translateY(30px) scale(0.98);
  }


}


/* ========================================
   AI SOLUTIONS 섹션 가로 스크롤 (기존 CSS에 영향 없음)
   ======================================== */
#ai_solutions .full_section_03 {
  overflow: hidden;
}

#ai_solutions .full_section_03 ul {
  display: flex;
  gap: 40px;
  transition: transform 0.6s ease;
  width: max-content;
  margin: 0 auto;
}

#ai_solutions .full_section_03 ul li {
  flex-shrink: 0;
  width: 800px;
}

/* AI Solutions 모바일 반응형 */
@media (max-width: 768px) {
  #ai_solutions .full_section_03 ul {
    gap: 20px;
  }
  
  #ai_solutions .full_section_03 ul li {
    width: 300px;
  }
}