/* 텍스트 인터랙션  */
/*
사용 시 html 구조
<div class="swap-up-text">
    <div class="link-text swap-up-text-transition swap-up-text-primary">
      의회안내
    </div>
    <div class="link-text swap-up-text-transition swap-up-text-clone" aria-hidden="true">
      의회안내
    </div>
</div>
*/

.swap-up-text-transition {
  transition: transform var(--spring-transition);
}

.swap-up-text .swap-up-text-primary {
  transform: translateY(-100%);
}

.swap-up-text .swap-up-text-clone {
  transform: translateY(-100%);
}

.swap-up-text:hover .swap-up-text-primary {
  transform: translateY(0%);
}

.swap-up-text:hover .swap-up-text-clone {
  transform: translateY(0%);
}

.swap-up-text:hover div:last-child {
  transform: translateY(0%);
}

/* 메뉴 애니메이션 */
.menu-animation {
  transition: all var(--spring-transition);
}

.menu-animation:not(.active):hover {
  padding-left: 12px;
}

/* ----------------- */

@keyframes jumpUp {
  0% {
    color: var(--earth-500);
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  100% {
    color: var(--earth-500);
    transform: translateY(0);
  }
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes effect {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.effect {
  animation: effect 1.5s 0.09s ease-in-out forwards;
}

.effect-delay-1 {
  animation: effect 1s 0.1s ease-in-out both;
}

/* 스크롤 트리거 애니메이션 (main-middle-wrap 이후 섹션용) */
.fade-up-scroll {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 스크롤 애니메이션 딜레이 옵션 */
.fade-up-scroll.delay-100 {
  transition-delay: 0.1s;
}

.fade-up-scroll.delay-200 {
  transition-delay: 0.2s;
}
