/* Страница новости: фото и галереи, просмотр фото, видеоплеер, реакции читателей.
   Подключается только на странице новости (views/pages.js). Токены цветов — в styles.css.
   Анимации — только transform/opacity и только при prefers-reduced-motion: no-preference. */

.pv-bar{margin:0;padding:12px clamp(20px,5vw,64px);background:#1C2352;color:#E9E8E4;font-size:14.5px;line-height:1.45;text-align:center}
.pv-bar b{color:#F08A78}

/* ---------- Фото в тексте ---------- */
.prose > figure{margin:1.7em 0}
.nm,.nv{display:flex;flex-direction:column;align-items:center;gap:12px}
.nm-a{position:relative;display:block;max-width:100%;overflow:hidden;border-radius:20px;background:#E9ECF7;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.nm .nm-a{width:fit-content}
.prose .nm-a img{display:block;max-width:100%;height:auto;border-radius:0;transition:scale .8s var(--ease)}
.prose .nm .nm-a img{width:auto;max-height:min(78vh,760px)}
.nm-a:hover img{scale:1.025}
/* Значок «развернуть» — подсказка, что фото открывается крупно. */
.nm-a::after{content:"";position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(28,35,82,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 18px no-repeat;opacity:0;scale:.8;transition:opacity .3s var(--ease),scale .3s var(--ease);pointer-events:none}
.nm-a:hover::after,.nm-a:focus-visible::after{opacity:1;scale:1}
.nm-a:focus-visible{outline:3px solid #4253A6;outline-offset:3px}
.nm figcaption,.nv figcaption{display:flex;align-items:baseline;justify-content:center;gap:10px;max-width:680px;font-size:15px;line-height:1.5;color:#565C67;text-align:center}
.nm figcaption::before,.nv figcaption::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#E25C47;translate:0 -2px}

/* Галерея: строки по 2–3 фото, на телефоне — по 2 (при нечётном числе первое — во всю ширину). */
.ng{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ng .nm-a{border-radius:14px}
.ng .g2{grid-column:span 3;aspect-ratio:4 / 3}
.ng .g3{grid-column:span 2;aspect-ratio:1}
.prose .ng .nm-a img{width:100%;height:100%;object-fit:cover}
.ng .nm-a::after{right:8px;bottom:8px;width:34px;height:34px;background-size:16px}

@media (max-width:560px){
.prose > figure{margin:1.4em 0}
.nm-a{border-radius:16px}
.ng{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ng .g2,.ng .g3{grid-column:span 1;aspect-ratio:1}
.ng.odd .nm-a:first-child{grid-column:span 2;aspect-ratio:16 / 10}
.ng .nm-a{border-radius:12px}
}
@media (hover:none){.nm-a::after{opacity:1;scale:1;width:32px;height:32px;background-size:15px}}

/* ---------- Просмотр фото (news.js создаёт <dialog class="lb">) ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#FFFFFF;overflow:hidden;font-family:'Onest','Segoe UI',system-ui,sans-serif}
.lb::backdrop{background:transparent}
.lb-bg{position:absolute;inset:0;background:#0C0F26}
.lb-stage{position:absolute;inset:68px 88px 84px;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
.lb-img{display:block;flex:0 0 auto;max-width:none;border-radius:14px;background:#1C2352;box-shadow:0 30px 80px -30px rgba(0,0,0,.85);cursor:zoom-in;-webkit-user-drag:none;transform-origin:50% 50%}
.lb.zoomed .lb-img{cursor:grab;border-radius:0}
.lb.dragging .lb-img{cursor:grabbing}
.lb-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 0 24px}
.lb-count{display:inline-flex;align-items:center;gap:24px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.06em;color:#A9ADB5}
.lb-count i{position:relative;width:26px;height:6px;border-radius:3px;background:#FFFFFF}
.lb-count i::after{content:"";position:absolute;right:-12px;top:0;width:6px;height:6px;border-radius:50%;background:#E25C47}
.lb-count b{font-weight:600;color:#FFFFFF}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#FFFFFF;cursor:pointer;transition:background-color .2s ease,rotate .4s var(--ease),scale .2s ease}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-btn:active{scale:.94}
.lb-btn:focus-visible{outline:2px solid #F08A78;outline-offset:2px}
.lb-btn svg{width:22px;height:22px}
.lb-x:hover{rotate:90deg}
.lb-nav{position:absolute;top:50%;margin-top:-24px}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-cap{position:absolute;left:50%;bottom:22px;width:min(720px,calc(100% - 180px));margin:0;translate:-50% 0;font-size:15px;line-height:1.5;color:#E9E8E4;text-align:center}
.lb-load{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:72px;height:44px;margin:-22px 0 0 -36px;border-radius:999px;background:rgba(28,35,82,.9);pointer-events:none}
.lb.single .lb-nav,.lb.single .lb-count{display:none}
.lb .lb-top,.lb .lb-nav,.lb .lb-cap{transition:opacity .3s var(--ease)}
.lb:not(.on) .lb-top,.lb:not(.on) .lb-nav,.lb:not(.on) .lb-cap,.lb.zoomed .lb-nav,.lb.zoomed .lb-cap{opacity:0;pointer-events:none}
@media (max-width:760px){
.lb-stage{inset:60px 0 88px}
.lb-img{border-radius:10px}
.lb-top{padding:8px 8px 0 18px}
.lb-nav{top:auto;bottom:16px;margin:0;width:44px;height:44px}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-cap{bottom:24px;width:calc(100% - 136px);font-size:14px}
}

/* Полоски «напарник думает» — пока грузится фото или видео. */
.vw{display:flex;align-items:center;gap:3px;height:18px}
.vw i{display:block;width:3px;height:16px;border-radius:2px;background:#FFFFFF;scale:1 .5}

/* ---------- Видеоплеер ---------- */
.vp{position:relative;width:min(100%,calc(min(78vh,760px) * var(--ar,1.7778)));max-width:100%;overflow:hidden;border-radius:20px;background:#0E1128;isolation:isolate}
.vp video{display:block;width:100%;height:100%;object-fit:contain;background:#0E1128}
.vp-on video{cursor:pointer}
.vp::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,17,40,0) 35%,rgba(14,17,40,.5));opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.vp-on.is-paused::before{opacity:1}
.vp-big{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;padding:0 0 0 34px;border:0;background:none;color:#1C2352;font:inherit;cursor:pointer;translate:-50% -50%;-webkit-tap-highlight-color:transparent;transition:opacity .3s var(--ease),scale .3s var(--ease)}
.vp-big:focus-visible{outline:none}
.vp-big:focus-visible .vp-pill{outline:3px solid #F08A78;outline-offset:3px}
.vp-bot{position:absolute;left:0;top:50%;z-index:1;width:64px;translate:-10px -62%;pointer-events:none}
.vp-pill{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 22px 10px 46px;border-radius:999px;background:#FFFFFF;box-shadow:0 22px 44px -18px rgba(0,0,0,.7);font-size:17px;font-weight:650;line-height:1;white-space:nowrap;transition:translate .3s var(--ease),box-shadow .3s var(--ease)}
.vp-big:hover .vp-pill{translate:0 -2px;box-shadow:0 26px 48px -18px rgba(0,0,0,.75)}
.vp-pi{flex:0 0 auto;width:18px;height:18px;fill:#2B3670}
.vp-pd{padding-left:10px;border-left:1px solid #E1E4EC;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;font-weight:500;color:#565C67}
.vp-on.is-playing .vp-big,.vp-on.is-waiting .vp-big{opacity:0;scale:.92;pointer-events:none}
.vp-wait{position:absolute;left:50%;top:50%;z-index:2;display:none;place-items:center;width:72px;height:44px;margin:-22px 0 0 -36px;border-radius:999px;background:rgba(28,35,82,.88);pointer-events:none}
.vp-on.is-waiting .vp-wait{display:grid}
.vp-err{position:absolute;inset:auto 16px 16px;z-index:5;margin:0;padding:10px 14px;border-radius:12px;background:rgba(28,35,82,.92);color:#FFFFFF;font-size:14px;text-align:center}
/* Персонаж на кнопке: моргает; при наведении и в конце ролика — улыбается. */
.vp .bot{width:100%;margin:0}
.vp .bot,.vp .nb-stage,.vp .nb-sway,.vp .nb-bob,.vp .nb-eye,.vp .nb-mouth{display:block}
.vp .nb-stage{padding-bottom:0}
.vp .nb-head{box-shadow:0 14px 22px -12px rgba(0,0,0,.6),inset 0 -3cqw 6cqw rgba(10,12,30,.35),inset 0 2cqw 4cqw rgba(255,255,255,.08)}
.vp .nb-sway,.vp .nb-bob,.vp .nb-head,.vp .nb-face,.vp .nb-pill,.vp .nb-arc,.vp .nb-mouth,.vp .nb-cheek,.vp .nb-cap,.vp .nb-tassel{animation:none}
.vp .nb-pill,.vp .nb-arc,.vp .nb-mouth,.vp .nb-cheek{transition:opacity .25s var(--ease),scale .35s var(--ease)}
.vp-big:hover .nb-pill,.vp.is-ended .nb-pill{opacity:0}
.vp-big:hover .nb-arc,.vp.is-ended .nb-arc{opacity:1}
.vp-big:hover .nb-mouth,.vp.is-ended .nb-mouth{scale:1.25 1.15}
.vp-big:hover .nb-cheek,.vp.is-ended .nb-cheek{opacity:.9}
/* Панель управления: появляется при движении мыши, касании и на паузе. */
.vp-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:2px;padding:36px 10px 8px;background:linear-gradient(180deg,rgba(10,13,34,0),rgba(10,13,34,.85));color:#FFFFFF;opacity:0;translate:0 10px;pointer-events:none;transition:opacity .25s var(--ease),translate .3s var(--ease)}
.vp-on.show .vp-bar,.vp-on.is-paused:not(.is-fresh) .vp-bar,.vp-on:not(.is-fresh):focus-within .vp-bar{opacity:1;translate:0 0;pointer-events:auto}
.vp-on.is-playing:not(.show){cursor:none}
.vp-btn{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background-color .2s ease}
.vp-btn:hover{background:rgba(255,255,255,.16)}
.vp-btn:focus-visible{outline:2px solid #F08A78;outline-offset:-2px}
.vp-btn svg{width:22px;height:22px;fill:currentColor}
.vp-btn .alt,.vp-btn.on .main{display:none}
.vp-btn.on .alt{display:block}
.vp-time{flex:0 0 auto;padding:0 6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.95}
.vp-track{position:relative;flex:1 1 auto;min-width:56px;height:32px;margin:0 8px}
.vp-rail,.vp-buf,.vp-fill{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;pointer-events:none}
.vp-rail{background:rgba(255,255,255,.25)}
.vp-buf{background:rgba(255,255,255,.4);transform-origin:left center;scale:0 1}
.vp-fill{background:#FFFFFF;transform-origin:left center;scale:0 1}
.vp-kw{position:absolute;inset:0;pointer-events:none}
.vp-knob{position:absolute;left:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#E25C47;box-shadow:0 0 0 3px #FFFFFF;scale:.85;transition:scale .2s ease}
.vp-track:hover .vp-knob{scale:1.1}
.vp-track:has(.vp-seek:focus-visible) .vp-knob{scale:1.1;box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px #F08A78}
.vp-seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vp-vol{flex:0 0 auto;width:70px;margin:0 6px 0 0;accent-color:#E25C47;cursor:pointer}
.vp-rate{width:auto;min-width:44px;padding:0 9px;border-radius:999px;font:600 13px 'JetBrains Mono',ui-monospace,monospace}
.vp:fullscreen{width:100%;max-width:none;height:100%;border-radius:0;aspect-ratio:auto !important}
.vp:-webkit-full-screen{width:100%;max-width:none;height:100%;border-radius:0}
@media (max-width:600px){
.vp{border-radius:16px}
.vp-vol,.vp-rate{display:none}
.vp-bar{padding:30px 4px 4px}
.vp-time{font-size:11.5px;padding:0 2px}
.vp-track{margin:0 6px}
.vp-bot{width:52px}
.vp-pill{min-height:50px;padding:8px 18px 8px 40px;font-size:16px}
}
@media (hover:none){.vp-vol{display:none}}

/* ---------- Реакции ---------- */
.rx{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(18px,3vw,28px);border:1px solid #E1E4EC;border-radius:24px;background:#FFFFFF}
.rx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rx-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.rx-t{margin:0;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.015em;color:#15171C}
.rx-sub{margin:0;font-size:14px;color:#565C67}
.rx-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0}
.rx-b{--ring:#F7F8FA;--rxn:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 2px 12px;border:1.5px solid #E1E4EC;border-radius:18px;background:#F7F8FA;color:#15171C;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--ease),background-color .25s var(--ease),translate .25s var(--ease),box-shadow .25s var(--ease)}
.rx-b:hover{--ring:#FFFFFF;border-color:#2B3670;background:#FFFFFF;translate:0 -2px;box-shadow:0 16px 28px -22px rgba(28,35,82,.55)}
.rx-b:focus-visible{outline:3px solid #4253A6;outline-offset:2px}
.rx-b[aria-pressed="true"]{--ring:#EEF1FA;border-color:#2B3670;background:#EEF1FA;box-shadow:inset 0 0 0 1px #2B3670}
.rx-fig{position:relative;display:block;width:60px;margin-top:12px}
/* Сама реакция — контрастный значок: белый на тёмно-синем, у выбранной — на коралловом. */
.rx-ic{position:absolute;right:-15px;bottom:-8px;z-index:3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1C2352;color:#FFFFFF;box-shadow:0 0 0 3px var(--ring),0 6px 12px -6px rgba(28,35,82,.7);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.rx-ic svg{display:block;width:17px;height:17px;fill:currentColor}
.rx-b[aria-pressed="true"] .rx-ic{background:#E25C47}
.rx-l{max-width:100%;font-size:14px;font-weight:600;line-height:1.2;text-align:center}
.rx-n{min-height:18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;line-height:18px;color:#565C67}
.rx-b[aria-pressed="true"] .rx-l,.rx-b[aria-pressed="true"] .rx-n{color:#1C2352}
.rx-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rx-burst{position:absolute;right:4px;bottom:8px;z-index:4;width:0;height:0;color:#E25C47;pointer-events:none}
.rx-burst i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;opacity:0}
.rx-burst svg{display:block;width:100%;height:100%;fill:currentColor}

/* Персонаж в реакциях: та же разметка, что на первом экране (span — внутри кнопки), без общих анимаций. */
.rx .bot{width:100%;margin:0}
.rx .bot,.rx .nb-stage,.rx .nb-sway,.rx .nb-bob,.rx .nb-eye,.rx .nb-mouth{display:block}
.rx .nb-stage{padding-bottom:0}
.rx .nb-head{box-shadow:0 12px 18px -12px rgba(28,35,82,.6),inset 0 -3cqw 6cqw rgba(10,12,30,.35),inset 0 2cqw 4cqw rgba(255,255,255,.08)}
.rx .nb-cap{filter:none}
.rx .nb-sway,.rx .nb-bob,.rx .nb-head,.rx .nb-face,.rx .nb-pill,.rx .nb-arc,.rx .nb-mouth,.rx .nb-cheek,.rx .nb-cap,.rx .nb-tassel,.rx .cs-brow{animation:none}

/* Нравится: глаза-дуги, румянец, широкая улыбка, сердечки. */
.rx-b[data-k="like"] .nb-pill{opacity:0}
.rx-b[data-k="like"] .nb-arc{opacity:1}
.rx-b[data-k="like"] .nb-cheek{opacity:.95}
.rx-b[data-k="like"] .nb-mouth{scale:1.25 1.15}
.rx-b[data-k="like"] .nb-head{rotate:-6deg}
.rx-hearts{position:absolute;inset:0;color:#E25C47;pointer-events:none}
.rx-hearts i{position:absolute;display:block;width:22cqw;height:22cqw}
.rx-hearts svg{display:block;width:100%;height:100%;fill:currentColor}
.rx-hearts i:nth-child(1){right:-16cqw;top:-4cqw;rotate:16deg}
.rx-hearts i:nth-child(2){left:-17cqw;top:14cqw;width:16cqw;height:16cqw;rotate:-14deg}
.rx-hearts i:nth-child(3){left:-6cqw;top:-16cqw;width:12cqw;height:12cqw;rotate:-6deg}

/* Полезно: взгляд вверх, бровь поднята, загорается лампочка. */
.rx-b[data-k="useful"] .nb-face{translate:3cqw -3cqw}
.rx-b[data-k="useful"] .cs-brow{opacity:1;translate:0 -2cqw}
.rx-b[data-k="useful"] .cs-brow.l{rotate:-16deg;translate:0 -4cqw}
.rx-b[data-k="useful"] .cs-brow.r{rotate:-6deg}
.rx-b[data-k="useful"] .nb-mouth{scale:.7 .75}
.rx-bulb{position:absolute;right:-22cqw;top:-30cqw;width:34cqw;height:34cqw;color:#E25C47;rotate:14deg;pointer-events:none}
.rx-bulb svg{position:relative;display:block;width:100%;height:100%;fill:currentColor}
.rx-glow{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,138,120,.6),rgba(240,138,120,0));opacity:.75}

/* Ого: глаза шире, брови вверх, рот «о», «ахи» вокруг. */
.rx-b[data-k="wow"] .nb-pill{scale:1.18 1.18}
.rx-b[data-k="wow"] .cs-brow{opacity:1;translate:0 -4cqw}
.rx-b[data-k="wow"] .cs-brow.l{rotate:-16deg}
.rx-b[data-k="wow"] .cs-brow.r{rotate:16deg}
.rx-b[data-k="wow"] .nb-mouth{width:10cqw;height:11cqw;border-radius:50%}
.rx-pow{position:absolute;inset:0;pointer-events:none}
.rx-pow i{position:absolute;display:block;width:4cqw;height:13cqw;border-radius:2cqw;background:#2B3670}
.rx-pow i:nth-child(1){left:-15cqw;top:16cqw;rotate:-62deg}
.rx-pow i:nth-child(2){left:-8cqw;top:0;rotate:-32deg}
.rx-pow i:nth-child(3){right:-15cqw;top:16cqw;rotate:62deg}
.rx-pow i:nth-child(4){right:-8cqw;top:0;rotate:32deg}

/* Смешно: глаза-«галочки», рот до ушей, слёзы от смеха. */
.rx-b[data-k="fun"] .nb-pill{opacity:0}
.rx-b[data-k="fun"] .nb-arc{opacity:1;rotate:180deg;translate:0 -1.5cqw}
.rx-b[data-k="fun"] .nb-mouth{width:22cqw;height:13cqw;border-radius:2cqw 2cqw 11cqw 11cqw}
.rx-b[data-k="fun"] .nb-cheek{opacity:.85}
.rx-tear{position:absolute;top:8cqw;width:6.5cqw;height:6.5cqw;border-radius:0 50% 50% 50%;background:#C9D0FF;box-shadow:0 0 2cqw rgba(201,208,255,.8)}
.rx-tear.l{left:-10cqw;rotate:45deg}
.rx-tear.r{right:-10cqw;rotate:45deg}

/* Огонь: тёмные очки и ухмылка. */
.rx-b[data-k="fire"] .nb-pill{scale:1 .6}
.rx-b[data-k="fire"] .nb-mouth{width:15cqw;height:5.5cqw;border-radius:1.6cqw 1.6cqw 8cqw 8cqw;rotate:-8deg;translate:2cqw 0}
.rx-b[data-k="fire"] .nb-head{rotate:5deg}
.rx-shades{position:absolute;left:50%;top:0;z-index:2;display:block;width:62cqw;margin-left:-31cqw;pointer-events:none}
.rx-shades svg{display:block;width:100%;height:auto;overflow:visible}

@media (max-width:560px){
.rx{gap:14px;border-radius:20px}
.rx-row{gap:6px}
.rx-b{gap:4px;padding:12px 0 10px;border-radius:16px}
.rx-fig{width:44px;margin-top:10px}
.rx-ic{right:-12px;bottom:-6px;width:26px;height:26px}
.rx-ic svg{width:15px;height:15px}
.rx-l{font-size:12px;letter-spacing:-.01em}
.rx-n{font-size:12px}
}

@media (prefers-reduced-motion:no-preference){
.vw i{animation:vw 1s ease-in-out infinite}
.vw i:nth-child(2){animation-delay:.12s}.vw i:nth-child(3){animation-delay:.24s}.vw i:nth-child(4){animation-delay:.36s}.vw i:nth-child(5){animation-delay:.48s}
.vp .nb-pill{animation:rxBlink 4.6s linear 1.2s infinite}
.vp-big:hover .bot{animation:vpHop .6s var(--ease)}

/* Реакции: .go — разовый показ (когда блок появился на экране и после нажатия), наведение — по кругу. */
@media (hover:hover){.rx-b:hover{--rxn:infinite}}
.rx-b:is(.go,:hover)[data-k="like"] .nb-head{animation:rxLike 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="like"] .nb-cheek{animation:rxCheek 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="like"] .rx-hearts i{animation:rxHeart 1.4s ease-out var(--rxn) both}
.rx-b:is(.go,:hover)[data-k="like"] .rx-hearts i:nth-child(2){animation-delay:.18s}
.rx-b:is(.go,:hover)[data-k="like"] .rx-hearts i:nth-child(3){animation-delay:.34s}
.rx-b:is(.go,:hover)[data-k="useful"] .nb-head{animation:rxNod 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="useful"] .rx-bulb svg{animation:rxBulb 1.4s cubic-bezier(.2,.8,.3,1.2) var(--rxn)}
.rx-b:is(.go,:hover)[data-k="useful"] .rx-glow{animation:rxGlow 1.4s ease-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="wow"] .nb-bob{animation:rxJump 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="wow"] .nb-cap{animation:rxCap 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="wow"] .cs-brow{animation:rxBrow 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="wow"] .rx-pow i{animation:rxPow 1.4s ease-out var(--rxn) both}
.rx-b:is(.go,:hover)[data-k="fun"] .nb-head{animation:rxLaugh 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="fun"] .nb-mouth{animation:rxHa 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="fun"] .rx-tear.l{animation:rxTearL 1.4s ease-in var(--rxn) both}
.rx-b:is(.go,:hover)[data-k="fun"] .rx-tear.r{animation:rxTearR 1.4s ease-in .1s var(--rxn) both}
.rx-b:is(.go,:hover)[data-k="fire"] .rx-shades{animation:rxShades 1.4s cubic-bezier(.2,.8,.3,1.1) var(--rxn)}
.rx-b:is(.go,:hover)[data-k="fire"] .nb-bob{animation:rxBeat 1.4s ease-in-out var(--rxn)}
.rx-b:is(.go,:hover)[data-k="fire"] .rx-glint{animation:rxGlint 1.4s ease-in-out var(--rxn)}
/* В покое — изредка моргают те, у кого глаза открыты. */
.rx.on .rx-b[data-k="useful"]:not(:hover):not(.go) .nb-pill{animation:rxBlink 5.2s linear 2.4s infinite}
.rx.on .rx-b[data-k="wow"]:not(:hover):not(.go) .nb-pill{animation:rxBlinkWide 6s linear 3.6s infinite}
.rx-b.picked .rx-ic{animation:rxPop .5s cubic-bezier(.2,.9,.3,1.4)}
.rx-burst i{animation:rxBurst .9s cubic-bezier(.2,.7,.2,1) forwards}
.rx-n.tick{animation:rxTick .35s var(--ease)}
}
@keyframes vw{0%,100%{scale:1 .35}50%{scale:1 1}}
@keyframes vpHop{0%,100%{translate:0 0}40%{translate:0 -10%}}
@keyframes rxBlink{0%,92%{scale:1 1}94%{scale:1 .1}96%,100%{scale:1 1}}
@keyframes rxBlinkWide{0%,92%{scale:1.18 1.18}94%{scale:1.18 .12}96%,100%{scale:1.18 1.18}}
@keyframes rxLike{0%,100%{rotate:-6deg;translate:0 0}25%{rotate:7deg;translate:0 -7cqw}50%{rotate:-7deg;translate:0 0}75%{rotate:5deg;translate:0 -4cqw}}
@keyframes rxCheek{0%,100%{scale:1}35%,65%{scale:1.4}}
@keyframes rxHeart{0%{opacity:0;translate:0 6cqw;scale:.3}25%{opacity:1;scale:1.1}60%{opacity:1}100%{opacity:0;translate:0 -30cqw;scale:.9}}
@keyframes rxNod{0%,100%{translate:0 0}15%,45%{translate:0 5cqw}30%,60%{translate:0 0}}
@keyframes rxBulb{0%{opacity:0;scale:.2;translate:-6cqw 10cqw}30%{opacity:1;scale:1.25;translate:0 0}45%{scale:.92}60%,100%{opacity:1;scale:1}}
@keyframes rxGlow{0%,30%{opacity:0;scale:.6}50%{opacity:1;scale:1.25}100%{opacity:.75;scale:1}}
@keyframes rxJump{0%,100%{translate:0 0;scale:1 1}12%{translate:0 3cqw;scale:1.1 .88}32%{translate:0 -16cqw;scale:.94 1.08}52%{translate:0 0;scale:1.08 .92}66%{scale:1 1}}
@keyframes rxCap{0%,14%{translate:0 0;rotate:0deg}38%{translate:0 -20cqw;rotate:-16deg}58%{translate:0 0;rotate:5deg}70%,100%{translate:0 0;rotate:0deg}}
@keyframes rxBrow{0%,100%{translate:0 -4cqw}30%,45%{translate:0 -8cqw}}
@keyframes rxPow{0%,10%{opacity:0;scale:.3}30%{opacity:1;scale:1.2}55%,100%{opacity:1;scale:1}}
@keyframes rxLaugh{0%,100%{rotate:0deg;translate:0 0}8%{rotate:-8deg;translate:0 -3cqw}16%{rotate:7deg;translate:0 0}24%{rotate:-8deg;translate:0 -3cqw}32%{rotate:7deg;translate:0 0}40%{rotate:-6deg;translate:0 -2cqw}48%{rotate:5deg;translate:0 0}56%{rotate:-3deg}64%{rotate:0deg}}
@keyframes rxHa{0%,100%{scale:1 1}8%,24%,40%{scale:1 .7}16%,32%,48%{scale:1 1.1}}
@keyframes rxTearL{0%{opacity:0;translate:0 0}15%,75%{opacity:1}100%{opacity:0;translate:-7cqw 12cqw}}
@keyframes rxTearR{0%{opacity:0;translate:0 0}15%,75%{opacity:1}100%{opacity:0;translate:7cqw 12cqw}}
@keyframes rxShades{0%{opacity:0;translate:0 -36cqw;rotate:-12deg}40%{opacity:1;translate:0 2cqw;rotate:4deg}52%{translate:0 0;rotate:0deg}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes rxBeat{0%,25%,50%,75%,100%{translate:0 0}12.5%,37.5%,62.5%,87.5%{translate:0 3cqw}}
@keyframes rxGlint{0%,50%{opacity:0;translate:-8px 0}62%{opacity:.9}80%,100%{opacity:0;translate:10px 0}}
@keyframes rxPop{0%{scale:1}40%{scale:1.45}100%{scale:1}}
@keyframes rxBurst{0%{opacity:0;translate:0 0;scale:.4}20%{opacity:1}100%{opacity:0;translate:var(--x) var(--y);scale:1}}
@keyframes rxTick{0%{opacity:0;translate:0 6px}100%{opacity:1;translate:0 0}}