/* ============================================================
   HONARA Loader — لودر سراسری سایت
   ============================================================
   تنظیم backdrop از همین‌جا (بدون دست‌زدن به بقیه کد):
   --hn-backdrop-bg   : رنگ/شفافیت پس‌زمینه (مات، نه سیاه)
   --hn-backdrop-blur : میزان بلور پشت لودر
   ============================================================ */

.loader-overlay {
    --hn-backdrop-bg: rgba(246, 241, 232, 0.2);
    --hn-backdrop-blur: 8px;

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;

    /* ✅ backdrop مات — بدون سیاهی */
    background: var(--hn-backdrop-bg);
    -webkit-backdrop-filter: blur(var(--hn-backdrop-blur));
    backdrop-filter: blur(var(--hn-backdrop-blur));
}

.loader-overlay.active {
    display: flex;
}

/* ===== HONARA Loader ===== */

.hn-loader {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* حلقهٔ چرخان بیرونی */
.hn-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #5a4230;
    border-right-color: #5a4230;
    animation: hn-spin 1.8s cubic-bezier(.45, .05, .55, .95) infinite;
}

/* حلقهٔ نقطه‌چین داخلی (خلاف جهت) */
.hn-ring-dashed {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 2px dashed rgba(90, 66, 48, .33);
    animation: hn-spin-rev 7s linear infinite;
}

/* نقطهٔ مداری */
.hn-orbit {
    position: absolute;
    inset: 0;
    animation: hn-spin 1.8s cubic-bezier(.45, .05, .55, .95) infinite;
}

.hn-orbit::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5a4230;
}

/* لوگو با تنفس و هالهٔ نور */
.hn-logo {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    animation: hn-breathe 2.6s ease-in-out infinite,
               hn-glow 2.6s ease-in-out infinite;
}

.hn-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* نوشتهٔ HONARA — حروف موجی */
.hn-caption {
    font-family: Georgia, 'Times New Roman', serif;
}

.hn-word {
    display: flex;
    gap: 6px;
    direction: ltr;
    justify-content: center;
}

.hn-word span {
    font-size: 22px;
    letter-spacing: 4px;
    color: #4a3a2b;
    animation: hn-letter 1.6s ease-in-out infinite;
}

/* تأخیر پله‌ای حروف (معادل JS نسخه اصلی: i * 0.12s) */
.hn-word span:nth-child(1) { animation-delay: 0s; }
.hn-word span:nth-child(2) { animation-delay: .12s; }
.hn-word span:nth-child(3) { animation-delay: .24s; }
.hn-word span:nth-child(4) { animation-delay: .36s; }
.hn-word span:nth-child(5) { animation-delay: .48s; }
.hn-word span:nth-child(6) { animation-delay: .6s; }

/* سه نقطهٔ لودینگ */
.hn-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 14px;
}

.hn-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5a4230;
    animation: hn-dot 1.4s ease-in-out infinite;
}

.hn-dots span:nth-child(2) { animation-delay: .18s; }
.hn-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes hn-spin     { to { transform: rotate(360deg); } }
@keyframes hn-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes hn-breathe  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes hn-glow     { 0%, 100% { box-shadow: 0 0 0 0 rgba(90, 66, 48, .18); }
                         50%      { box-shadow: 0 0 32px 6px rgba(90, 66, 48, .10); } }
@keyframes hn-letter   { 0%, 100% { opacity: .35; transform: translateY(0); }
                         50%      { opacity: 1;   transform: translateY(-4px); } }
@keyframes hn-dot      { 0%, 80%, 100% { opacity: .25; transform: translateY(0); }
                         40%           { opacity: 1;   transform: translateY(-6px); } }


/* ============================================================
   اسپلش ورود (#hnSplash) — لودر کامل HONARA
   فقط در صفحه اصلی و جزئیات محصول؛ با آماده‌شدن صفحه محو می‌شود.
   ============================================================ */

.hn-splash {
    position: fixed;
    inset: 0;
    z-index: 100000; /* بالاتر از loaderOverlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    background: #f6f1e8;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

.hn-splash.hn-splash-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}