/* ==========================================================================
   veryGoodAgency - 스크롤 애니메이션 (animations.css)
   Intersection Observer 기반 등장 애니메이션
   ========================================================================== */

/* --------------------------------------------------------------------------
   초기 숨김 상태 (JS가 add-animation 클래스를 붙인 후 활성화)
   -------------------------------------------------------------------------- */
.fade-up,
.fade-in,
.slide-left,
.slide-right,
.zoom-in,
.fade-up-child > * {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

/* 초기 transform 값 */
.fade-up       { transform: translateY(40px); }
.fade-in       { transform: translateY(12px); }
.slide-left    { transform: translateX(-50px); }
.slide-right   { transform: translateX(50px); }
.zoom-in       { transform: scale(.92); }

/* fade-up-child: 자식 요소 순차 등장용 */
.fade-up-child > * {
  transform: translateY(32px);
}

/* --------------------------------------------------------------------------
   등장 상태 (.is-visible 클래스가 붙으면)
   -------------------------------------------------------------------------- */
.fade-up.is-visible,
.fade-in.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.zoom-in.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.fade-up-child.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   지연 클래스 (순차 등장용)
   -------------------------------------------------------------------------- */
.delay-100 { transition-delay: .1s; }
.delay-150 { transition-delay: .15s; }
.delay-200 { transition-delay: .2s; }
.delay-300 { transition-delay: .3s; }
.delay-400 { transition-delay: .4s; }
.delay-500 { transition-delay: .5s; }
.delay-600 { transition-delay: .6s; }

/* fade-up-child 자식 순차 지연 (최대 8개) */
.fade-up-child.is-visible > *:nth-child(1) { transition-delay: .05s; }
.fade-up-child.is-visible > *:nth-child(2) { transition-delay: .15s; }
.fade-up-child.is-visible > *:nth-child(3) { transition-delay: .25s; }
.fade-up-child.is-visible > *:nth-child(4) { transition-delay: .35s; }
.fade-up-child.is-visible > *:nth-child(5) { transition-delay: .45s; }
.fade-up-child.is-visible > *:nth-child(6) { transition-delay: .55s; }
.fade-up-child.is-visible > *:nth-child(7) { transition-delay: .65s; }
.fade-up-child.is-visible > *:nth-child(8) { transition-delay: .75s; }

/* --------------------------------------------------------------------------
   카운터 숫자 강조 애니메이션
   -------------------------------------------------------------------------- */
.counter-value {
  display: inline-block;
  transition: transform .2s ease;
}

/* --------------------------------------------------------------------------
   히어로 진입 애니메이션 (CSS 키프레임)
   -------------------------------------------------------------------------- */
.hero-animate-1 {
  animation: heroFadeUp .8s .2s cubic-bezier(.22,1,.36,1) both;
}
.hero-animate-2 {
  animation: heroFadeUp .8s .4s cubic-bezier(.22,1,.36,1) both;
}
.hero-animate-3 {
  animation: heroFadeUp .8s .55s cubic-bezier(.22,1,.36,1) both;
}
.hero-animate-4 {
  animation: heroFadeUp .8s .7s cubic-bezier(.22,1,.36,1) both;
}
.hero-animate-5 {
  animation: heroFadeUp .8s .85s cubic-bezier(.22,1,.36,1) both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   맥박 (Pulse) 효과
   -------------------------------------------------------------------------- */
.pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,4,.4); }
  50%       { box-shadow: 0 0 0 12px rgba(232,93,4,0); }
}

/* --------------------------------------------------------------------------
   페이지 전환 (간단한 fade)
   -------------------------------------------------------------------------- */
.page-transition {
  animation: pageFadeIn .4s ease both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   접근성: prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .slide-left,
  .slide-right,
  .zoom-in,
  .fade-up-child > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3,
  .hero-animate-4,
  .hero-animate-5 {
    animation: none;
    opacity: 1;
  }

  .pulse { animation: none; }
}