/* ═══════════════════════════════════════════════════════════
   CURSOR.CSS — کرسر سفارشی
   CURSOR.CSS — Custom cursor
   
   فهرست / Table of Contents:
   01. Cursor           — پایه
   02. States           — حالت‌ها
   03. Light Theme      — تم روشن
   04. Hide Default     — مخفی کردن کرسر پیش‌فرض
   05. Chrome Fix       — فیکس کروم
   06. Mobile           — موبایل
   07. Reduced Motion   — احترام به کاربر
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   01. CURSOR — پایه
   ─────────────────────────────────────────────────────────── */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;

  transform: translate(-50%, -50%);
  will-change: transform;

  opacity: 0;
  transition: opacity 0.3s ease;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring {
  opacity: 1;
}

/* ═══ نقطه ═══ */
.cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;

  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.8),
    0 0 16px rgba(255, 255, 255, 0.4);

  transition:
    opacity 0.3s ease,
    transform 0.15s ease,
    width 0.2s,
    height 0.2s;
}

/* ═══ حلقه ═══ */
.cursor-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);

  transition:
    opacity 0.3s ease,
    width 0.3s cubic-bezier(.2, .8, .2, 1),
    height 0.3s cubic-bezier(.2, .8, .2, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
}


/* ───────────────────────────────────────────────────────────
   02. STATES — حالت‌ها
   ─────────────────────────────────────────────────────────── */

/* ═══ روی لینک / دکمه ═══ */
body.cursor-hover .cursor-ring {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
  background-color: rgba(90, 143, 160, 0.1);
}

body.cursor-hover .cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
}

/* ═══ روی گالری — VIEW ═══ */
body.cursor-view .cursor-ring {
  width: 80px;
  height: 80px;
  border-color: var(--accent);
  background-color: rgba(90, 143, 160, 0.15);
}

body.cursor-view .cursor-ring::before {
  content: 'VIEW';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  white-space: nowrap;
}

body.cursor-view .cursor-dot {
  opacity: 0;
}

/* ═══ روی متن / ورودی ═══ */
body.cursor-text .cursor-ring {
  width: 4px;
  height: 4px;
  border: none;
  background: #ffffff;
}

body.cursor-text .cursor-dot {
  opacity: 0;
}


/* ───────────────────────────────────────────────────────────
   03. LIGHT THEME — تم روشن
   ─────────────────────────────────────────────────────────── */

[data-theme="light"] .cursor-dot {
  background: #0A0A0A;
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .cursor-ring {
  border-color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] body.cursor-text .cursor-ring {
  background: #0A0A0A;
}


/* ───────────────────────────────────────────────────────────
   04. HIDE DEFAULT — مخفی کردن کرسر پیش‌فرض
   ─────────────────────────────────────────────────────────── */

body.cursor-enabled,
body.cursor-enabled * {
  cursor: none !important;
}

/* ═══ استثناها: فرم‌ها ═══ */
body.cursor-enabled input,
body.cursor-enabled textarea,
body.cursor-enabled select {
  cursor: text !important;
}

/* ═══ استثناها: لایت‌باکس ═══ */
body.lightbox-open,
body.lightbox-open * {
  cursor: auto !important;
}


/* ───────────────────────────────────────────────────────────
   05. CHROME FIX — فیکس کروم
   ─────────────────────────────────────────────────────────── */

/* ═══ override کردن is-chrome از components.css ═══ */
html.is-chrome .cursor-dot,
html.is-chrome .cursor-ring {
  display: block !important;
}

html.is-chrome body:not(.cursor-ready) .cursor-dot,
html.is-chrome body:not(.cursor-ready) .cursor-ring {
  opacity: 0 !important;
}

html.is-chrome body.cursor-ready .cursor-dot,
html.is-chrome body.cursor-ready .cursor-ring {
  opacity: 1 !important;
}


/* ───────────────────────────────────────────────────────────
   06. MOBILE — غیرفعال
   ─────────────────────────────────────────────────────────── */

@media (hover: none), (max-width: 900px) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  body.cursor-enabled,
  body.cursor-enabled * {
    cursor: auto !important;
  }
}


/* ───────────────────────────────────────────────────────────
   07. REDUCED MOTION
   ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   EDGE / BRAVE FIX — کرسر روی مرورگرهای دیگه
   ═══════════════════════════════════════════════════════ */

/* ═══ روی Edge / Opera / Brave → کرسر سفارشی مخفی ═══ */
html.is-edge .cursor-dot,
html.is-edge .cursor-ring,
html.is-opera .cursor-dot,
html.is-opera .cursor-ring,
html.is-brave .cursor-dot,
html.is-brave .cursor-ring {
  display: none !important;
}

/* ═══ کرسر پیش‌فرض برگرده ═══ */
html.is-edge body,
html.is-edge *,
html.is-opera body,
html.is-opera *,
html.is-brave body,
html.is-brave * {
  cursor: auto !important;
}

html.is-edge a,
html.is-edge button,
html.is-edge input,
html.is-edge textarea,
html.is-edge [data-cursor],
html.is-opera a,
html.is-opera button,
html.is-opera input,
html.is-opera textarea,
html.is-opera [data-cursor],
html.is-brave a,
html.is-brave button,
html.is-brave input,
html.is-brave textarea,
html.is-brave [data-cursor] {
  cursor: pointer !important;
}

html.is-edge input,
html.is-edge textarea,
html.is-opera input,
html.is-opera textarea,
html.is-brave input,
html.is-brave textarea {
  cursor: text !important;
}

/* ═══════════════════════════════════════════════════════
   EDGE / FIREFOX / OPERA — کرسر پیش‌فرض
   ═══════════════════════════════════════════════════════ */

/* ═══ روی Edge / Firefox / Opera / Brave → کرسر سفارشی مخفی ═══ */
html.is-edge .cursor-dot,
html.is-edge .cursor-ring,
html.is-firefox .cursor-dot,
html.is-firefox .cursor-ring,
html.is-opera .cursor-dot,
html.is-opera .cursor-ring,
html.is-brave .cursor-dot,
html.is-brave .cursor-ring {
  display: none !important;
}

/* ═══ کرسر پیش‌فرض برگرده ═══ */
html.is-edge body,
html.is-edge *,
html.is-firefox body,
html.is-firefox *,
html.is-opera body,
html.is-opera *,
html.is-brave body,
html.is-brave * {
  cursor: auto !important;
}

/* ═══ لینک‌ها و دکمه‌ها → دست ═══ */
html.is-edge a,
html.is-edge button,
html.is-edge [data-cursor],
html.is-firefox a,
html.is-firefox button,
html.is-firefox [data-cursor],
html.is-opera a,
html.is-opera button,
html.is-opera [data-cursor],
html.is-brave a,
html.is-brave button,
html.is-brave [data-cursor] {
  cursor: pointer !important;
}

/* ═══ فرم‌ها → متن ═══ */
html.is-edge input,
html.is-edge textarea,
html.is-firefox input,
html.is-firefox textarea,
html.is-opera input,
html.is-opera textarea,
html.is-brave input,
html.is-brave textarea {
  cursor: text !important;
}

/* ═══ گالری → زوم ═══ */
html.is-edge .gallery-item.has-lightbox,
html.is-firefox .gallery-item.has-lightbox,
html.is-opera .gallery-item.has-lightbox,
html.is-brave .gallery-item.has-lightbox {
  cursor: zoom-in !important;
}

/* ═══ Before/After → resize ═══ */
html.is-edge .ba-handle,
html.is-firefox .ba-handle,
html.is-opera .ba-handle,
html.is-brave .ba-handle {
  cursor: ew-resize !important;
}