/* v4 섹션 공유 등장 애니메이션
   사용법: <div data-animate="fade-up"> 또는 <div data-animate="fade-up" data-delay="200">
   IntersectionObserver가 뷰포트 진입 시 .is-visible 클래스를 추가하여 애니메이션 실행 */

[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ── 방향별 초기 상태 ── */

[data-animate="fade-up"] { transform: translateY(30px); }
[data-animate="fade-down"] { transform: translateY(-30px); }
[data-animate="fade-in"] { transform: none; }
[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate="fade-right"] { transform: translateX(-30px); }
[data-animate="zoom-in"] { transform: scale(0.95); }
[data-animate="zoom-out"] { transform: scale(1.05); }

/* ── 속도 변형 ── */

[data-animate-speed="fast"] { transition-duration: 0.3s; }
[data-animate-speed="slow"] { transition-duration: 1s; }