/* =========================================================
   Motion Border Button
   افکت حاشیهٔ نورانی چرخان — مستقل از المنتور

   نحوهٔ استفاده (هر دو حالت کار می‌کند):
   1) کلاس روی خودِ دکمه/لینک:
      <a class="motion-border-btn" href="#">ثبت‌نام</a>
   2) کلاس روی یک والد که داخلش دکمه/لینک دارد
      (حالت المنتور، بلوک دکمهٔ گوتنبرگ، فرم‌ها و ...):
      <div class="motion-border-btn"> <button>ارسال</button> </div>

   سفارشی‌سازی با متغیرها:
      --mb-color      رنگ اصلی حاشیه
      --mb-flare      رنگ درخشش متحرک
      --mb-thickness  ضخامت حاشیه
      --mb-speed      مدت یک دور چرخش
   ========================================================= */

.motion-border-btn {
  --mb-color: #2CB1A9;
  --mb-flare: rgba(255, 255, 255, 0.95);
  --mb-thickness: 2px;
  --mb-speed: 3s;
}

/* هدف افکت: یا خودِ عنصر (اگر دکمه/لینک داخلش نباشد)، یا دکمه/لینک داخلی */
.motion-border-btn:not(:has(a, button, input[type="submit"])),
.motion-border-btn :is(a, button, input[type="submit"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none !important;
}

/* لایهٔ گرادیان چرخان */
.motion-border-btn:not(:has(a, button, input[type="submit"]))::before,
.motion-border-btn :is(a, button, input[type="submit"])::before {
  content: "";
  position: absolute;
  width: 160%;
  height: 260%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background: conic-gradient(
    from 0deg,
    transparent,
    color-mix(in srgb, var(--mb-color) 18%, transparent),
    var(--mb-color),
    var(--mb-flare),
    var(--mb-color),
    color-mix(in srgb, var(--mb-color) 16%, transparent),
    transparent
  );

  animation: motion-border-spin var(--mb-speed) linear infinite;
  z-index: -2;
}

/* ماسک داخلی: فقط نوار لبه از گرادیان دیده می‌شود */
.motion-border-btn:not(:has(a, button, input[type="submit"]))::after,
.motion-border-btn :is(a, button, input[type="submit"])::after {
  content: "";
  position: absolute;
  inset: var(--mb-thickness);
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

/* نگه‌داشتن متن و آیکن بالای لایه‌ها (span/svg/i/img همهٔ فریم‌ورک‌ها را پوشش می‌دهد) */
.motion-border-btn :is(span, svg, i, img) {
  position: relative;
  z-index: 2;
}

@keyframes motion-border-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* احترام به تنظیم کاهش حرکت در سیستم‌عامل کاربر */
@media (prefers-reduced-motion: reduce) {
  .motion-border-btn:not(:has(a, button, input[type="submit"]))::before,
  .motion-border-btn :is(a, button, input[type="submit"])::before {
    animation: none;
  }
}

/* -----------------------------------------------------------
   اختیاری: ظاهر پایهٔ دکمه برای HTML خام (بدون المنتور/قالب)
   کلاس "is-bare" را کنار کلاس اصلی بگذارید.
   لازم است چون ::after رنگ داخل را از خود دکمه ارث می‌برد؛
   دکمهٔ بدون پس‌زمینه، حلقهٔ توپر نشان می‌دهد نه حاشیه.
   ----------------------------------------------------------- */
.motion-border-btn.is-bare,
.motion-border-btn.is-bare :is(a, button, input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  border-radius: 8px;
  background: #12233a;
  color: #fff;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}