/* 모션이 끝난 뒤에도 知體質 옆 세로선과 01~04 밑줄에 빛이 은은하게 흐름
   (빼려면 index.html의 lines-motion.css 링크만 지우면 됩니다.) */
@property --lp { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@property --la { syntax: '<number>'; inherits: false; initial-value: 0; }

/* 세로선: 위→아래로 흐르는 밝은 파랑 빛 (선과 같은 남색 계열) (선 두께는 원래 선을 그대로 따라감) */
.hero-q { position: relative; }
.hero-q::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none;
  transform: translateX(-100%);
  border-left-style: solid; border-left-width: inherit;
  border-image: linear-gradient(180deg, transparent calc(var(--lp) - 22%), rgba(96, 140, 230, .95) var(--lp), transparent calc(var(--lp) + 22%)) 1;
  animation: line-v 4s ease-in-out 4.2s infinite;
}
html.hero-seen .hero-q::before { animation-delay: 1s; }
@keyframes line-v {
  0%   { --lp: -30%; }
  45%  { --lp: 130%; }
  100% { --lp: 130%; }
}

/* 01~04 밑줄: 숫자가 먼저 살짝 밝아지고, 그 숫자 아래에서 빛이 생겨 오른쪽으로 흐름 (원래 남색 밑줄 위에 한 겹 더) */
.svc-list a, .svc-list li:first-child a {
  background-image:
    linear-gradient(90deg, transparent calc(var(--lp) - 12%), rgba(96, 140, 230, var(--la)) var(--lp), transparent calc(var(--lp) + 12%)),
    linear-gradient(90deg, #1f2f6b 0%, rgba(31, 47, 107, .55) 55%, rgba(31, 47, 107, .06) 100%);
  animation: line-h 4.5s ease-in-out var(--ld, 4.6s) infinite;
}
.svc-list li:nth-child(1) { --ld: 4.6s; }
.svc-list li:nth-child(2) { --ld: 4.95s; }
.svc-list li:nth-child(3) { --ld: 5.3s; }
.svc-list li:nth-child(4) { --ld: 5.65s; }
html.hero-seen .svc-list li:nth-child(1) { --ld: 1.2s; }
html.hero-seen .svc-list li:nth-child(2) { --ld: 1.55s; }
html.hero-seen .svc-list li:nth-child(3) { --ld: 1.9s; }
html.hero-seen .svc-list li:nth-child(4) { --ld: 2.25s; }
@keyframes line-h {
  0%, 6% { --lp: 5%;   --la: 0; }
  14%    { --lp: 7%;   --la: .95; }
  48%    { --lp: 115%; --la: .95; }
  100%   { --lp: 115%; --la: .95; }
}
/* 숫자: 매 회차 시작에 살짝 밝아졌다 돌아옴 (처음 한 번의 '옆으로 톡'과 함께) */
.svc-list .num { animation: side .38s linear var(--d) 1 both, num-glow 4.5s ease-in-out var(--ld, 4.6s) infinite; }
@keyframes num-glow {
  0%, 18%, 100% { color: #3058b2; text-shadow: none; }
  7%            { color: #6f9bef; text-shadow: 0 0 10px rgba(96, 140, 230, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-q::before { display: none; }
  .svc-list a, .svc-list li:first-child a, .svc-list .num { animation: none !important; }
}