@charset "utf-8";

/*
 * 인트로 페이지 애니메이션 모음
 * ---------------------------------------------------------
 * 적용 페이지: intro.html
 * 연결 방식: intro.html에서 ./css/animations.css를 직접 불러옵니다.
 *
 * 이 파일에 들어 있는 효과:
 * 1. login_scan
 *    로그인 모달 안에서 위에서 아래로 지나가는 얇은 스캔 라인입니다.
 *
 * 2. login_pulse
 *    로그인 성공 순간 화면 중앙에서 원형 빛이 커졌다 사라지는 효과입니다.
 *
 * 3. login_dialog_success
 *    로그인 성공 시 모달 박스가 살짝 커졌다 돌아오는 반응 효과입니다.
 *
 * 4. intro_scan
 *    인트로 배경 위를 반복해서 내려가는 세로 스캔 라인입니다.
 *
 * 5. core_spin
 *    인트로 중앙 비디오 코어 주변 링이 회전하는 효과입니다.
 *
 * 6. channel_pulse
 *    하단 HOME / SEARCH / ROLE / BUILD / NOTICE / CONTACT 채널 글자가
 *    은은하게 깜빡이도록 만드는 효과입니다.
 *
 * main.html에서 서브페이지로 이동할 때 나오는 치지직 전환 효과는
 * ./main/animations.css에 따로 정리되어 있습니다.
 */

/* 로그인 모달: 얇은 스캔 라인이 위에서 아래로 이동 */
@keyframes login_scan {
    0% { top: -20%; opacity: 0; }
    15% { opacity: 1; }
    100% { top: 120%; opacity: 0; }
}

/* 로그인 성공: 중앙 원형 빛이 확장되며 사라짐 */
@keyframes login_pulse {
    0% { opacity: 0; transform: scale(.25); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: scale(8); }
}

/* 로그인 성공: 모달 박스가 살짝 커졌다 원래 크기로 복귀 */
@keyframes login_dialog_success {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(0) scale(1.025); }
}

/* 인트로 배경: 세로 스캔 라인이 반복해서 아래로 이동 */
@keyframes intro_scan {
    to { top: 115%; }
}

/* 인트로 중앙 코어: 링이 계속 회전 */
@keyframes core_spin {
    to { transform: rotate(360deg); }
}

/* 하단 채널 라벨: 투명도가 은은하게 깜빡임 */
@keyframes channel_pulse {
    from { opacity: .35; }
    to { opacity: 1; }
}