/* ============ RedX Vault v2 — إصلاح بطاقات المعروض بعد فتح الخزنة ============
   المشكلة: بطاقات .vc كانت absolute-positioned بتحويلات متضاربة فتتراكب.
   الحل: صفّ فليكس ثابت + دخول زنبركي متتابع + رفع عند التحويم. يُحمَّل بعد site.css */
#heroV .vfan{
  display:none;
  position:absolute;inset:0;z-index:4;
  align-items:center;justify-content:center;
  gap:clamp(8px,2.4vw,22px);
  padding-inline:4%;
}
#heroV[data-open="1"] .vfan{display:flex}

/* إبطال قواعد v1 المتضاربة وبناء دخول نظيف */
#heroV .vc{
  position:relative;
  width:clamp(118px,25%,228px);
  aspect-ratio:3/4;
  opacity:0;
  pointer-events:none;
  transform:translateY(48px) scale(.8) rotate(calc(var(--r,0)*1.8deg));
  transition:transform .95s var(--e),opacity .45s ease,box-shadow .45s var(--e);
  will-change:transform;
  border-radius:22px;
}
#heroV[data-open="1"] .vc{
  opacity:1;
  pointer-events:auto;
  transform:translateY(calc(var(--y,0)*1px)) rotate(calc(var(--r,0)*1deg));
  transition-delay:calc(.55s + var(--i,0)*.15s),calc(.55s + var(--i,0)*.15s),0s;
}
#heroV[data-open="1"] .vc:hover,
#heroV[data-open="1"] .vc:focus-visible{
  transform:translateY(-16px) rotate(0deg) scale(1.07);
  transition-delay:0s;
  z-index:6;
  box-shadow:0 44px 74px -24px rgba(210,31,60,.6),0 0 0 1.5px var(--gold);
}
#heroV[data-open="1"] .vc:hover img{transform:scale(1.09)}
#heroV[data-open="1"] .vc:hover .vc-go{opacity:1;transform:none}

/* أشعة الخلفية تدور ببطء */
#heroV .vrays{animation:rr 30s linear infinite}
#heroV:not([data-open="1"]) .vfan{pointer-events:none}
#heroV:not([data-open="1"]) .vc{transition:transform .5s var(--e) calc(var(--i,0)*60ms),opacity .25s}

/* شرارة الافتتاح */
.vx-spark{position:fixed;z-index:420;pointer-events:none;border-radius:2px}

@media(max-width:640px){
  #heroV .vc{width:clamp(92px,29%,148px);border-radius:16px}
  #heroV[data-open="1"] .vc{transform:translateY(calc(var(--y,0)*.5px)) rotate(calc(var(--r,0)*.55deg))}
  #heroV .vfan{gap:8px}
}