@charset "utf-8";

/*
 * ROLE 서브페이지 애니메이션 모음
 * ---------------------------------------------------------
 * 적용 페이지: role_subpage/role_index.html
 *
 * 이 파일은 ROLE 서브페이지의 등장 애니메이션과 반복 효과만 모아둔 곳입니다.
 * 실제 레이아웃, 색상, 카드 스타일은 role_subpage/css/style.css에서 관리합니다.
 */

/* 페이지 진입 시 타이틀과 필터 영역이 아래에서 위로 부드럽게 나타나는 효과 */
@keyframes roleFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 영웅 카드가 흐림/축소 상태에서 선명한 원래 크기로 나타나는 효과 */
@keyframes roleCardReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 상단 타이틀 아래 화살표가 깜빡이며 아래로 움직이는 효과 */
@keyframes arrowBlink {

    0% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(8px);
    }

    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
}

/* 영웅 상세 팝업 박스가 살짝 아래에서 떠오르며 열리는 효과 */
@keyframes detailOpen {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

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

/* 상세 팝업 안의 영웅 이미지가 위아래로 천천히 떠 있는 효과 */
@keyframes floatHero {
    0% {
        transform: translateY(0);
    }

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

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