/*==============================================================
  WEGO — Bouncy 레이어
  theme-dark.css 뒤에 로드되어 움직임을 "통통 튀게" 바꾼다.
  · 스프링 이징 / 알약 메뉴 + 따라다니는 하이라이트 / 튀어 오르는 드롭다운
  · 버튼·카드·아이콘 눌림·튕김 / 히어로 글자 바운스
  transform 은 tilt·magnetic 스크립트가 인라인으로 쓰므로
  여기서는 개별 속성(scale / translate / rotate)만 건드려 충돌을 피한다.
==============================================================*/

/*--------------------------------------------------------------
  1. 스프링 이징
--------------------------------------------------------------*/
:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* 한 번 넘쳤다가 두어 번 출렁이고 멈추는 스프링 */
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
                     1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%,
                     0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    --spring-soft: linear(0, 0.06 3%, 0.24 7%, 0.56 13%, 0.86 20%, 1.03 27%, 1.07 33%, 1.05 40%, 1.01 50%, 0.995 62%, 1);
  }
}

/*--------------------------------------------------------------
  2. 3색 팔레트 — 핑크를 빼고 청록 → 파랑 → 보라만 남긴다
     (theme-dark.css 의 4색 토큰을 덮어쓴다)
--------------------------------------------------------------*/
:root {
  --c-pink:     #7b5cff;
  --c-pink-rgb: 123, 92, 255;
  --grad:   linear-gradient(115deg, var(--c-cyan) 0%, var(--c-blue) 45%, var(--c-violet) 100%);
  --grad-2: linear-gradient(135deg, var(--c-blue), var(--c-violet));
}
.hero-aurora span:nth-child(3) { background: var(--c-blue); }

/*--------------------------------------------------------------
  3. 헤더 — 가운데 떠 있는 알약 메뉴
--------------------------------------------------------------*/
@media (min-width: 992px) {
  #header .navbar > ul {
    position: relative;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.9);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  #header.header-scrolled .navbar > ul { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }
  #header.header-scrolled { border-bottom-color: transparent; background: rgba(6, 9, 18, 0.45); }

  #header .navbar > ul > li > a,
  #header .navbar > ul > li > a:focus {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 9px 18px;
    border: 0;   /* style.css 의 hover 밑줄(border-bottom) 제거 */
    border-radius: 100px;
    transition: color 0.3s ease, scale 0.5s var(--spring);
  }
  #header .navbar > ul > li > a::after { display: none; }
  #header .navbar > ul > li > a:active { scale: 0.9; }

  /* 마우스를 따라 미끄러지는 하이라이트 — bouncy.js 가 위치를 정한다 */
  .navbar .nav-blob {
    position: absolute;
    top: 6px; left: 0;
    height: calc(100% - 12px);
    width: 0;
    border-radius: 100px;
    background: var(--grad);
    box-shadow: 0 10px 26px -10px rgba(var(--c-violet-rgb), 0.9);
    opacity: 0;
    pointer-events: none;
    transition: translate 0.6s var(--spring), width 0.6s var(--spring), opacity 0.25s ease, scale 0.6s var(--spring);
    scale: 0.6;
  }
  .navbar .nav-blob.is-on { opacity: 1; scale: 1; }
  #header .navbar > ul > li.is-blob > a,
  #header .navbar > ul > li.is-blob > a:focus { color: #060a14; }

  /* 드롭다운 — 위에서 톡 떨어지며 튕긴다 */
  .navbar .dropdown .nav-submenu {
    top: calc(100% + 14px);
    transform-origin: 50% 0;
    scale: 0.86;
    translate: 0 -10px;
    transition: opacity 0.2s ease, visibility 0.2s, scale 0.55s var(--spring), translate 0.55s var(--spring);
  }
  .navbar .dropdown:hover > .nav-submenu { top: calc(100% + 14px); scale: 1; translate: 0 0; }
  /* 알약과 드롭다운 사이 빈틈에서 hover 가 끊기지 않게 다리를 놓는다 */
  .navbar .dropdown .nav-submenu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -16px;
    height: 16px;
  }
  .navbar .dropdown:hover .nav-submenu li { animation: wg-pop-in 0.5s var(--spring) both; }
  .navbar .dropdown:hover .nav-submenu li:nth-child(2) { animation-delay: 0.04s; }
  .navbar .dropdown:hover .nav-submenu li:nth-child(3) { animation-delay: 0.08s; }
  .navbar .dropdown:hover .nav-submenu li:nth-child(4) { animation-delay: 0.12s; }
  .navbar .dropdown:hover .nav-submenu li:nth-child(n+5) { animation-delay: 0.16s; }
  .navbar .dropdown .nav-submenu a > i { transition: scale 0.5s var(--spring), rotate 0.5s var(--spring), background 0.3s ease; }
  .navbar .dropdown .nav-submenu a:hover > i { scale: 1.12; rotate: -8deg; }
}

@keyframes wg-pop-in {
  from { opacity: 0; translate: 0 -8px; scale: 0.9; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* 모바일 메뉴 — 항목이 차례로 튀어 들어온다 */
.navbar-mobile > ul > li { animation: wg-pop-in 0.55s var(--spring) both; }
.navbar-mobile > ul > li:nth-child(2) { animation-delay: 0.04s; }
.navbar-mobile > ul > li:nth-child(3) { animation-delay: 0.08s; }
.navbar-mobile > ul > li:nth-child(4) { animation-delay: 0.12s; }
.navbar-mobile > ul > li:nth-child(5) { animation-delay: 0.16s; }
.navbar-mobile > ul > li:nth-child(6) { animation-delay: 0.2s; }
.navbar-mobile > ul > li:nth-child(n+7) { animation-delay: 0.24s; }

/*--------------------------------------------------------------
  4. 버튼 — 커지며 튕기고, 누르면 쫀득하게 눌린다
--------------------------------------------------------------*/
.btn-grad, .btn-ghost, .cta-btn, .about-btn, .back-to-top {
  transition-property: transform, box-shadow, background-position, background, color, border-color, scale, rotate;
  transition-duration: 0.4s, 0.4s, 0.6s, 0.4s, 0.4s, 0.4s, 0.6s, 0.6s;
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--spring), var(--spring);
}
.btn-grad:hover, .btn-ghost:hover, .cta-btn:hover, .about-btn:hover { scale: 1.06; }
.btn-grad:active, .btn-ghost:active, .cta-btn:active, .about-btn:active { scale: 0.93; transition-duration: 0.12s; }
.btn-grad:hover i, .btn-ghost:hover i { animation: wg-nudge 0.9s var(--spring) infinite; }
@keyframes wg-nudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: 5px 0; }
}

.back-to-top:hover { scale: 1.15; rotate: -8deg; }

/*--------------------------------------------------------------
  5. 카드 — 떠오르며 튕기고, 아이콘은 젤리처럼
--------------------------------------------------------------*/
.services .icon-box,
.count-box,
.software-card {
  transition-property: background, border-color, box-shadow, translate, scale;
  transition-duration: 0.45s, 0.45s, 0.45s, 0.7s, 0.7s;
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--spring), var(--spring);
}
.services .icon-box:hover,
.count-box:hover,
.software-card:hover { translate: 0 -10px; }
.services .icon-box:active,
.software-card:active { scale: 0.97; transition-duration: 0.12s; }

.services .icon-box:hover .icon i,
.about .icon-box:hover i,
.count-box:hover i { animation: wg-jelly 0.9s var(--spring) both; }
@keyframes wg-jelly {
  0%   { scale: 1 1; }
  25%  { scale: 1.22 0.82; }
  45%  { scale: 0.86 1.16; }
  65%  { scale: 1.08 0.94; }
  85%  { scale: 0.98 1.02; }
  100% { scale: 1 1; }
}

/* 스크롤로 들어올 때 — 아래에서 튀어 오른다 (bouncy.js 가 .bp-in 을 붙인다) */
[data-bounce] { opacity: 0; translate: 0 48px; scale: 0.92; }
[data-bounce].bp-in {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 0.5s ease, translate 0.9s var(--spring), scale 0.9s var(--spring);
  transition-delay: var(--bp-delay, 0s);
}

/*--------------------------------------------------------------
  6. 히어로 — 글자가 위에서 떨어져 통통 튄다
--------------------------------------------------------------*/
#wego h1 .ch {
  transform: none;
  animation-name: wg-drop;
  animation-duration: 1.1s;
  animation-timing-function: linear;
  translate: 0 0;
  transition: translate 0.5s var(--spring), scale 0.5s var(--spring);
  cursor: default;
}
@keyframes wg-drop {
  0%   { opacity: 0; transform: translateY(-1.1em) scale(0.6, 1.3); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  40%  { opacity: 1; transform: translateY(0) scale(1.25, 0.75);    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  58%  { transform: translateY(-0.22em) scale(0.92, 1.1);           animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  74%  { transform: translateY(0) scale(1.08, 0.92);                animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  86%  { transform: translateY(-0.05em) scale(0.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
/* 글자 위에 마우스를 올리면 폴짝 */
@media (pointer: fine) {
  #wego h1 .ch:hover { translate: 0 -0.14em; scale: 1.08; }
}

/* 상단 배지 — 둥실 */
#wego h3 { animation: wg-bob 3.2s ease-in-out infinite; }
@keyframes wg-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/*--------------------------------------------------------------
  7. 움직임 줄이기 — 튕김을 모두 끈다
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  [data-bounce] { opacity: 1; translate: none; scale: none; }
  .btn-grad:hover, .btn-ghost:hover, .cta-btn:hover, .about-btn:hover,
  .services .icon-box:hover, .count-box:hover, .software-card:hover { scale: none; translate: none; }
}

.nav-blob { display: none; }
@media (min-width: 992px) { .navbar .nav-blob { display: block; } }

/* 하위 메뉴가 한 줄뿐이면(Web Apps) 구분선이 필요 없다 */
.navbar .dropdown .nav-submenu > li:only-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }