/* ===== PAGE LOADER ===== */
/* 
body.loading {
    overflow: hidden;
} */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-bg-left,
.loader-bg-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 0;
}
.loader-bg-right{
    background: rgba(197, 159, 89, 0.932);
    right: 0;
}
.loader-bg-left{
    background-color: rgba(10, 25, 47, 0.904);
    left: 0;
}


.page-loader.done .loader-bg-left  { transform: translateX(-100%); }
.page-loader.done .loader-bg-right { transform: translateX(100%); }

.loader-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loader-inner .about-logo-badge {
    left: 50%;
    top: -50%;
    transform: translateX(-50%) !important;
}

.loader-text-reveal {
    display: flex;
    gap: 4px;
}

.loader-char {
    font-family: "font_bold", sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #fcf6ec;
    opacity: 0;
    transform: translateY(40px);
    animation: charUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.1s) forwards;
    display: inline-block;
}

.loader-sub-reveal {
    display: flex;
    gap: 3px;
}

.loader-sub-char {
    font-family: "font_main", sans-serif;
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.87);
    opacity: 0;
    transform: translateY(10px);
    animation: charUp 0.4s ease calc(0.6s + var(--j) * 0.07s) forwards;
    display: inline-block;
}

.loader-line-wrap {
    width: 0px;
    height: 1px;
    background: rgba(255, 255, 255);
    overflow: hidden;
    margin-top: 8px;
    animation: lineExpand 0.6s ease 0.4s forwards;
}

.loader-line {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #CCA55C, #BD8D31);
    animation: lineProgress 1.2s ease 1s forwards;
}

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

@keyframes lineExpand {
    to { width: 200px; }
}

@keyframes lineProgress {
    to { width: 100%; }
}

/* إخفاء المحتوى قبل الانفتاح */
.page-loader.done .loader-inner {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.page-loader.gone {
    display: none;
}

@media (max-width: 1200px) {
    .page-loader .loader-inner .about-logo-badge {
        top: -70%;
    }
}

@media (max-width: 768px) {
    .page-loader .loader-inner .about-logo-badge {
        top: -100%;
    }
}