/**
 * ECOIA — Preloader Cinematic
 * Full Redesign — Dark Luxury
 * مرحله‌ها: خطوط → لوگو → progress → خروج
 */

/* ════════════════════════════════════════════════════════════
   ۱. Overlay اصلی
════════════════════════════════════════════════════════════ */

.preloader {
    position:       fixed;
    inset:          0;
    z-index:        var(--z-preloader, 9999);
    background:     var(--bg-void, #070707);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-direction: column;
    overflow:       hidden;
    /* بدون will-change ابتدا — GSAP آن را مدیریت می‌کند */
}

/* وقتی انیمیشن تموم شد */
.preloader.is-done {
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ۲. خطوط افقی طلایی
   دو خط از لبه‌های چپ و راست به مرکز می‌آیند
════════════════════════════════════════════════════════════ */

.preloader__lines {
    position:       absolute;
    top:            50%;
    left:           0;
    right:          0;
    transform:      translateY(-50%);
    height:         1px;
    pointer-events: none;
    z-index:        1;
}

/* خط چپ */
.preloader__line--left {
    position:   absolute;
    top:        0;
    left:       0;
    width:      50%;
    height:     1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--gold, #C8A951) 60%,
        var(--gold, #C8A951) 100%
    );
    transform:        translateX(-100%);   /* شروع: خارج از صفحه — GSAP این را انیمیت می‌کند */
    transform-origin: left;
    opacity:          0.9;
}

/* خط راست */
.preloader__line--right {
    position:   absolute;
    top:        0;
    right:      0;
    width:      50%;
    height:     1px;
    background: linear-gradient(
        to left,
        transparent 0%,
        var(--gold, #C8A951) 60%,
        var(--gold, #C8A951) 100%
    );
    transform:        translateX(100%);    /* شروع: خارج از صفحه */
    transform-origin: right;
    opacity:          0.9;
}

/* نقطه درخشان در مرکز — جایی که دو خط ملاقات می‌کنند
   BUG 1 fix: div واقعی به‌جای ::after — تا GSAP بتواند animate کند */
.preloader__dot {
    position:         absolute;
    top:              50%;
    left:             50%;
    transform:        translate(-50%, -50%) scale(1);
    width:            5px;
    height:           5px;
    border-radius:    50%;
    background:       var(--gold, #C8A951);
    box-shadow:       0 0 12px var(--gold, #C8A951),
                      0 0 32px rgba(200, 169, 81, 0.5);
    opacity:          0;    /* GSAP آن را نمایش می‌دهد */
    pointer-events:   none;
    z-index:          2;
}

/* ════════════════════════════════════════════════════════════
   ۳. محتوای مرکزی — لوگو + Progress + Counter
════════════════════════════════════════════════════════════ */

.preloader__content {
    position:        relative;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0;
    opacity:         0;    /* شروع پنهان — GSAP نمایش می‌دهد */
}

/* لوگو */
.preloader__logo {
    width:         140px;
    height:        140px;
    object-fit:    contain;
    margin-bottom: 32px;
    transform:     scale(0.8);     /* GSAP scale up می‌کند */
    filter:        drop-shadow(0 0 20px rgba(200, 169, 81, 0.3));
    opacity:       0;
}

/* Progress Bar Wrapper */
.preloader__progress-wrap {
    width:         200px;
    height:        1px;
    background:    rgba(200, 169, 81, 0.12);
    position:      relative;
    margin-bottom: 20px;
    overflow:      hidden;
}

/* Progress Bar Fill */
.preloader__progress-bar {
    position:   absolute;
    top:        0;
    right:      0;      /* RTL: از راست شروع */
    height:     100%;
    width:      0%;
    background: var(--gold, #C8A951);
    box-shadow: 0 0 8px rgba(200, 169, 81, 0.6);
    /* GSAP width را animate می‌کند */
}

/* شیمر روی progress bar */
.preloader__progress-bar::after {
    content:    '';
    position:   absolute;
    top:        0;
    right:      0;
    width:      40px;
    height:     100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: progress-shimmer 0.8s ease infinite;
}

@keyframes progress-shimmer {
    from { transform: translateX(40px); }
    to   { transform: translateX(-200px); }
}

/* شمارنده درصد — Cormorant Garamond Italic */
.preloader__count {
    font-family:    'Cormorant Garamond', serif;
    font-style:     italic;
    font-weight:    300;
    font-size:      clamp(36px, 5vw, 56px);
    color:          var(--gold-light, #E8D5A0);
    line-height:    1;
    letter-spacing: -0.02em;
    min-width:      80px;
    text-align:     center;
    font-variant-numeric: tabular-nums;
}

.preloader__count-symbol {
    font-size:   0.5em;
    opacity:     0.6;
    font-style:  normal;
    margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════
   ۴. Label زیر شمارنده
════════════════════════════════════════════════════════════ */

.preloader__label {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      10px;
    letter-spacing: var(--tracking-label, 0.20em);
    text-transform: uppercase;
    color:          var(--text-muted, #4A4845);
    margin-top:     12px;
    opacity:        0;   /* GSAP */
}

/* ════════════════════════════════════════════════════════════
   ۵. Cover — لایه‌ای که صفحه را می‌پوشاند هنگام خروج
   preloader یک‌دست بالا می‌رود و این cover پشت آن است
════════════════════════════════════════════════════════════ */

.preloader__cover {
    position:   absolute;
    inset:      0;
    background: var(--bg-void, #070707);
    z-index:    0;
    transform:  translateY(0);   /* GSAP translateY(-100%) می‌کند */
}

/* ════════════════════════════════════════════════════════════
   ۶. Grain texture روی preloader — بافت لوکس
════════════════════════════════════════════════════════════ */

.preloader::after {
    content:            '';
    position:           fixed;
    inset:              0;
    background-image:   url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat:  repeat;
    background-size:    180px 180px;
    opacity:            0.025;
    pointer-events:     none;
    z-index:            3;
}

/* ════════════════════════════════════════════════════════════
   ۷. Body — اسکرول را قفل کن تا preloader تموم شود
════════════════════════════════════════════════════════════ */

body.preloader-active {
    overflow:    hidden;
    user-select: none;
}

/* محتوای سایت ابتدا پنهان — GSAP reveal می‌کند */
body.preloader-active #site-header,
body.preloader-active main,
body.preloader-active .site-footer {
    visibility: hidden;
}

/* ════════════════════════════════════════════════════════════
   ۸. Reduced Motion — فوری نمایش بده
════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .preloader {
        display: none !important;
    }

    body.preloader-active #site-header,
    body.preloader-active main,
    body.preloader-active .site-footer {
        visibility: visible !important;
    }

    body.preloader-active {
        overflow: auto !important;
    }
}