/*=============================================
  Fine HPS — 애니메이션 시스템
  모든 인터랙션과 진입 효과를 책임져요
=============================================*/

/* ── 키프레임 정의 ── */

/* 아래서 위로 등장 */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 위에서 아래로 등장 */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 왼쪽에서 등장 */
@keyframes slideLeftFade {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 오른쪽에서 등장 */
@keyframes slideRightFade {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 서서히 등장 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 쿵! 등장 효과 */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 둥실둥실 떠다니기 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* 빛나는 테두리 (카카오 버튼 강조) */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px 2px rgba(254, 229, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 40px 8px rgba(254, 229, 0, 0.7);
    }
}

/* 카운터 숫자 올라가기 */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 헤더 배경 색 전환 */
@keyframes headerBlur {
    from {
        backdrop-filter: blur(0);
        background: rgba(10, 22, 40, 0);
    }

    to {
        backdrop-filter: blur(24px);
        background: rgba(10, 22, 40, 0.95);
    }
}

/* ── 히어로 섹션 텍스트 등장 순서 ── */
.hero-badge {
    animation: slideDownFade 0.6s 0.2s both;
}

.hero-title {
    animation: slideUpFade 0.8s 0.4s both;
}

.hero-subtitle {
    animation: slideUpFade 0.8s 0.6s both;
}

.hero-buttons {
    animation: slideUpFade 0.8s 0.8s both;
}

.hero-image {
    animation: slideRightFade 1s 0.5s both;
}

/* ── 스크롤 트리거 등장 클래스 ── */
/* [초등학생용 주석] 화면에 보이면 갑자기 등장하는 마법 효과예요! */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal-left.visible,
.reveal-right.visible {
    transform: translateX(0);
    opacity: 1;
}

/* 지연 클래스 (순차적 등장) */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

/* ── 특별 효과 ── */
.float-anim {
    animation: float 4s ease-in-out infinite;
}

.glow-kakao {
    animation: glowPulse 2s ease-in-out infinite;
}

.pop-in {
    animation: popIn 0.5s var(--ease-bounce) both;
}

/* ── 헤더 스크롤 전환 ── */
.site-header.scrolled {
    background: rgba(10, 22, 40, 0.96) !important;
    backdrop-filter: blur(24px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ── 로딩 오버레이 ── */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--color-dark);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    animation: fadeIn 0.3s ease;
}

.page-loader.hide {
    animation: fadeIn 0.5s ease reverse;
    pointer-events: none;
}

.loader-ring {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 212, 255, 0.2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}