/* 01~04 버튼 '옆으로 톡' 반동 — 첫 화면 모션이 끝날 때 차례로 한 번, 그리고 누를 때 (반동 후 이동)
   (빼려면 index.html의 svc-wave.css 링크와 아래쪽 스크립트를 지우면 됩니다.) */
:root { --wave-start: 3.7s; }
html.hero-seen { --wave-start: .5s; }

/* 처음 한 번: 01 → 04 차례로, 이동 방향(오른쪽)으로 짧게 톡 */
.svc-list .num, .svc-list .svc-t { animation: side .38s linear var(--d) 1 both; }
.svc-list .svc-t { animation-delay: calc(var(--d) + .03s); }
.svc-list .go    { animation: side-go .38s linear calc(var(--d) + .06s) 1 both; }
.svc-list li:nth-child(1) { --d: calc(var(--wave-start) + 0s); }
.svc-list li:nth-child(2) { --d: calc(var(--wave-start) + .1s); }
.svc-list li:nth-child(3) { --d: calc(var(--wave-start) + .2s); }
.svc-list li:nth-child(4) { --d: calc(var(--wave-start) + .3s); }

/* 누를 때: 조금 더 밀렸다 돌아온 뒤 0.28초 뒤 이동 (index.html 아래쪽 스크립트) */
.svc-list a.tap .num, .svc-list a.tap .svc-t { animation: side-tap .26s linear 0s 1 both; }
.svc-list a.tap .go { animation: side-tap-go .26s linear 0s 1 both; }

@keyframes side {
  0%   { transform: none;              animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  35%  { transform: translateX(3px);   animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  70%  { transform: translateX(-.5px); animation-timing-function: ease-out; }
  100% { transform: none; }
}
@keyframes side-go {
  0%   { transform: none;              animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  35%  { transform: translateX(5px);   animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  70%  { transform: translateX(-1px);  animation-timing-function: ease-out; }
  100% { transform: none; }
}
@keyframes side-tap {
  0%   { transform: none;              animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  40%  { transform: translateX(4px);   animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: none; }
}
@keyframes side-tap-go {
  0%   { transform: none;              animation-timing-function: cubic-bezier(.2, 0, .1, 1); }
  40%  { transform: translateX(7px);   animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-list .num, .svc-list .svc-t, .svc-list .go,
  .svc-list a.tap .num, .svc-list a.tap .svc-t, .svc-list a.tap .go { animation: none !important; }
}