/* VLI Item Glow — 2 vệt sáng chạy quanh ô vật phẩm như Võ Lâm Truyền Kỳ 1
 *   Tím (r3)       : 2 vệt tím
 *   Hoàng Kim (r4) : 2 vệt vàng (HK môn phái + HK bộ chung)
 *   Bạch Kim (r5)  : 2 vệt trắng
 * Áp cho mọi ô đồ: hành trang, trang bị, rương, giao dịch, xem trang bị người khác.
 * Trình duyệt cũ không hỗ trợ @property: vẫn hiện 2 vệt nhưng đứng yên.
 */
@property --vli-ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.it.r3, .it.r4, .it.r5,
.vsx-slot.r3, .vsx-slot.r4, .vsx-slot.r5,
.vli-r3, .vli-r4, .vli-r5 { position: relative; isolation: isolate; }

.it.r3::before, .it.r4::before, .it.r5::before,
.vsx-slot.r3::before, .vsx-slot.r4::before, .vsx-slot.r5::before,
.vli-r3::before, .vli-r4::before, .vli-r5::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;                      /* độ dày vệt sáng */
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from var(--vli-ga),
      transparent 0deg 40deg, var(--vli-gc2) 80deg, var(--vli-gc) 112deg, #fff 118deg, transparent 121deg 220deg,
      var(--vli-gc2) 260deg, var(--vli-gc) 292deg, #fff 298deg, transparent 301deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: vliItemGlow var(--vli-gs, 2.4s) linear infinite;
  filter: drop-shadow(0 0 2px var(--vli-gc));
}

/* Tím */
.it.r3, .vsx-slot.r3, .vli-r3 { --vli-gc: #d48bff; --vli-gc2: rgba(160, 70, 255, .15); --vli-gs: 2.8s; }
/* Hoàng Kim */
.it.r4, .vsx-slot.r4, .vli-r4 { --vli-gc: #ffd84a; --vli-gc2: rgba(255, 170, 0, .15); --vli-gs: 2.4s; }
/* Bạch Kim */
.it.r5, .vsx-slot.r5, .vli-r5 { --vli-gc: #ffffff; --vli-gc2: rgba(190, 235, 255, .18); --vli-gs: 2.2s; }

@keyframes vliItemGlow { to { --vli-ga: 360deg; } }

/* Người chơi bật "Tiết kiệm pin" / giảm chuyển động: giữ vệt sáng nhưng không chạy */
@media (prefers-reduced-motion: reduce) {
  .it.r3::before, .it.r4::before, .it.r5::before,
  .vsx-slot.r3::before, .vsx-slot.r4::before, .vsx-slot.r5::before,
  .vli-r3::before, .vli-r4::before, .vli-r5::before { animation: none; }
}
body.saver .it.r3::before, body.saver .it.r4::before, body.saver .it.r5::before,
body.saver .vli-r3::before, body.saver .vli-r4::before, body.saver .vli-r5::before { animation: none; }