/**
 * GSAP Animation Library CSS
 * 초기 상태 및 보조 스타일
 * 
 * @version 1.0.0
 * @author KTheme
 */

/* ========================================
   Fade Animations - 초기 상태
   ======================================== */

/* Fade In */
.gsap-fade-in {
  opacity: 0;
}

/* Fade In Up */
.gsap-fade-in-up {
  opacity: 0;
}

/* Fade In Down */
.gsap-fade-in-down {
  opacity: 0;
}

/* Fade In Left */
.gsap-fade-in-left {
  opacity: 0;
}

/* Fade In Right */
.gsap-fade-in-right {
  opacity: 0;
}

/* ========================================
   Slide Animations - 초기 상태
   ======================================== */

/* Slide Up */
.gsap-slide-up {
  /* JavaScript에서 y 값 설정 */
}

/* Slide Down */
.gsap-slide-down {
  /* JavaScript에서 y 값 설정 */
}

/* Slide Left */
.gsap-slide-left {
  /* JavaScript에서 x 값 설정 */
}

/* Slide Right */
.gsap-slide-right {
  /* JavaScript에서 x 값 설정 */
}

/* ========================================
   Scale Animations - 초기 상태
   ======================================== */

/* Scale In */
.gsap-scale-in {
  opacity: 0;
}

/* Scale In Up */
.gsap-scale-in-up {
  opacity: 0;
}

/* Scale In Fade */
.gsap-scale-in-fade {
  opacity: 0;
}

/* Zoom In */
.gsap-zoom-in {
  opacity: 0;
}

/* ========================================
   Rotate Animations - 초기 상태
   ======================================== */

/* Rotate In */
.gsap-rotate-in {
  opacity: 0;
}

/* Rotate In Left */
.gsap-rotate-in-left {
  opacity: 0;
}

/* Rotate In Right */
.gsap-rotate-in-right {
  opacity: 0;
}

/* ========================================
   Text Animations - 초기 상태
   ======================================== */

/* Text Reveal */
.gsap-text-reveal {
  opacity: 0;
}

/* Text Blur */
.gsap-text-blur {
  opacity: 0;
}

/* Text Tracking */
.gsap-text-tracking {
  opacity: 0;
}

/* ========================================
   Special Animations - 초기 상태
   ======================================== */

/* Parallax */
.gsap-parallax {
  /* JavaScript에서 y 값 설정 */
}

/* Parallax Slow */
.gsap-parallax-slow {
  /* JavaScript에서 y 값 설정 */
}

/* Blur In */
.gsap-blur-in {
  opacity: 0;
}

/* ========================================
   Scroll Move Animations - 초기 상태
   ======================================== */

/* Scroll Move Left */
.gsap-scroll-left {
  /* JavaScript에서 x 값 설정 */
}

/* Scroll Move Right */
.gsap-scroll-right {
  /* JavaScript에서 x 값 설정 */
}

/* Scroll Move Up */
.gsap-scroll-up {
  /* JavaScript에서 y 값 설정 */
}

/* Scroll Move Down */
.gsap-scroll-down {
  /* JavaScript에서 y 값 설정 */
}

/* Scroll Float */
.gsap-scroll-float {
  /* JavaScript에서 y 값 설정 */
}

/* ========================================
   Duration Modifiers
   ======================================== */

/* Duration 클래스는 JavaScript에서 처리되므로 CSS 불필요 */

/* ========================================
   Delay Modifiers
   ======================================== */

/* Delay 클래스는 JavaScript에서 처리되므로 CSS 불필요 */

/* ========================================
   Ease Modifiers
   ======================================== */

/* Ease 클래스는 JavaScript에서 처리되므로 CSS 불필요 */

/* ========================================
   Utility Classes
   ======================================== */

/* 애니메이션 비활성화 (접근성) */
@media (prefers-reduced-motion: reduce) {
  .gsap-fade-in,
  .gsap-fade-in-up,
  .gsap-fade-in-down,
  .gsap-fade-in-left,
  .gsap-fade-in-right,
  .gsap-slide-up,
  .gsap-slide-down,
  .gsap-slide-left,
  .gsap-slide-right,
  .gsap-scale-in,
  .gsap-scale-in-up,
  .gsap-scale-in-fade,
  .gsap-zoom-in,
  .gsap-rotate-in,
  .gsap-rotate-in-left,
  .gsap-rotate-in-right,
  .gsap-text-reveal,
  .gsap-text-blur,
  .gsap-text-tracking,
  .gsap-parallax,
  .gsap-parallax-slow,
  .gsap-blur-in,
  .gsap-scroll-left,
  .gsap-scroll-right,
  .gsap-scroll-up,
  .gsap-scroll-down,
  .gsap-scroll-float,
  .gsap-typing,
  .gsap-typing-fast,
  .gsap-typing-slow,
  .gsap-typing-cursor {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: normal !important;
  }
  
  /* 타이핑 커서 숨김 */
  .gsap-typing-cursor-blink {
    display: none !important;
  }
}

/* 애니메이션 완료 후 상태 */
.gsap-animated {
  opacity: 1;
  transform: none;
}

/* ========================================
   로딩 중 깜빡임 방지
   ======================================== */

/* GSAP 로드 전 요소가 보이는 것을 방지 */
.gsap-fade-in,
.gsap-fade-in-up,
.gsap-fade-in-down,
.gsap-fade-in-left,
.gsap-fade-in-right,
.gsap-slide-up,
.gsap-slide-down,
.gsap-slide-left,
.gsap-slide-right,
.gsap-scale-in,
.gsap-scale-in-up,
.gsap-scale-in-fade,
.gsap-zoom-in,
.gsap-rotate-in,
.gsap-rotate-in-left,
.gsap-rotate-in-right,
.gsap-text-reveal,
.gsap-text-blur,
.gsap-text-tracking,
.gsap-blur-in {
  visibility: hidden;
}

/* Parallax는 visibility 영향 받지 않음 (항상 보임) */

/* GSAP 로드 후 visibility 복원 */
body.gsap-loaded .gsap-fade-in,
body.gsap-loaded .gsap-fade-in-up,
body.gsap-loaded .gsap-fade-in-down,
body.gsap-loaded .gsap-fade-in-left,
body.gsap-loaded .gsap-fade-in-right,
body.gsap-loaded .gsap-slide-up,
body.gsap-loaded .gsap-slide-down,
body.gsap-loaded .gsap-slide-left,
body.gsap-loaded .gsap-slide-right,
body.gsap-loaded .gsap-scale-in,
body.gsap-loaded .gsap-scale-in-up,
body.gsap-loaded .gsap-scale-in-fade,
body.gsap-loaded .gsap-zoom-in,
body.gsap-loaded .gsap-rotate-in,
body.gsap-loaded .gsap-rotate-in-left,
body.gsap-loaded .gsap-rotate-in-right,
body.gsap-loaded .gsap-text-reveal,
body.gsap-loaded .gsap-text-blur,
body.gsap-loaded .gsap-text-tracking,
body.gsap-loaded .gsap-blur-in {
  visibility: visible;
}

/* Parallax는 항상 보임 */

/* ========================================
   Typing Animations - 타이핑 효과
   ======================================== */

/* 타이핑 커서 스타일 */
.gsap-typing-cursor-blink {
  display: inline-block;
  margin-left: 2px;
  font-weight: normal;
  animation: blink 1s infinite;
}

/* 커서 깜빡임 애니메이션 (GSAP가 없을 경우 대비) */
@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* 타이핑 요소 기본 스타일 */
.gsap-typing,
.gsap-typing-fast,
.gsap-typing-slow,
.gsap-typing-cursor {
  display: inline-block;
  white-space: pre-wrap; /* 공백과 줄바꿈 유지 */
}

/* JavaScript 비활성화 시 대비 */
.no-js .gsap-fade-in,
.no-js .gsap-fade-in-up,
.no-js .gsap-fade-in-down,
.no-js .gsap-fade-in-left,
.no-js .gsap-fade-in-right,
.no-js .gsap-slide-up,
.no-js .gsap-slide-down,
.no-js .gsap-slide-left,
.no-js .gsap-slide-right,
.no-js .gsap-scale-in,
.no-js .gsap-scale-in-up,
.no-js .gsap-scale-in-fade,
.no-js .gsap-zoom-in,
.no-js .gsap-rotate-in,
.no-js .gsap-rotate-in-left,
.no-js .gsap-rotate-in-right,
.no-js .gsap-text-reveal,
.no-js .gsap-text-blur,
.no-js .gsap-text-tracking,
.no-js .gsap-parallax,
.no-js .gsap-parallax-slow,
.no-js .gsap-blur-in,
.no-js .gsap-scroll-left,
.no-js .gsap-scroll-right,
.no-js .gsap-scroll-up,
.no-js .gsap-scroll-down,
.no-js .gsap-scroll-float,
.no-js .gsap-typing,
.no-js .gsap-typing-fast,
.no-js .gsap-typing-slow,
.no-js .gsap-typing-cursor {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  letter-spacing: normal !important;
}

/* 타이핑 커서 숨김 (JS 비활성화 시) */
.no-js .gsap-typing-cursor-blink {
  display: none !important;
}