/* ═══════════════════════════════════════════════════════════════════════
   ГОЛОГРАФИЧЕСКИЙ ОСМОТР КАРТЫ.

   Разметку и все числа приносит js/holo.js — здесь только рецепт: из
   чего складывается свет и как он смешивается с картой. Числа в этом
   файле специально не живут: их крутят ползунками на holo.html, и
   раздваивать их между двумя местами нельзя.

   Свои имена начинаются с hx. Всё остальное, что тут встречается
   (.stage, .holo, .gloss, .gold), принадлежит карточке: этот слой лезет
   к ней внутрь, в этом его работа.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── станок ──────────────────────────────────────────────────────────
   Перспектива нужна родителю карточки, а не ей самой: элемент не может
   смотреть на себя через собственную перспективу.

   Заодно снимаем фильтр, если он на родителе был. Во вскрытии на нём
   висит drop-shadow с размытием в 60 пикселей — свечение по цвету
   редкости. Фильтр заставляет браузер пересчитывать это размытие при
   каждой перерисовке внутри, а внутри у нас каждый кадр ездят слои.

   Само свечение никуда не девается, но переезжает ВНУТРЬ карточки, на
   .stage ниже. Оставить его здесь было нельзя: родитель не кренится, и
   при наклоне свет оставался стоять на месте — из-за карты выглядывала
   её собственная тень, как приклеенная к экрану.                     */
.hxstand{perspective:900px;filter:none!important}

/* ─── сама карта ─────────────────────────────────────────────────────── */
.hx{--hx-px:50%;--hx-py:50%;--hx-rx:0deg;--hx-ry:0deg;
    --hx-bx:50%;--hx-by:50%;--hx-on:0;--hx-lit:0;
  transform:rotateX(var(--hx-rx)) rotateY(var(--hx-ry));
  transition:transform var(--hx-back) cubic-bezier(.23,1,.32,1);
  touch-action:none}
/* пока палец на карте — слежение, а не плавный ход */
.hx.hxhold{transition:transform 90ms linear}

/* ─── ЦЕНА КАДРА ──────────────────────────────────────────────────────
   Тень карточки в card.css сделана через filter:drop-shadow. Фильтр
   заставляет браузер держать карту отдельной картинкой и пересчитывать
   по ней два размытия при любой перерисовке внутри — а внутри у нас
   каждый кадр ездят слои. Пока палец на экране, тень пересчитывалась бы
   шестьдесят раз в секунду.

   Отдаём ту же тень box-shadow: она рисуется один раз. isolation нужен
   взамен фильтра — раньше он запирал внутри карточки её собственные
   режимы наложения, теперь это делаем сами.

   Третьей строкой сюда же переезжает свечение по цвету редкости из
   вскрытия: --face-glow объявлен на лице карты и наследуется вниз. Тени
   обязаны висеть на том же элементе, что и наклон, иначе они остаются
   стоять, пока карта кренится. В коллекции этой переменной нет, и
   третья тень просто прозрачная.

   Золоту дуотон снять нельзя, это и есть золото; убираем из его фильтра
   только тени.                                                        */
.hx .stage{filter:none;isolation:isolate;
  box-shadow:0 14px 26px rgba(0,0,0,.75),
             0 0 14px var(--glow,transparent),
             0 26px 60px var(--face-glow,transparent)}
.hx.gold .stage{filter:url(#duotone-gold) saturate(1.05)}

/* Собственный бегущий фоил карты замирает, пока её осматривают: он
   крутится вечно и перерисовывает то же место, что и наши слои.
   Именно paused, а не none — слой застывает там, где был, и не прыгает. */
.hx.hxhold .holo,.hx.hxhold .gloss{animation-play-state:paused}

/* ─── где лежат оба слоя ──────────────────────────────────────────────
   Ровно в окне арта: те же --art-inset и --art-radius, что у самого
   арта, у каждого персонажа они свои. Дальше в разметке идёт рамка и
   накрывает всё, что вылезло бы за окно, — маска не нужна.          */
.hxshine,.hxglare{position:absolute;pointer-events:none;
  top:calc(var(--art-inset)*1%);left:calc(var(--art-inset)*1%);
  width:calc(100% - var(--art-inset)*2%);
  height:calc(100% - var(--art-inset)*2%);
  border-radius:calc(var(--w)*var(--art-radius));
  transition:opacity .35s ease}

/* ─── радуга: Legendary, Mythic, золото ───────────────────────────────
   Три фона друг на друге — косая заливка, блёстки, радужная лента, — они
   смешиваются между собой через background-blend-mode, а с картой через
   color-dodge. Контраст и яркость поверх делают из мутного пятна
   настоящий отблеск.                                                 */
.hxraduga .hxshine{
  background-image:
    linear-gradient(-42deg, #944 12%, #486 34%, #248f8f 52%, #63a 72%, #944 88%),
    var(--hx-iskry),
    repeating-linear-gradient(-28deg,
      #944 0%, #98752f 6%, #598f24 12%, #248f8f 18%,
      #2b639c 24%, #5e247b 30%, #944 36%);
  background-size:220% 220%, var(--hx-sparkle) var(--hx-sparkle), 340% 340%;
  background-position:
    var(--hx-bx) var(--hx-by),
    var(--hx-bx) var(--hx-by),
    var(--hx-bx) var(--hx-by);
  background-blend-mode:luminosity, soft-light, luminosity;
  mix-blend-mode:color-dodge;
  filter:brightness(var(--hx-bright)) contrast(var(--hx-boost)) saturate(1.1);
  opacity:calc(var(--hx-lit) * var(--hx-shine))}

/* ─── узор: всё, что ниже Legendary ───────────────────────────────────
   Тот же приём, но принципиально другой на вид:

     • цвета нет вообще — обе подложки чёрно-белые, блестит чистый свет;
     • узор работает дважды, слоем и маской: свет пробивается только там,
       где на рисунке белое, как у напечатанной фольги;
     • узор не ездит. Он напечатан на карте и стоит на месте, двигаются
       только световые подложки. Отсюда ощущение, что свет скользит по
       неподвижной фольге, а не что по карте таскают картинку.        */
.hxuzor .hxshine{
  background-image:
    radial-gradient(circle, #fff 5%, #000 50%, #fff 80%),
    linear-gradient(-45deg, #000 15%, #fff 50%, #000 85%),
    var(--hx-uzor);
  background-size:120% 120%, 200% 200%, var(--hx-cell) var(--hx-cell);
  background-position:
    var(--hx-bx) var(--hx-by),
    var(--hx-bx) var(--hx-by),
    50% 50%;
  background-blend-mode:soft-light, difference, soft-light;
  mix-blend-mode:color-dodge;
  filter:brightness(.6) contrast(1.5) saturate(1);
  -webkit-mask-image:var(--hx-uzor);
          mask-image:var(--hx-uzor);
  -webkit-mask-size:var(--hx-cell) var(--hx-cell);
          mask-size:var(--hx-cell) var(--hx-cell);
  opacity:calc(var(--hx-lit) * var(--hx-uzs))}

/* ─── блик — одинаковый у всех ────────────────────────────────────────
   Круглое световое пятно ровно под пальцем. Оно и создаёт ощущение
   стекла; под узором мягче, иначе спорит с рисунком.                */
.hxglare{
  background-image:radial-gradient(farthest-corner circle at var(--hx-px) var(--hx-py),
    rgba(255,255,255,.86) 6%, rgba(255,255,255,.22) 28%, rgba(20,20,26,.85) 120%);
  mix-blend-mode:hard-light;
  filter:brightness(.92) contrast(1.9);
  opacity:calc(var(--hx-on) * var(--hx-glare))}
.hxuzor .hxglare{mix-blend-mode:overlay;filter:brightness(.7) contrast(1.5)}

/* ═══ ПОКОЙ ════════════════════════════════════════════════════════════
   Карту никто не трогает, а она всё равно живая: приглушённо светится,
   водит плечами, и свет по ней ползёт. Без этого фоил ничем не отличался
   от обычной печати, пока в него не ткнёшь пальцем.

   Кадры начинаются и кончаются РОВНЫМ положением. Это не для красоты:
   класс возвращается после того, как карта доехала домой с последнего
   касания, и если бы первый кадр был наклонным, карта в этот момент
   дёргалась бы.

   Свет ползёт background-position — то есть слой перерисовывается
   каждый кадр. Это единственная часть эффекта, которая стоит кадров
   постоянно, а не только под пальцем. Выключается покой: 0 в holo.js. */
@keyframes hxSway{
  0%,100%{transform:none}
  25%{transform:rotateY(var(--hx-tilt)) rotateX(calc(var(--hx-tilt) * -.6))}
  75%{transform:rotateY(calc(var(--hx-tilt) * -1)) rotateX(calc(var(--hx-tilt) * .6))}}
.hx.hxidle{animation:hxSway var(--hx-swing) ease-in-out infinite}

@keyframes hxDrift{
  0%,100%{background-position:33% 38%,33% 38%,33% 38%}
  50%    {background-position:67% 62%,67% 62%,67% 62%}}
/* у узора третий слой — сам рисунок, он напечатан и стоит на месте */
@keyframes hxDriftUzor{
  0%,100%{background-position:33% 38%,33% 38%,50% 50%}
  50%    {background-position:67% 62%,67% 62%,50% 50%}}
.hxidle.hxraduga .hxshine{animation:hxDrift var(--hx-swing) ease-in-out infinite}
.hxidle.hxuzor   .hxshine{animation:hxDriftUzor var(--hx-swing) ease-in-out infinite}
/* Стык обратно к пальцу: анимацию снимают на нажатии, и без перехода
   фон прыгнул бы с середины хода в точку под пальцем. */
.hxshine{transition:opacity .35s ease,background-position .25s ease}

@media (prefers-reduced-motion:reduce){
  .hx.hxidle,.hxidle .hxshine{animation:none}
}