/* index.html 파일에서만 사용하는 스타일 */

/* 메인 비주얼 */
.main-visual {
	transition: background-color 0.3s;
	
    /* 👇 이미지 슬라이드쇼를 위한 핵심 CSS 추가 및 수정 (6개 이미지 기준) */
    background-color: var(--section-bg); /* 배경색 유지 */
    
    /* 6개의 이미지를 넣습니다. (오버레이 포함 총 7개 레이어) */
    /* 순서: Overly, b1, b2, b3, b4, b6, b5 */
    background-image: 
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
        url('../../assets/images/bg/b1.jpg'), /* 아드라 스탠다드 */
        url('../../assets/images/bg/b2.jpg'), /* 아드라 퍼스널 */
        url('../../assets/images/bg/b4.jpg'), /* GLOBLA K-IDOL */
        url('../../assets/images/labs/labs_20251023_221747088.jpg'), /* 키오스크 */
        url('../../assets/images/character/2024_pepero_day.png'), /* 캐릭터 */
        url('../../assets/images/bg/b5.jpg'); /* 베터리 */
    
    background-size: cover; /* 영역 전체를 덮도록 설정 */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 애니메이션 적용: 5초 간격으로 6개 이미지를 30초 동안 무한 반복 */
    animation: background-fade 25s infinite;
}

body.dark-mode .main-visual {
    /* 👇 다크 모드 오버레이만 변경 (이미지 순서는 라이트 모드와 동일하게 유지) */
    /* 순서: Overly, b1, b2, b3, b4, b6, b5 */
	background-image: 
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
        url('../../assets/images/bg/b1.jpg'), /* 아드라 스탠다드 */
        url('../../assets/images/bg/b2.jpg'), /* 아드라 퍼스널 */
        url('../../assets/images/bg/b4.jpg'), /* GLOBLA K-IDOL */
        url('../../assets/images/labs/labs_20251023_221747088.jpg'), /* 키오스크 */
        url('../../assets/images/character/2024_pepero_day.png'), /* 캐릭터 */
        url('../../assets/images/bg/b5.jpg'); /* 베터리 */
}

/* 6개의 이미지가 5초씩 교대되도록 (1/6 = 약 16.66%) 비율을 정의하는 Keyframes */
@keyframes background-fade {
    /* b1.jpg (0% ~ 16.66%) */
    0%, 16.66% { 
        background-position: 
            center, /* 오버레이 */
            center, /* b1 */
            -9999px, /* b2 (숨김) */
            -9999px, /* b3 (숨김) */
            -9999px, /* b4 (숨김) */
            -9999px, /* b6 (숨김) */
            -9999px; /* b5 (숨김) */
    }
    
    /* b2.jpg (16.67% ~ 33.33%) */
    16.67%, 33.33% {
        background-position: 
            center, /* 오버레이 */
            -9999px, /* b1 */
            center, /* b2 */
            -9999px, /* b3 */
            -9999px, /* b4 */
            -9999px, /* b6 */
            -9999px; /* b5 */
    }

    /* b3.jpg (33.34% ~ 50%) */
    33.34%, 50% {
        background-position: 
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            center, /* b3 */
            -9999px, /* b4 */
            -9999px, /* b6 */
            -9999px; /* b5 */
    }

    /* b4.jpg (50.01% ~ 66.66%) */
    50.01%, 66.66% {
        background-position: 
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            -9999px, /* b3 */
            center, /* b4 */
            -9999px, /* b6 */
            -9999px; /* b5 */
    }

    /* b6.jpg (66.67% ~ 83.33%) */
    66.67%, 83.33% {
        background-position: 
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            -9999px, /* b3 */
            -9999px, /* b4 */
            center, /* b6 */
            -9999px; /* b5 */
    }

    /* b5.jpg (83.34% ~ 100%) */
    83.34%, 100% {
        background-position: 
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            -9999px, /* b3 */
            -9999px, /* b4 */
            -9999px, /* b6 */
            center; /* b5 */
    }
}