/* Основа рамок аватарки. Сами рамки — CSS из админки (ShopItem.Css), сервер
   собирает их в /shop/styles.css. Здесь — то, на что этот код опирается.

   Рамка — кольцо снаружи аватарки; в карточке игрока она заменяет обводку
   цвета игрока.

   Готовое кольцо — ::after с маской «рамка без середины»: достаточно задать
   --frame-bg (цвет, градиент, узор), и кольцо ляжет по форме аватарки.
   ::before — под свечение: маска кольца срезала бы тень. Код рамки волен
   переписать оба целиком. */
.vx-frame{position:relative;display:inline-flex;flex:none;border-radius:50%}
.vx-frame::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:3px;pointer-events:none;
  background:var(--frame-bg,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.vx-frame::before{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none}
/* В карточке игрока у аватарки своё кольцо цвета игрока. Надетая рамка его
   заменяет, а не рисуется второй поверх: цвет игрока остаётся у имени и
   реплик на таймлайне, а две рамки подряд читаются как ошибка вёрстки. */
.vx-frame .vx-player__av{box-shadow:none}

/* Общие анимации — ими пользуются готовые рамки и эффекты фона карточки.
   Угол — анимируемое свойство на самом псевдоэлементе: переменная,
   вычисленная на родителе, не ожила бы. */
@property --frame-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes vx-frame-turn{to{--frame-turn:360deg}}
@keyframes vx-frame-shine{from{background-position:120% 0}to{background-position:-120% 0}}

/* «Уменьшить движение» в системе — рамки замирают, но остаются собой.
   !important — потому что код рамки подключается позже и перебил бы правило. */
@media (prefers-reduced-motion:reduce){
  .vx-frame::after,.vx-frame::before,.vx-frame *{animation:none!important}
}