/* Оживление карточек лидеров фракций (подключается только на главной).
   Всё движение — украшение: без JS, при prefers-reduced-motion или при
   отключённых анимациях блок выглядит как раньше и читается полностью. */

/* 1. Аура фракции позади персонажа */
.leader-aura{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s ease}
.leader-card.good .leader-aura{background:radial-gradient(56% 44% at 50% 63%,rgba(255,214,95,.32),rgba(255,214,95,.07) 56%,transparent 76%)}
.leader-card.evil .leader-aura{background:radial-gradient(56% 44% at 50% 63%,rgba(90,162,255,.32),rgba(90,162,255,.07) 56%,transparent 76%)}
.leaders.is-live .leader-aura{opacity:1;animation:leader-aura 4.8s ease-in-out infinite}
.leaders.is-live .leader-card.evil .leader-aura{animation-duration:5.8s;animation-delay:-1.4s}
@keyframes leader-aura{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.95}}

/* 2. Персонаж «дышит» */
.leader-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.leaders.is-live .leader-card.good .leader-art{animation:leader-bob 5.6s ease-in-out infinite}
.leaders.is-live .leader-card.evil .leader-art{animation:leader-bob 6.4s ease-in-out infinite;animation-delay:-1.8s}
@keyframes leader-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 3. Появление карточек: Good слева, Evil справа + постоянное лёгкое покачивание */
.leaders.is-live .leader-card.good{animation:leader-in-left .85s cubic-bezier(.22,.8,.3,1) both,leader-sway 11s ease-in-out 1.1s infinite}
.leaders.is-live .leader-card.evil{animation:leader-in-right .85s cubic-bezier(.22,.8,.3,1) .12s both,leader-sway 12.5s ease-in-out 1.5s infinite}
@keyframes leader-in-left{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes leader-in-right{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes leader-in-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes leader-sway{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(1px,-3px,0) rotate(.4deg)}50%{transform:translate3d(0,1px,0) rotate(0deg)}75%{transform:translate3d(-1px,-2px,0) rotate(-.4deg)}}

/* 4. Блик, проходящий по карточке */
.leader-card::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-55%;width:42%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,246,214,.16),transparent);transform:translateX(-160%) skewX(-14deg)}
.leaders.is-live .leader-card::after{opacity:1;animation:leader-sweep 8s ease-in-out infinite}
.leaders.is-live .leader-card.evil::after{animation-delay:2.6s}
@keyframes leader-sweep{0%{transform:translateX(-160%) skewX(-14deg)}58%{transform:translateX(430%) skewX(-14deg)}100%{transform:translateX(430%) skewX(-14deg)}}

/* 5. Знак VS: вращающееся кольцо и пульс */
.leader-vs{position:relative}
.leader-vs .vs-ring{position:absolute;inset:-5px;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(from 0deg,rgba(212,175,55,0) 0deg,rgba(240,210,122,.9) 70deg,rgba(212,175,55,0) 150deg,rgba(212,175,55,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
.leaders.is-live .leader-vs .vs-ring{opacity:1;animation:leader-ring 7s linear infinite}
.leaders.is-live .leader-vs{animation:leader-vs 3.6s ease-in-out infinite}
@keyframes leader-ring{to{transform:rotate(360deg)}}
@keyframes leader-vs{0%,100%{box-shadow:0 0 16px rgba(212,175,55,.22);transform:scale(1)}50%{box-shadow:0 0 28px rgba(212,175,55,.5);transform:scale(1.05)}}

/* 6. Точка присутствия: живая, когда лидер в игре */
.leader-status.on .dot{animation:leader-dot-on 1.9s ease-out infinite}
@keyframes leader-dot-on{0%{box-shadow:0 0 0 0 rgba(91,212,122,.55),0 0 10px rgba(91,212,122,.7)}70%{box-shadow:0 0 0 8px rgba(91,212,122,0),0 0 10px rgba(91,212,122,.7)}100%{box-shadow:0 0 0 0 rgba(91,212,122,0),0 0 10px rgba(91,212,122,.7)}}
.leader-status.off .dot{animation:leader-dot-off 3.8s ease-in-out infinite}
@keyframes leader-dot-off{0%,100%{opacity:.5}50%{opacity:1}}

/* 7. Цифры подсвечиваются, когда досчитываются */
.ls-n{transition:color .25s}
.ls-n.bump,.leader-share-num.bump{animation:leader-bump .75s ease-out}
@keyframes leader-bump{0%{transform:scale(1)}28%{transform:scale(1.18);color:#fff}100%{transform:scale(1)}}

/* 8. Полоса баланса фракций: собирается от центра */
.leader-balance{position:relative;display:flex;justify-content:center;height:8px;margin:16px 0 2px;border:1px solid rgba(212,175,55,.28);border-radius:4px;background:rgba(8,9,14,.62);overflow:hidden;opacity:0;transition:opacity .6s ease .25s}
.leaders.is-live .leader-balance{opacity:1}
.leader-balance .lb-good,.leader-balance .lb-evil{height:100%;width:0;transition:width 1.15s cubic-bezier(.22,.8,.3,1)}
.leader-balance .lb-good{background:linear-gradient(90deg,rgba(255,215,94,.18),#ffd75e)}
.leader-balance .lb-evil{background:linear-gradient(90deg,rgba(90,162,255,.18),#5aa2ff)}
.leader-balance .lb-mark{position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:rgba(255,246,214,.5);box-shadow:0 0 10px rgba(212,175,55,.65);pointer-events:none}

/* 9. Наведение: карточка оживает под курсором */
.leader-card{transition:border-color .25s ease,box-shadow .3s ease}
.leader-card.good:hover{border-color:rgba(212,175,55,.6);box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 24px rgba(212,175,55,.2)}
.leader-card.evil:hover{border-color:rgba(90,162,255,.55);box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 24px rgba(90,162,255,.2)}
.leader-card:hover .leader-portrait{filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) brightness(1.08)}

/* 10. Телефон: появляются снизу — так не бывает горизонтальной прокрутки */
@media (max-width:640px){
  .leaders.is-live .leader-card.good{animation:leader-in-up .8s cubic-bezier(.22,.8,.3,1) both,leader-sway 13s ease-in-out 1.1s infinite}
  .leaders.is-live .leader-card.evil{animation:leader-in-up .8s cubic-bezier(.22,.8,.3,1) .12s both,leader-sway 14.5s ease-in-out 1.5s infinite}
  .leader-balance{height:7px}
}

/* 11. «Меньше движения» — выключаем всё, оставляя обычный вид */
@media (prefers-reduced-motion: reduce){
  .leaders.is-live .leader-card,
  .leaders.is-live .leader-card .leader-art,
  .leaders.is-live .leader-card .leader-aura,
  .leaders.is-live .leader-vs,
  .leaders.is-live .leader-vs .vs-ring,
  .leaders.is-live .leader-card::after,
  .leader-status .dot,
  .ls-n.bump,
  .leader-share-num.bump{animation:none !important}
  .leaders.is-live .leader-aura{opacity:.7}
  .leader-card::after{opacity:0 !important}
  .leader-balance .lb-good,.leader-balance .lb-evil{transition:none}
}