@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/static/font/PretendardVariable.woff2') format('woff2-variations');
}

@layer base {
    html {
        font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
    }
}

::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

::-webkit-scrollbar-thumb {
    background-color: #989898;
    border-radius: 5px;
    background-clip: padding-box;
    cursor: pointer;
    border: 0 solid transparent;
}

::-webkit-scrollbar-track {
    background-color: #e0e0e0;
    border-radius: 5px;
}

/*왼쪽에서부터 글자가 하나씩 나타나는 효과*/
.tracking-in-left {
  animation: tracking-in-left 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  transform-origin: left;  /* ⭐ 왼쪽 기준으로 나타나게 */
}

@keyframes tracking-in-left {
  0% {
    transform: scaleX(0.4); /* 왼쪽에서 시작 */
    opacity: 0;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.gradient-flow {
  background-size: 300% 300%;
  animation: gradientMove 6s ease infinite;
}

/*메인 RISE 애니메이션 ---------------------------------------------------------------------*/
.rise-anim {
  position: relative;
  font-weight: 900;
  color: white;
}

.rise-anim::after {
  content: attr(data-shadow);
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;

  background: linear-gradient(
    90deg,
    #49acff 0%,   /* blue-500 */ #34e1ff 50%,  /* cyan-500 */ #62e3d4 100%  /* teal-500 */
  );
  border-radius: 5px;
  transform: scaleX(0);
  animation: .5s forwards hover-v linear;

  z-index: -1;
}

@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 4.5vh;
     }
}

/*메인 Intelligent Business Growth 언더라인 애니메이션 ---------------------------------------------------------------------*/
.ibg-underline {
  line-height: 1.3;
  display: inline;
  position: relative;

  background-image: linear-gradient(
    transparent 60%,
    #e1fffe 60%,
    #b0f8ff 85%,
    transparent 85%
  );

  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: ibgUnderline 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
}

.ibg-underline-teal {
  line-height: 1.3;
  display: inline;
  position: relative;

  background-image: linear-gradient(
    transparent 60%,
    #e1fffe 60%,
    #92ffd4 85%,
    transparent 85%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: ibgUnderline 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
}

.ibg-underline-slate {
  line-height: 1.3;
  display: inline;
  position: relative;

  background-image: linear-gradient(
    transparent 60%,
    #c9d3e8 60%,
    #b1bcd2 85%,
    transparent 85%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: ibgUnderline 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
}

@keyframes ibgUnderline {
  to {
    background-size: 100% 100%;
  }
}

/*자연스러운 무한 반복 페이드 효과 ---------------------------------------------------------------------*/
.fade-loop {
  animation: fadeInOut 4s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  20%  { opacity: 1; }  /* 서서히 나타남 */
  60%  { opacity: 1; }  /* 머무름 */
  100% { opacity: 0; }  /* 서서히 사라짐 */
}

/*테두리 효과 ---------------------------------------------------------------------*/
@keyframes borderPulse {
    0% {
        border-color: rgba(14, 165, 233, 0.6); /* sky-500 60% */
        box-shadow: 0 0 0.6vh rgba(14, 165, 233, 0.2);
    }
    50% {
        border-color: rgba(14, 165, 233, 1);   /* sky-500 100% */
        box-shadow: 0 0 1.4vh rgba(14, 165, 233, 0.55);
    }
    100% {
        border-color: rgba(14, 165, 233, 0.6);
        box-shadow: 0 0 0.6vh rgba(14, 165, 233, 0.2);
    }
}

.animate-borderPulse {
    animation: borderPulse 2.4s ease-in-out infinite;
}


/*왼쪽에서 살짝 나타났다 → 오른쪽으로 조금 가면서 → 사라지는 애니메이션 무한 반복 ---------------------------------------------------------------------*/
@keyframes arrowMove {
  0% {
    opacity: 0;
    transform: translateX(-15%);
  }
  20% {
    opacity: 1;
    transform: translateX(0%);
  }
  80% {
    opacity: 1;
    transform: translateX(10%);
  }
  100% {
    opacity: 0;
    transform: translateX(15%);
  }
}

/*위에서 살짝 나타났다 → 아래로 조금 가면서 → 사라지는 애니메이션 무한 반복 ---------------------------------------------------------------------*/
@keyframes arrowMoveDown {
  0% {
    opacity: 0;
    transform: translateY(-15%);
  }
  20% {
    opacity: 1;
    transform: translateY(0%);
  }
  80% {
    opacity: 1;
    transform: translateY(10%);
  }
  100% {
    opacity: 0;
    transform: translateY(15%);
  }
}

mark {
    animation: highlight 5s linear infinite;
    background: linear-gradient(90deg, #a2f4fd 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

@keyframes highlight {
    0% {
        background-position: 100% 0;
    }
    30%, 70% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0; /* 다시 처음 상태로 돌아가게 변경! */
    }
}