/* ───────── 등장 / 페이지 / 스크롤 ───────── */

/* 기본 페이드 인 */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 슬라이드 업 (이동만, 페이드 없음) */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* 스크롤 트리거 진입 (IntersectionObserver로 클래스 토글하여 발동) */
@keyframes scrollReveal {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 스태거 아이템 (자식 element마다 animation-delay 차등 적용) */
@keyframes staggerItem {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 페이지 진입 */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 페이지 이탈 */
@keyframes pageExit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}


/* ───────── 인터랙션 ───────── */

/* 호버 시 살짝 확대 (.class:hover { animation: hoverScale ... forwards }로 사용) */
@keyframes hoverScale {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* 마그네틱 버튼 미세 떨림 (실제 커서 추적은 JS 필요, idle 효과용) */
@keyframes magneticIdle {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(2px, -2px); }
}


/* ───────── 로딩 / 스토리텔링 ───────── */

/* 스켈레톤 스크린 — linear-gradient + background-size:200%와 함께 사용 */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 타이프라이터 — overflow:hidden + animation-timing-function: steps(글자수) 권장 */
@keyframes typewriter {
    from { width: 0; }
    to   { width: 100%; }
}

/* 타이프라이터 캐럿 깜빡임 (border-right로 캐럿 표현) */
@keyframes caretBlink {
    50% { border-right-color: transparent; }
}

/* 숫자 카운터 슬롯 등장 — 실제 카운트업 로직은 JS, 시각효과만 담당 */
@keyframes numberCount {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ───────── 시각 효과 ───────── */

/* 패럴럭스 (스크롤 동기화는 JS/scroll-timeline 필요, idle 부유 효과) */
@keyframes parallaxFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-20px); }
}

/* SVG 패스 드로우 — 대상에 stroke-dasharray: var(--path-length, 1000) 사전 설정 */
@keyframes pathDraw {
    from { stroke-dashoffset: var(--path-length, 1000); }
    to   { stroke-dashoffset: 0; }
}