/* --- 변수 선언 --- */
:root {
    --wipe-duration: 4.3s;
    --fade-duration: 4.287s; /* 깜빡임 애니메이션 전체 시간 */
    --brand-orange: #F37021;
    --brand-blue:  rgba(0,97,177,.95);
}

/* --- 레이아웃 --- */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background-color: #adb5bd;
    opacity: 0.8;
}

.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin-bottom: 20px;
}

/* --- 1. 로고 Wipe 효과 --- */
.logo-wrapper {
    width: 50%;
    height: 50%;
}

.logo-wipe {
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
    mask-size: 200% 100%;
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
    animation: wipe-reveal var(--wipe-duration) linear infinite;
}

@keyframes wipe-reveal {
    0% { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
    50%, 100% { mask-position: 0 0; -webkit-mask-position: 0 0; }
}

/* --- 2. 텍스트 순차적 깜빡임 효과 --- */
.text-fading-wrapper {
    font-size: 16px;
    font-weight: bold;
    color: var(--brand-orange);
}

.text-fading-wrapper span {
    opacity: 0; /* 기본 상태는 투명 */
    /* 개별적으로 깜빡이는 애니메이션 적용 */
    animation: fade-in-out var(--fade-duration) infinite;
}

@keyframes fade-in-out {
    0%, 100% {
        opacity: 0; /* 시작과 끝은 투명하게 */
    }
    50% {
        opacity: 1; /* 중간에 가장 밝게 */
    }
}