/* Эффекты P2P Plus на аватаре (Д92). Подключается сразу после kit.css (кабинет, окна, витрина). */
/* Кольцо аватара — скруглённый квадрат: крутится не рамка (иначе повернулся бы квадрат), а цвет по ней. */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fx-turn{to{--fx-a:360deg}}
@keyframes fx-glint{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}80%{opacity:1;transform:scale(1) rotate(45deg)}90%{opacity:0;transform:scale(.3) rotate(90deg)}}
/* Оформление P2P Plus: цвет (c-*) и эффект (fx-*) выбирает подписчик на /app/plus (PlusStyle.Effects). Аватар оборачивается в
   .fxw — эффекты рисуют его псевдоэлементы и тень самой картинки. Частицы (огонь, сакура, светлячки, цифровой дождь) и кадры
   (молния, глитч, вспышки звёзд) — слои маски, их двигает mask-position: каждая частица — свой слой со своей плиткой, поэтому идут
   вразнобой, без JS и лишних элементов. Слои масок — kit/fx.g.css (генерирует tools/plus-effects/gen.py, руками не править).
   Без .is-live кадр статичен; у тех, кто отключил анимации в системе, всё замирает. Те же эффекты на карточке ленты (.lst) —
   css/pages/layout.css. */
.fxw{--fx:#f5b83d}
.c-gold{--fx:#f5b83d}
.c-red{--fx:#ef4444}
.c-orange{--fx:#f97316}
.c-green{--fx:#3fb950}
.c-cyan{--fx:#22d3ee}
.c-blue{--fx:#3b82f6}
.c-violet{--fx:#a855f7}
.c-pink{--fx:#ec4899}
.c-sakura{--fx:#ffb7c5}
.c-white{--fx:#f1f5f9}
/* P2P ServerBoost — одно оформление на всех, цвет Nitro (PlusStyle.BoostColor), эффект «Вспышки» (fx-nitro): бегущий свет
   розовый-фиолетовый по кольцу и четырёхлучевой блик, вспыхивающий в углу */
.c-nitro{--fx:#ff73fa}
.fxw.fx-nitro>img{box-shadow:0 0 0 2px rgba(255,115,250,.55),0 0 12px 1px rgba(255,115,250,.35)}
.fxw.fx-nitro::before{inset:-5px;border-radius:calc(var(--av-r) + 2%);padding:3px;background:conic-gradient(from var(--fx-a),rgba(179,107,255,.35) 0 45%,#ff73fa 75%,#fff 88%,rgba(179,107,255,.35) 100%);
  -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)}
.fxw.fx-nitro::after{width:45%;height:45%;max-width:20px;max-height:20px;right:-10%;top:-10%;z-index:2;background:conic-gradient(from 45deg,transparent 0 20%,#fff 25%,transparent 30% 45%,#fff 50%,transparent 55% 70%,#fff 75%,transparent 80% 95%,#fff 100%);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);filter:drop-shadow(0 0 4px #ff73fa)}
.fxw.fx-nitro.is-live::before{animation:fx-turn 1.8s linear infinite}
.fxw.fx-nitro.is-live::after{animation:fx-glint 2.4s ease-in-out infinite}
.fxw{--fx-light:color-mix(in srgb,var(--fx) 45%,#fff);position:relative;display:inline-flex;flex:0 0 auto;border-radius:var(--av-r);isolation:isolate}
.fxw>img{position:relative;z-index:1;display:block;border-radius:var(--av-r);box-shadow:0 0 0 2px var(--fx),0 0 12px 2px color-mix(in srgb,var(--fx) 50%,transparent)}
.fxw::before,.fxw::after{content:"";position:absolute;z-index:0;pointer-events:none}
.nav__account-pic .fxw{width:100%;height:100%}
/* Рамка: спокойная, но не плоская — градиентная кромка с бликом сверху слева и мягкий ореол */
.fxw.fx-ring>img{box-shadow:0 0 14px 2px color-mix(in srgb,var(--fx) 45%,transparent)}
.fxw.fx-ring::before{inset:-3px;z-index:2;border-radius:calc(var(--av-r) + 2%);padding:2px;
  background:linear-gradient(135deg,#fff 0%,var(--fx-light) 18%,var(--fx) 45%,color-mix(in srgb,var(--fx) 70%,#000) 100%);
  -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)}
/* Пульс: аватар «дышит» светом, от него расходятся мягкие светящиеся круги */
.fxw.fx-pulse::before,.fxw.fx-pulse::after{inset:0;border-radius:var(--av-r);border:2px solid var(--fx);box-shadow:0 0 10px var(--fx),inset 0 0 6px color-mix(in srgb,var(--fx) 60%,transparent);opacity:0}
.fxw.fx-pulse:not(.is-live)::before{opacity:.5;transform:scale(1.3)}
.fxw.fx-pulse.is-live::before{animation:fx-ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.fxw.fx-pulse.is-live::after{animation:fx-ripple 2.4s cubic-bezier(.2,.6,.3,1) 1.2s infinite}
.fxw.fx-pulse.is-live>img{animation:fx-breathe 2.4s ease-in-out infinite}
@keyframes fx-ripple{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.8);opacity:0}}
@keyframes fx-breathe{50%{box-shadow:0 0 0 2px var(--fx),0 0 22px 6px color-mix(in srgb,var(--fx) 65%,transparent)}}
/* Огонь: угольки вылетают из-за аватара, каждый своей дорогой и скоростью, и остывают на подъёме (снизу почти белые, выше —
   цвет эффекта, потом гаснут); рамка тихо тлеет */
.fxw.fx-fire>img{box-shadow:0 0 0 2px var(--fx),0 0 10px 2px color-mix(in srgb,var(--fx) 60%,transparent)}
.fxw.fx-fire.is-live>img{animation:fx-smolder 1.7s ease-in-out infinite alternate}
.fxw.fx-fire::before,.fxw.fx-fire::after{inset:-80% -32% -4%;background:linear-gradient(to top,#fff 0%,var(--fx-light) 22%,var(--fx) 50%,color-mix(in srgb,var(--fx) 55%,#000) 100%)}
.fxw.fx-fire.is-live::before{animation:fx-embers-a 3.1s linear infinite,fx-sway 1.3s ease-in-out infinite alternate}
.fxw.fx-fire.is-live::after{animation:fx-embers-b 4.7s linear infinite,fx-sway 1.9s ease-in-out -.7s infinite alternate}
@keyframes fx-smolder{to{box-shadow:0 0 0 2px var(--fx-light),0 0 16px 4px color-mix(in srgb,var(--fx) 70%,transparent)}}
@keyframes fx-sway{from{translate:-4% 0}to{translate:4% 0}}
/* Перелив: две «кометы» навстречу друг другу по кромке, за ними тянется светящийся шлейф */
.fxw.fx-shimmer>img{box-shadow:0 0 0 2px color-mix(in srgb,var(--fx) 55%,transparent)}
.fxw.fx-shimmer::before,.fxw.fx-shimmer::after{inset:-5px;border-radius:calc(var(--av-r) + 2%);padding:3px;
  background:conic-gradient(from var(--fx-a),transparent 0 18%,color-mix(in srgb,var(--fx) 60%,transparent) 32%,#fff 40%,transparent 42% 68%,color-mix(in srgb,var(--fx) 60%,transparent) 82%,#fff 90%,transparent 92%);
  -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)}
.fxw.fx-shimmer::before{z-index:2}
.fxw.fx-shimmer::after{padding:0;-webkit-mask:none;mask:none;filter:blur(7px);opacity:.9}
.fxw.fx-shimmer.is-live::before,.fxw.fx-shimmer.is-live::after{animation:fx-turn 2.2s linear infinite}
/* Неон: трубка — белая сердцевина, цветное стекло и блик; ровный гул света и редкие «сбои» вывески */
.fxw.fx-neon>img{box-shadow:0 0 0 1.5px #fff,0 0 0 3.5px var(--fx),0 0 0 4.5px color-mix(in srgb,var(--fx) 40%,transparent)}
.fxw.fx-neon::before{inset:-5px;border-radius:calc(var(--av-r) + 2%);box-shadow:0 0 10px 3px var(--fx),0 0 26px 6px color-mix(in srgb,var(--fx) 55%,transparent),inset 0 0 10px 2px var(--fx)}
.fxw.fx-neon::after{inset:-5px;z-index:2;border-radius:calc(var(--av-r) + 2%);padding:4px;opacity:.7;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);
  -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)}
.fxw.fx-neon.is-live::before{animation:fx-neon 4.2s linear infinite}
.fxw.fx-neon.is-live::after{animation:fx-hum 4.2s linear infinite}
@keyframes fx-neon{0%,8%,12%,58%,61%,63%,100%{opacity:1}9%,59%,62%{opacity:.15}10%{opacity:.7}30%{opacity:.88}}
@keyframes fx-hum{0%,8%,12%,58%,63%,100%{opacity:.7}9%,59%,62%{opacity:0}}
/* Сакура: лепестки падают по бокам рамки (не по лицу), каждый своей скоростью, сносом и наклоном, в два слоя с покачиванием;
   розовый ореол заметен и без анимации. Ветка с цветами (--sk-branch) — для карточки ленты */
:root{--sk-branch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M120 4C96 8 80 14 62 26M92 10c-4 8-6 14-6 22M70 22c2-6 0-12-4-16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg id='f'%3E%3Cpath d='M0-9C3-9 4-5 2-2 5-4 9-3 9 0 9 3 5 4 2 2 4 5 3 9 0 9-3 9-4 5-2 2-5 4-9 3-9 0-9-3-5-4-2-2-4-5-3-9 0-9Z'/%3E%3C/g%3E%3Cuse href='%23f' transform='translate(60 28) scale(1.05)'/%3E%3Cuse href='%23f' transform='translate(86 34) scale(.85)'/%3E%3Cuse href='%23f' transform='translate(104 12) scale(.7)'/%3E%3Cuse href='%23f' transform='translate(70 6) scale(.55)'/%3E%3C/svg%3E")}
.fxw.fx-sakura>img{box-shadow:0 0 0 2px var(--fx),0 0 14px 3px color-mix(in srgb,var(--fx) 60%,transparent)}
.fxw.fx-sakura::before,.fxw.fx-sakura::after{inset:-38% -34%;z-index:2;background:linear-gradient(160deg,#fff,var(--fx) 60%);}
.fxw.fx-sakura::after{opacity:.75}
.fxw.fx-sakura.is-live::before{animation:fx-petals-a 7.3s linear infinite,fx-drift 2.9s ease-in-out infinite alternate}
.fxw.fx-sakura.is-live::after{animation:fx-petals-b 11.3s linear infinite,fx-drift 3.7s ease-in-out -1.3s infinite alternate}
@keyframes fx-drift{from{translate:-5% 0;rotate:-3deg}to{translate:5% 0;rotate:3deg}}
/* Молния: короткие разряды бьют от рамки в разных местах (кадры по 4, вспышка с двойным мерцанием), рамка вспыхивает в такт */
.fxw.fx-storm>img{box-shadow:0 0 0 2px var(--fx),0 0 10px 2px color-mix(in srgb,var(--fx) 50%,transparent)}
.fxw.fx-storm::before,.fxw.fx-storm::after{inset:-28%;z-index:2;background:linear-gradient(#fff,var(--fx-light));opacity:0;}
.fxw.fx-storm:not(.is-live)::before{opacity:.8}
.fxw.fx-storm.is-live::before{animation:fx-frames 4.4s steps(4) infinite,fx-flash 1.1s linear infinite}
.fxw.fx-storm.is-live::after{animation:fx-frames 6.8s steps(4) -1s infinite,fx-flash 1.7s linear -.6s infinite}
.fxw.fx-storm.is-live>img{animation:fx-zap 1.1s linear infinite}
@keyframes fx-frames{to{-webkit-mask-position:0 133.34%;mask-position:0 133.34%}}
@keyframes fx-flash{0%,58%{opacity:0}60%{opacity:1}64%{opacity:.25}68%{opacity:1}76%,100%{opacity:0}}
@keyframes fx-zap{0%,58%,76%,100%{box-shadow:0 0 0 2px var(--fx),0 0 10px 2px color-mix(in srgb,var(--fx) 50%,transparent)}60%,68%{box-shadow:0 0 0 2px #fff,0 0 18px 6px var(--fx)}}
/* Светлячки: светящиеся точки медленно бродят вокруг (не по лицу) и мерцают, каждая своей дорогой */
.fxw.fx-firefly>img{box-shadow:0 0 0 2px var(--fx),0 0 12px 2px color-mix(in srgb,var(--fx) 40%,transparent)}
.fxw.fx-firefly::before,.fxw.fx-firefly::after{inset:-48%;z-index:2;background:var(--fx-light);}
.fxw.fx-firefly.is-live::before{animation:fx-ff-a 11s linear infinite,fx-twinkle 2.3s ease-in-out infinite alternate}
.fxw.fx-firefly.is-live::after{animation:fx-ff-b 15s linear infinite,fx-twinkle 3.1s ease-in-out -1s infinite alternate}
@keyframes fx-twinkle{from{opacity:.3}to{opacity:1}}
/* Глитч: «сбой сигнала» — аватар дёргается и двоится красным/бирюзовым, поверх строки развёртки и полосы помех */
.fxw.fx-glitch>img{box-shadow:0 0 0 2px var(--fx),0 0 10px 1px color-mix(in srgb,var(--fx) 45%,transparent)}
.fxw.fx-glitch.is-live>img{animation:fx-glitch 2.6s steps(1) infinite}
.fxw.fx-glitch::before{inset:0;z-index:2;border-radius:var(--av-r);background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.3) 2px 3px);opacity:.55}
.fxw.fx-glitch::after{inset:-6% -16%;z-index:2;background:linear-gradient(90deg,var(--fx),#fff 50%,#05d9e8);opacity:0;mix-blend-mode:screen}
.fxw.fx-glitch.is-live::after{animation:fx-frames 10.4s steps(4) infinite,fx-glitch-on 2.6s steps(1) infinite}
@keyframes fx-glitch{0%,78%,100%{translate:0 0;filter:none}80%{translate:-2px 0;filter:drop-shadow(2px 0 0 #ff2a6d) drop-shadow(-2px 0 0 #05d9e8)}83%{translate:2px -1px;filter:drop-shadow(-3px 0 0 #ff2a6d) drop-shadow(3px 0 0 #05d9e8)}86%{translate:-1px 1px;filter:drop-shadow(1px 0 0 #ff2a6d) drop-shadow(-1px 0 0 #05d9e8)}89%{translate:0 0;filter:none}}
@keyframes fx-glitch-on{0%,79%,90%,100%{opacity:0}80%,88%{opacity:.75}84%{opacity:.35}}
/* Цифровой дождь: столбики символов стекают по бокам аватара (голова яркая, хвост гаснет), каждый своей скоростью */
.fxw.fx-matrix>img{box-shadow:0 0 0 2px var(--fx),0 0 12px 2px color-mix(in srgb,var(--fx) 45%,transparent)}
.fxw.fx-matrix::before,.fxw.fx-matrix::after{inset:-30% -42%;background:var(--fx-light);}
.fxw.fx-matrix::after{opacity:.55}
.fxw.fx-matrix.is-live::before{animation:fx-rain-a 4.2s linear infinite}
.fxw.fx-matrix.is-live::after{animation:fx-rain-b 6.4s linear infinite}
/* Космос: вокруг медленно вращается кольцо звёзд, на нём по очереди вспыхивают яркие */
.fxw.fx-stars>img{box-shadow:0 0 0 2px var(--fx),0 0 16px 3px color-mix(in srgb,var(--fx) 50%,transparent)}
.fxw.fx-stars::before{inset:-24%;z-index:2;background:linear-gradient(135deg,#fff,var(--fx-light));}
.fxw.fx-stars::after{inset:-24%;z-index:2;background:#fff;opacity:0;}
.fxw.fx-stars:not(.is-live)::after{opacity:.8}
.fxw.fx-stars.is-live::before{animation:fx-orbit 24s linear infinite}
.fxw.fx-stars.is-live::after{animation:fx-frames 6s steps(4) infinite,fx-sparkle 1.5s ease-in-out infinite}
@keyframes fx-orbit{to{rotate:360deg}}
@keyframes fx-sparkle{0%,100%{opacity:0;scale:.92}50%{opacity:1;scale:1.04}}
/* Не видно — не рисуем: kit/motion.js ставит data-fx-off на эффект (аватар .fxw, карточку .lst), пока он за экраном, и анимация встаёт на паузу —
   кадры не перерисовываются, пока их никто не видит. */
[data-fx-off],[data-fx-off]::before,[data-fx-off]::after,[data-fx-off] *,[data-fx-off] *::before,[data-fx-off] *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
.fxw.is-live::before,.fxw.is-live::after,.fxw.is-live>img{animation:none!important}
}
/* Экономные эффекты (P2P.fx, p2p-fx в браузере): у других игроков — статичный кадр, анимации нет. Живыми остаются свои: предпросмотр на /app/plus
   (.fx-demo, .pv__ava) и аватар в шапке (.nav__account-pic). */
html[data-fx="eco"] .fxw.is-live:not(.fx-demo,.pv__ava,.nav__account-pic *)::before,html[data-fx="eco"] .fxw.is-live:not(.fx-demo,.pv__ava,.nav__account-pic *)::after,html[data-fx="eco"] .fxw.is-live:not(.fx-demo,.pv__ava,.nav__account-pic *)>img{animation:none!important}