/* BIZ BRIDGE OUR PROCESS SEQUENTIAL MOTION
   기존 크기·간격·배열·문구는 변경하지 않음 */

.process{
  --process-progress:0;
}

.process.process-motion-ready .process-line{
  isolation:isolate;
}

.process.process-motion-ready .process-line::before{
  z-index:0;
}

/* JS가 활성화된 경우에만 순차 애니메이션 적용 */
.process.process-motion-ready .process-line li{
  position:relative;
  z-index:1;
  opacity:0;
  transform:translateY(14px);
  filter:blur(3px);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .72s ease;
}

/* 원형 기본 상태는 어둡게 유지 */
.process.process-motion-ready .process-line li::before{
  z-index:2;
  background:#050908;
  border-color:rgba(217,150,37,.45);
  box-shadow:
    0 0 0 rgba(217,150,37,0),
    inset 0 0 0 rgba(241,189,85,0);
  transition:
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}

/* 순차 등장 */
.process.process-motion-ready .process-line li.is-process-active{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* 원 안에 불이 켜지는 효과 */
.process.process-motion-ready .process-line li.is-process-active::before{
  background:
    radial-gradient(circle at 38% 34%, #fff3b1 0 10%, #f1bd55 24%, #d99625 48%, #4a2c09 100%);
  border-color:#ffd777;
  box-shadow:
    0 0 8px rgba(255,220,128,.95),
    0 0 18px rgba(217,150,37,.72),
    0 0 34px rgba(217,150,37,.34),
    inset 0 0 8px rgba(255,246,197,.55);
  transform:scale(1.06);
  animation:bizProcessPulse .82s ease-out both;
}

/* 기존 선 위로 진행 조명선 추가 */
.process.process-motion-ready .process-line::after{
  content:"";
  position:absolute;
  left:1.2%;
  right:1.2%;
  top:13px;
  height:2px;
  z-index:0;
  transform-origin:left center;
  transform:scaleX(var(--process-progress));
  background:linear-gradient(
    90deg,
    #9a5f12 0%,
    #ffd777 28%,
    #fff1a8 50%,
    #d99625 78%,
    #8a5210 100%
  );
  box-shadow:
    0 0 8px rgba(241,189,85,.65),
    0 0 16px rgba(217,150,37,.35);
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.process.process-motion-ready .process-line li > *{
  position:relative;
  z-index:2;
}

@keyframes bizProcessPulse{
  0%{
    transform:scale(.82);
    box-shadow:
      0 0 0 rgba(217,150,37,0),
      0 0 0 rgba(217,150,37,0);
  }
  55%{
    transform:scale(1.14);
  }
  100%{
    transform:scale(1.06);
  }
}

/* 모바일: 기존 세로선 구조 그대로 사용 */
@media (max-width:980px){
  .process.process-motion-ready .process-line::after{
    left:8px;
    right:auto;
    top:12px;
    bottom:0;
    width:2px;
    height:auto;
    transform-origin:center top;
    transform:scaleY(var(--process-progress));
  }

  .process.process-motion-ready .process-line li{
    transform:translateX(14px);
  }

  .process.process-motion-ready .process-line li.is-process-active{
    transform:translateX(0);
  }
}

/* 모션 최소화 사용자 */
@media (prefers-reduced-motion:reduce){
  .process.process-motion-ready .process-line li{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }

  .process.process-motion-ready .process-line li::before{
    animation:none !important;
  }

  .process.process-motion-ready .process-line::after{
    transform:scaleX(1) !important;
    transition:none !important;
  }

  @media (max-width:980px){
    .process.process-motion-ready .process-line::after{
      transform:scaleY(1) !important;
    }
  }
}