/* =========================
   صفحه لودینگ اولیه سایت
   ------------------------
   این فایل کاملاً مستقل و اضافه‌ست؛ هیچ استایل موجودی رو تغییر نمی‌ده.
   لودینگ به‌صورت position:fixed روی کل ویوپورت میاد (نه فرزند باکس سایت)
   تا صرف‌نظر از هر گونه جابه‌جایی احتمالی باکس کلی سایت روی موبایل،
   همیشه دقیقاً کل صفحه (و در نتیجه کل باکس سایت) رو بپوشونه و هیچ
   شکاف/گپی از زیرش دیده نشه.
========================= */

html.site-is-loading,
html.site-is-loading body {
    overflow: hidden !important;
    height: 100% !important;
}

#siteLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    height: 100vh;
    z-index: 2147483647;
    background: #04120d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease, visibility 0s linear 0s;
}

#siteLoader.site-loader-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
    pointer-events: none;
}

#siteLoader .site-loader-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent;
    animation: siteLoaderRingSpin 1.5s linear infinite;
}

@keyframes siteLoaderRingSpin {
    0% {
        transform: rotate(90deg);
        box-shadow:
            0 2px 2px 0 #fff inset,
            0 6px 9px 0 #e6c766 inset,
            0 7px 7px 0 #0aab82 inset;
    }
    50% {
        transform: rotate(270deg);
        background: #04231a;
        box-shadow:
            0 2px 2px 0 #fff inset,
            0 6px 9px 0 #cba135 inset,
            0 7px 7px 0 #077255 inset;
    }
    100% {
        transform: rotate(450deg);
        box-shadow:
            0 2px 2px 0 #fff inset,
            0 6px 9px 0 #e6c766 inset,
            0 7px 7px 0 #0aab82 inset;
    }
}

#siteLoader .site-loader-word {
    display: flex;
    gap: 2px;
    font-family: 'Italiana', serif !important;
    font-size: 30px;
    letter-spacing: 5px;
    color: #f2efe6;
    direction: ltr;
}

#siteLoader .site-loader-letter {
    display: inline-block;
    opacity: 0;
    animation: siteLoaderLetterIn 1.6s ease forwards;
}

#siteLoader .site-loader-letter:nth-child(1) { animation-delay: .4s; }
#siteLoader .site-loader-letter:nth-child(2) { animation-delay: .48s; }
#siteLoader .site-loader-letter:nth-child(3) { animation-delay: .56s; }
#siteLoader .site-loader-letter:nth-child(4) { animation-delay: .64s; }
#siteLoader .site-loader-letter:nth-child(5) { animation-delay: .72s; }
#siteLoader .site-loader-letter:nth-child(6) { animation-delay: .8s; }
#siteLoader .site-loader-letter:nth-child(7) { animation-delay: .88s; }
#siteLoader .site-loader-letter:nth-child(8) { animation-delay: .96s; }

@keyframes siteLoaderLetterIn {
    0%   { opacity: .4; transform: scale(1); }
    35%  { opacity: 1;  transform: scale(1.2); text-shadow: 0 0 8px #e6c766; }
    70%  { opacity: .85; transform: scale(1); }
    100% { opacity: 1;  transform: scale(1); text-shadow: 0 0 3px rgba(203,161,53,.3); }
}

#siteLoader .site-loader-tag {
    font-family: 'Shabnam', sans-serif !important;
    font-size: 11px;
    letter-spacing: 3px;
    color: #9c8a5c;
    opacity: 0;
    animation: siteLoaderFadeUp .8s ease forwards 1.9s;
}

@keyframes siteLoaderFadeUp {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #siteLoader .site-loader-ring,
    #siteLoader .site-loader-letter,
    #siteLoader .site-loader-tag {
        animation: none !important;
        opacity: 1 !important;
    }
}