/* Общий компонент голо-карточки / медали (holo.js). Приёмы из образца AriannaKino (holo.css): радужный слой с маской по --gx, блёстки, полоса блика.
   Переменные: --rx --ry (наклон), --gx (положение блика 0..100), --ho (сила радуги по ступени), --hr (скругление). */
.holo { --rx: 0deg; --ry: 0deg; --gx: 35; --ho: .4; --hr: 50%; position: relative; display: inline-block; line-height: 0; flex: none;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }
.holo.hl-live { touch-action: manipulation; will-change: transform; }
.hl-clip { position: absolute; inset: 0; border-radius: var(--hr); overflow: hidden; pointer-events: none; }
.hl-holo { position: absolute; inset: 0; mix-blend-mode: hard-light; opacity: var(--ho);
  background: repeating-linear-gradient(115deg, #ff2a8a 0%, #ffcf3a 6%, #3affb0 12%, #2ab8ff 18%, #b44aff 24%, #ff2a8a 30%);
  background-size: 400% 400%; background-position: calc(var(--gx) * 1%) 50%;
  -webkit-mask-image: linear-gradient(115deg, transparent calc(var(--gx) * 1% - 60%), #000 calc(var(--gx) * 1% - 12%), #000 calc(var(--gx) * 1% + 12%), transparent calc(var(--gx) * 1% + 60%));
  mask-image: linear-gradient(115deg, transparent calc(var(--gx) * 1% - 60%), #000 calc(var(--gx) * 1% - 12%), #000 calc(var(--gx) * 1% + 12%), transparent calc(var(--gx) * 1% + 60%)); }
.hl-glit { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .26;
  background-image: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 45% 85%, #fff 0 1.2px, transparent 2px);
  background-size: 17px 19px, 23px 21px, 13px 15px; }
.hl-streak { position: absolute; inset: 0; mix-blend-mode: screen; overflow: hidden; }
.hl-streak::before { content: ""; position: absolute; top: -40%; bottom: -40%; width: 34%; left: -50%; transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15) 25%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .15) 75%, transparent); filter: blur(1.5px);
  animation: hlSweep 6s ease-in-out infinite; animation-delay: inherit; }
.holo.hl-live .hl-streak::before { animation: none; left: calc(var(--gx) * 1.1% - 30%); }   /* у живых блик ведёт --gx (касание или покачивание) */
.hl-t-bronze { --ho: .26; } .hl-t-silver { --ho: .34; } .hl-t-gold { --ho: .42; } .hl-t-titan { --ho: .52; } .hl-t-diamond { --ho: .62; } .hl-t-legend { --ho: .72; }
/* Блуждающий ритм: холодная палитра вместо радуги */
@keyframes hlSweep { 0%, 55% { transform: translateX(0) rotate(22deg); } 100% { transform: translateX(520%) rotate(22deg); } }
@media (prefers-reduced-motion: reduce) { .hl-streak::before { animation: none; left: 30%; } .holo { transform: none; } }