/* Service Process Animation - 순차적 애니메이션 */
@keyframes pulse-sequence {
  0%, 20% {
    transform: scale(1);
    opacity: 1;
  }
  10% {
    transform: scale(1.15);
    opacity: 0.9;
  }
  15% {
    transform: scale(1.05);
    opacity: 1;
  }
  20%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 각 단계별로 순차적으로 애니메이션 시작 */
.animate-pulse-sequence {
  animation: pulse-sequence 8s ease-in-out infinite;
}

/* 각 단계별 지연 시간 */
.step-1 {
  animation-delay: 0s;
}

.step-2 {
  animation-delay: 2s;
}

.step-3 {
  animation-delay: 4s;
}

.step-4 {
  animation-delay: 6s;
}

/* Connection Line Animation */
@keyframes line-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Dotted Line Style Alternative */
.connection-line-dotted {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 5px,
    currentColor 5px,
    currentColor 10px
  );
}

/* Animated Gradient Line */
.connection-line-gradient {
  background-size: 200% 100%;
  animation: line-flow 3s linear infinite;
}

/* Service Process Desktop Grid */
.service-desktop .grid {
  position: relative;
}

/* Service Process Mobile View */
.service-mobile {
  position: relative;
}

/* Connection Lines for Mobile */
.service-mobile svg {
  pointer-events: none;
}

/* Hide/Show responsive elements */
@media (max-width: 639px) {
  .sm\:hidden {
    display: none !important;
  }
  .sm\:block {
    display: block !important;
  }
}

@media (min-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
  .hidden.sm\:block {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .md\:hidden {
    display: none !important;
  }
  .hidden.md\:block {
    display: block !important;
  }
}

/* 모바일 지그재그 레이아웃 스타일 */
.service-mobile {
  padding-bottom: 40px;
}

/* 모바일 아이콘 터치 효과 */
.service-mobile .animate-pulse-sequence:active {
  transform: scale(1.1) !important;
}

/* SVG 곡선 연결선 애니메이션 */
@keyframes curve-flow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -32;
  }
}

.service-mobile svg path {
  animation: curve-flow 3s linear infinite;
}

/* 지그재그 레이아웃에서의 텍스트 반응형 */
@media (max-width: 420px) {
  .service-mobile div[style*="max-width: 200px"] {
    max-width: 160px !important;
    font-size: 12px !important;
  }
  
  .service-mobile h4 {
    font-size: 14px !important;
  }
}

/* 모바일 지그재그 간격 조정 */
@media (max-width: 380px) {
  .service-mobile div[style*="min-height: 600px"] {
    min-height: 500px !important;
  }
  
  .service-mobile div[style*="margin-left: 120px"] {
    margin-left: 100px !important;
  }
  
  .service-mobile div[style*="margin-right: 120px"] {
    margin-right: 100px !important;
  }
}