/* ============ effects.css — Spotlight Border (GlowCard) + هاله ============
   پورت وانیلا از کامپوننت:
   https://21st.dev/community/components/easemize/spotlight-card/default
   نشانگر موقعیت موس را به‌صورت --x/--y/--xp (نسبت به خود کارت) از tilt.js می‌گیرد.
   پریست رنگ: red (base 0). --spread کاهش یافته تا رنگ گرم/برندی (قرمز→طلایی) بماند.
   (مقدار اصلی پریست red برابر 200 است؛ برای رنگین‌کمان کامل آن را زیاد کنید.)
============================================================================ */

.card {
  --base: 0;            /* hue پایه (قرمز) */
  --spread: 60;         /* دامنه تغییر hue با حرکت افقی موس */
  --radius: 18;
  --border: 2;          /* ضخامت بوردر (px) */
  --size: 200;          /* قطر نور (px) */
  --outer: 1;
  --saturation: 100;
  --lightness: 60;
  --bg-spot-opacity: 0;
  --border-spot-opacity: 0.9;
  --border-light-opacity: 0.9;

  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));

  --backdrop: var(--glass-bg);
  --backup-border: var(--glass-border);

  /* اسپات‌لایت پس‌زمینه (داخل کارت) */
  background-color: var(--backdrop);
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue, 0) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
    transparent
  );
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  border: var(--border-size) solid var(--backup-border);
}

/* بوردر نوری: ::before (رنگی/روشن) + ::after (سفید مرکز) با mask فقط روی لبه */
.card::before,
.card::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* فقط ناحیه‌ی border رنگ بگیرد */
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue, 0) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.6);
}

.card::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

/* هاله‌ی بیرونی (لایه‌ی بلر شده) */
.card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: filter;
  opacity: 0;
  border-radius: calc(var(--radius) * 1px);
  filter: blur(calc(var(--border-size) * 8));
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.card__glow::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 10px solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100% + 20px) calc(100% + 20px);
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue, 0) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / 1),
    transparent 100%
  );
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  filter: brightness(2);
}

/* نمایش نور هنگام هاور */
.card:hover { --bg-spot-opacity: 0.12; }
.card:hover::before,
.card:hover::after { opacity: 1; }
.card:hover .card__glow { opacity: var(--outer); }

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