/**
 * ECOIA — Custom Cursor
 * فقط Desktop (min-width: 1024px) + hover: hover
 * دو لایه: dot (مستقیم) + ring (lerp smooth)
 */

/* کاربران با prefers-reduced-motion → cursor پیش‌فرض */
@media (prefers-reduced-motion: reduce) {
    html.has-custom-cursor,
    html.has-custom-cursor * {
        cursor: auto !important;
    }

    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ۱. پنهان کردن cursor پیش‌فرض
   فقط وقتی has-custom-cursor روی html باشد
════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    html.has-custom-cursor,
    html.has-custom-cursor a,
    html.has-custom-cursor button,
    html.has-custom-cursor [role="button"],
    html.has-custom-cursor input,
    html.has-custom-cursor textarea,
    html.has-custom-cursor select,
    html.has-custom-cursor label {
        cursor: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ۲. Cursor Dot — ۸px، مستقیم دنبال mouse
════════════════════════════════════════════════════════════ */

.cursor-dot {
    position:       fixed;
    top:            0;
    left:           0;
    width:          8px;
    height:         8px;
    border-radius:  50%;
    background:     var(--gold, #C8A951);
    pointer-events: none;
    z-index:        calc(var(--z-cursor, 999) + 1);
    transform:      translate(-50%, -50%);
    will-change:    left, top;

    /* بدون transition — position مستقیم از JS */
    transition:     opacity 0.2s ease,
                    transform 0.2s ease,
                    width 0.25s ease,
                    height 0.25s ease;

    /* نمایش فقط روی desktop */
    display: none;
}

/* Glow جزئی */
.cursor-dot::after {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: 50%;
    background:    radial-gradient(
        circle,
        rgba(200, 169, 81, 0.25) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ۳. Cursor Ring — ۴۰px، lerp smooth با delay
════════════════════════════════════════════════════════════ */

.cursor-ring {
    position:       fixed;
    top:            0;
    left:           0;
    width:          40px;
    height:         40px;
    border-radius:  50%;
    border:         1px solid rgba(200, 169, 81, 0.45);
    background:     transparent;
    pointer-events: none;
    z-index:        var(--z-cursor, 999);
    transform:      translate(-50%, -50%);
    will-change:    left, top, width, height;

    /* فقط برای size/color transitions — نه position */
    transition:     width    0.35s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                    height   0.35s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                    border   0.25s ease,
                    background 0.25s ease,
                    opacity  0.2s ease;

    /* مرکز محتوا (برای VIEW label) */
    display:        none;
    align-items:    center;
    justify-content: center;
    overflow:       hidden;
}

/* ════════════════════════════════════════════════════════════
   ۴. فعال‌سازی — فقط desktop با pointer دقیق
════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .cursor-dot,
    .cursor-ring {
        display:        block;   /* نمایش */
    }

    .cursor-ring {
        display:        flex;
    }
}

/* ════════════════════════════════════════════════════════════
   ۵. States — Hover روی لینک / دکمه
════════════════════════════════════════════════════════════ */

.cursor-ring.is-hovering {
    width:            60px;
    height:           60px;
    background:       rgba(200, 169, 81, 0.10);
    border-color:     rgba(200, 169, 81, 0.60);
    mix-blend-mode:   difference;
}

/* Dot روی hover: کمی بزرگ‌تر */
.cursor-dot.is-hovering {
    width:  10px;
    height: 10px;
}

/* ════════════════════════════════════════════════════════════
   ۶. State — Hover روی تصویر: ۸۰px + "VIEW"
════════════════════════════════════════════════════════════ */

.cursor-ring.is-image {
    width:        80px;
    height:       80px;
    background:   rgba(200, 169, 81, 0.08);
    border-color: rgba(200, 169, 81, 0.70);
    mix-blend-mode: normal;
}

/* Dot روی image: پنهان */
.cursor-dot.is-image {
    opacity:    0;
    transform:  translate(-50%, -50%) scale(0);
}

/* label "VIEW" داخل ring */
.cursor-view-label {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    opacity:        0;
    transform:      scale(0.7);
    transition:     opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    user-select:    none;
    white-space:    nowrap;
}

.cursor-ring.is-image .cursor-view-label {
    opacity:   1;
    transform: scale(1);
}

/* ════════════════════════════════════════════════════════════
   ۷. State — روی متن (text): dot پنهان + ring فشرده
════════════════════════════════════════════════════════════ */

.cursor-dot.is-text {
    opacity:    0;
    transform:  translate(-50%, -50%) scale(0);
}

.cursor-ring.is-text {
    width:        28px;
    height:       28px;
    border-color: rgba(200, 169, 81, 0.25);
    background:   transparent;
    mix-blend-mode: normal;
}

/* ════════════════════════════════════════════════════════════
   ۸. State — Hidden: وقتی mouse از پنجره خارج می‌شود
════════════════════════════════════════════════════════════ */

.cursor-dot.is-hidden,
.cursor-ring.is-hidden {
    opacity:        0;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ۹. State — روی عناصر interactive با cursor خاص
   (input, textarea — cursor text نشان می‌دهیم)
════════════════════════════════════════════════════════════ */

.cursor-ring.is-input {
    width:        3px;
    height:       24px;
    border-radius: 1px;
    border:       1px solid var(--gold, #C8A951);
    background:   var(--gold, #C8A951);
    mix-blend-mode: normal;
}

.cursor-dot.is-input {
    opacity: 0;
}

/* ════════════════════════════════════════════════════════════
   ۱۰. State — روی دکمه disabled
════════════════════════════════════════════════════════════ */

.cursor-dot.is-disabled,
.cursor-ring.is-disabled {
    opacity:      0.3;
    border-color: rgba(200, 169, 81, 0.2);
}

/* ════════════════════════════════════════════════════════════
   ۱۱. Drag state — هنگام click/drag
════════════════════════════════════════════════════════════ */

.cursor-dot.is-pressing {
    transform:  translate(-50%, -50%) scale(0.6);
    background: var(--gold-bright, #F0E0A8);
}

.cursor-ring.is-pressing {
    width:      32px;
    height:     32px;
    border-color: rgba(200, 169, 81, 0.8);
}