/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@layer base {
  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spin-slow 15s linear infinite;
  }
}

/* 다중 에이전트 시스템 애니메이션 스타일 */

/* 펄스 애니메이션 (에이전트 아이콘용) */
@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.8; 
  }
}

/* 반짝임 애니메이션 (프로그레스 바용) */
@keyframes shimmer {
  0% { 
    background-position: -200% 0; 
  }
  100% { 
    background-position: 200% 0; 
  }
}

/* 프로그레스 바 반짝임 효과 */
.progress-shimmer {
  background: linear-gradient(
    90deg,
    #E86A33 0%,
    #F9975D 25%,
    #FFB380 50%,
    #F9975D 75%,
    #E86A33 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* 호버 효과 강화 */
.multi-agent-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.multi-agent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(232, 106, 51, 0.15);
}

/* 에이전트 아이콘 특별 효과 */
.agent-icon {
  position: relative;
  overflow: hidden;
}

.agent-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.agent-icon:hover::before {
  left: 100%;
}

/* 숫자 카운터 강조 효과 */
.counter-highlight {
  transition: color 0.3s ease;
}

/* 비교 섹션 강조 애니메이션 */
@keyframes highlight-glow {
  0% { 
    box-shadow: 0 0 0 rgba(232, 106, 51, 0); 
  }
  50% { 
    box-shadow: 0 0 20px rgba(232, 106, 51, 0.3); 
  }
  100% { 
    box-shadow: 0 0 0 rgba(232, 106, 51, 0); 
  }
}

.comparison-highlight {
  animation: highlight-glow 2s ease-in-out;
}

/* 기술적 우위 섹션 그라데이션 애니메이션 */
@keyframes gradient-shift {
  0% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
  100% { 
    background-position: 0% 50%; 
  }
}

.tech-advantage-gradient {
  background: linear-gradient(
    45deg,
    #E86A33,
    #F9975D,
    #FFB380,
    #F9975D,
    #E86A33
  );
  background-size: 300% 300%;
  animation: gradient-shift 4s ease infinite;
}

/* 스크롤 기반 페이드인 효과 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* 프로그레스 바 컨테이너 스타일 */
.progress-container {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
}

.progress-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.progress-container.animate::after {
  transform: translateX(100%);
}

/* 반응형 애니메이션 조정 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .multi-agent-card:hover {
    transform: none;
    box-shadow: none;
  }
  
  .agent-icon::before {
    display: none;
  }
}
/*
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */