/* ============================================
 Animations
 ============================================ */

/* ============================================
 Keyframes 정의
 ============================================ */

/* 스크롤 인디케이터 바운스 애니메이션 */
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.80; } 
 50% { transform: translateY(8px); opacity: 0.5; } 
 }

/* 타이핑 효과 애니메이션 (왼쪽에서 오른쪽으로) */
@keyframes typing { 
 from { width: 0; } 
 to { width: 100%; } 
 }

/* 타이핑 커서 깜빡임 (현재 사용 안 함) */
@keyframes blink { 0%, 50% { opacity: 1; } 
 51%, 100% { opacity: 0; } 
 }

/* 아래에서 위로 나타나는 애니메이션 (텍스트용 - translateX 포함) */
@keyframes slideUpFadeIn { 
 from { opacity: 0; transform: translateX(-50%) translateY(30px); } 
 to { opacity: 1; transform: translateX(-50%) translateY(0); } 
 }

/* 섹션 전환용 slide-up 애니메이션 (요트 > 로켓, 로켓 > 점프 - translateY만) */
@keyframes slideUp { 
 from { opacity: 0; transform: translateY(30px); } 
 to { opacity: 1; transform: translateY(0); } 
 }

/* 숲 섹션 텍스트용 애니메이션 (translateX 없이 translateY만) */
@keyframes slideUpFadeInForest { 
 from { opacity: 0; transform: translateY(30px); } 
 to { opacity: 1; transform: translateY(0); } 
 }

/* 로고용 아래에서 위로 나타나는 애니메이션 */
@keyframes slideUpFadeInLogo { 
 from { opacity: 0; transform: translate(-50%, 30px); } 
 to { opacity: 1; transform: translate(-50%, 0); } 
 }

/* ============================================
 Animation 클래스 정의
 ============================================ */

/* 스크롤 인디케이터 바운스 애니메이션 */
.animate-scroll-bounce { animation: scrollBounce 2s infinite; } 

/* 숲 섹션: 첫 번째 텍스트 타이핑 효과 */
.animate-typing-forest-1 { animation: typing 0.25s steps(20, end) 0s forwards; } 

/* 숲 섹션: 두 번째 텍스트 타이핑 효과 */
.animate-typing-forest-2 { animation: typing 0.3s steps(30, end) 0.3s forwards; } 

/* 고정 텍스트 레이어: 첫 번째 텍스트 타이핑 효과 (요트) */
.animate-typing-fixed-1 { animation: typing 0.3s steps(8, end) 0.075s forwards; } 

/* 고정 텍스트 레이어: 두 번째 텍스트 타이핑 효과 (로켓) */
.animate-typing-fixed-2 { animation: typing 0.375s steps(10, end) 0.125s forwards; } 

/* 고정 텍스트 레이어: 세 번째 텍스트 타이핑 효과 (점프) */
.animate-typing-fixed-3 { animation: typing 0.5s steps(18, end) 0.125s forwards; } 


/* ============================================
 가상 요소용 애니메이션 클래스
 ============================================ */

/* 스크롤 인디케이터 바운스 애니메이션 (가상 요소용) */
.animate-scroll-bounce-before::before { animation: scrollBounce 2s infinite; } 

/* 숲 섹션: 첫 번째 텍스트 타이핑 효과 (가상 요소용) */
.animate-typing-forest-1-before::before { animation: typing 0.25s steps(20, end) 0s forwards; } 

/* 숲 섹션: 두 번째 텍스트 타이핑 효과 (가상 요소용) */
.animate-typing-forest-2-before::before { animation: typing 0.3s steps(30, end) 0.3s forwards; } 


/* 고정 텍스트 레이어: 첫 번째 텍스트 타이핑 효과 (요트, 가상 요소용) */
.animate-typing-fixed-1-before::before { animation: typing 0.3s steps(8, end) 0.075s forwards; } 

/* 고정 텍스트 레이어: 두 번째 텍스트 타이핑 효과 (로켓, 가상 요소용) */
.animate-typing-fixed-2-before::before { animation: typing 0.375s steps(10, end) 0.125s forwards; } 

/* 고정 텍스트 레이어: 세 번째 텍스트 타이핑 효과 (점프, 가상 요소용) */
.animate-typing-fixed-3-before::before { animation: typing 0.5s steps(18, end) 0.125s forwards; } 

/* ============================================
 조건부 선택자 포함 애니메이션 (섹션별)
 ============================================ */

/* 숲 섹션: 이미지가 100% 확장되었을 때 타이핑 애니메이션 */

/* 빌딩 섹션: 활성화 시 타이핑 애니메이션 */

/* 고정 텍스트 레이어: 요트 섹션 활성화 시 */
body:has(#yacht.is-active) .fixed-text-layer .scroll-text-item[data-scroll-step="1"]::before { animation: typing 0.3s steps(8, end) 0.075s forwards; } 

/* 고정 텍스트 레이어: 로켓 섹션 활성화 시 */
body:has(#rocket.is-active):not(:has(#jump.is-active)) .fixed-text-layer .scroll-text-item[data-scroll-step="2"]::before { animation: typing 0.375s steps(10, end) 0.125s forwards; } 

/* 고정 텍스트 레이어: 점프 섹션 활성화 시 */
body:has(#jump.is-active) .fixed-text-layer .scroll-text-item[data-scroll-step="3"]::before { animation: typing 0.5s steps(18, end) 0.125s forwards; } 

/* 테이블 섹션: 메인/서브 문구 슬라이드업 + 페이드인 (CSS 변수로 제어) */
/* body:has(#table.is-active) .table-text-content { opacity: 1; transform: translateY(-20px); } */ 

/* removing 클래스 자동 제거 애니메이션 (CSS로 처리) */
@keyframes removeRemoving { 
 0% { /* 애니메이션 시작 시 상태 유지 */}
 100% { /* 500ms 후 자동으로 removing 클래스 효과 제거 (CSS만으로는 클래스 자체를 제거할 수 없지만, 효과는 무효화) */} 
 }

/* ============================================
 섹션 전환 애니메이션
 ============================================ */

/* 요트 > 로켓 전환 시 slide-up 애니메이션 (빠르게) */
body:has(#yacht.is-active ~ #rocket.is-active) #rocket .section-bg-layer.active,
body:has(#rocket.is-active:has(+ #yacht.is-active)) #rocket .section-bg-layer.active { animation: slideUp 0.1s ease-in-out; } 

/* 로켓 > 점프 전환 시 slide-up 애니메이션 (빠르게) */
body:has(#rocket.is-active ~ #jump.is-active) #jump .section-bg-layer.active,
body:has(#jump.is-active:has(+ #rocket.is-active)) #jump .section-bg-layer.active { animation: slideUp 0.1s ease-in-out; } 

/* 점프 > 테이블 전환 시 slide-up 애니메이션 (빠르게) */
body:has(#jump.is-active ~ #table.is-active) #table .section-bg-layer.active,
body:has(#table.is-active:has(+ #jump.is-active)) #table .section-bg-layer.active { animation: slideUp 0.1s ease-in-out; } 

/* ============================================
 숲 섹션 애니메이션
 ============================================ */

/* 숲 섹션 텍스트 글로우 효과 키프레임 */
@keyframes textGlow { 
 0% { text-shadow: 0 0 0 transparent; } 
 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4); } 
 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2); } 
 }

/* The Best 문구 강조 애니메이션 */
@keyframes theBestReveal { 
 0% { opacity: 0; transform: scale(0.8) translateY(20px); filter: blur(10px); } 
 60% { opacity: 1; transform: scale(1.05) translateY(-5px); filter: blur(0); } 
 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } 
 }

/* 회색 텍스트 페이드인 애니메이션 (왼쪽에서) */
@keyframes grayTextFadeIn { 
 0% { opacity: 0; transform: translateX(-20px); } 
 100% { opacity: 1; transform: translateX(0); } 
 }

/* 회색 텍스트 페이드인 (오른쪽에서) */
@keyframes grayTextFadeInRight { 
 0% { opacity: 0; transform: translateX(20px); } 
 100% { opacity: 1; transform: translateX(0); } 
 }

/* 첫 번째 줄 애니메이션 (아래에서 올라오기) */
body.forest-expanded .page-section .section-content .forest-text-item[data-forest-step="1"] { animation: slideUpFadeInForest 0.6s ease-out forwards; } 

/* 두 번째 줄 애니메이션 (아래에서 올라오기) */
body.forest-expanded .page-section .section-content .forest-text-item[data-forest-step="2"] { animation: slideUpFadeInForest 0.6s ease-out 0.3s forwards; }

/* ============================================
 흰색 섹션 이미지 자동 스크롤 애니메이션
 ============================================ */

@keyframes scrollImages { 
 0% { transform: translateX(0); } 
 100% { transform: translateX(calc(-1 * var(--half-width, 50%))); } 
}

/* ============================================
 헤더 배경 이미지 레이어 애니메이션
 ============================================ */

/* 헤더 배경 이미지 레이어: 아래에서 위로 나타나는 애니메이션 */
@keyframes headerBgSlideUp { 
 from { opacity: 0; transform: translateY(20px); } 
 to { opacity: 1; transform: translateY(0); } 
}