/**
 * 애니메이션 및 전환 효과
 */

/* ============================================
   일반 애니메이션
   ============================================ */

/* Float 애니메이션 */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Fade In 애니메이션 */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Slide Down 애니메이션 (설치 배너용) */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.install-banner {
  animation: slideDown 0.5s ease-out;
}

/* ============================================
   로더 애니메이션
   ============================================ */
.loader {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: var(--indigo-600);
  font-size: 3rem;
  animation: spin 1s linear infinite;
}

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

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

/* ============================================
   컴포넌트 애니메이션
   ============================================ */

/* Feature Card 호버 효과 */
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Skeleton 로딩 애니메이션 */
@keyframes loading {
  0% { 
    background-position: 200% 0; 
  }
  100% { 
    background-position: -200% 0; 
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* 튜토리얼 단계 애니메이션 */
.tutorial-step {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.tutorial-step:nth-child(1) { 
  animation-delay: 0.1s; 
}

.tutorial-step:nth-child(2) { 
  animation-delay: 0.2s; 
}

.tutorial-step:nth-child(3) { 
  animation-delay: 0.3s; 
}