/* =========================================================================
   НЕпросто PR - эффекты (fx.css). Пара к fx.js. Без зависимостей.
   Контракт:
     [data-fx~="particles"]  пыль-частицы (canvas) внутри элемента
     [data-fx~="spot"]       прожектор за курсором
     [data-magnetic]         магнитная кнопка (data-magnetic="0.3" - сила)
     [data-tilt]             3D-наклон карточки (data-tilt="7" - градусы)
     [data-count="68"]       счётчик (в HTML уже стоит итоговое число)
     [data-reveal="up|down|left|right|scale|blur|mask"] появление
     [data-marker]           маркер-подчёркивание (data-marker="line" - тонкая линия)
     .np-ic                  живая иконка в стеклянной плашке
     .np-title               живой полупрозрачный заголовок с тёмным бликом
   Страховки: всё прячется только при html.js; если fx.js не ожил
   (нет класса fx-alive) - CSS сам раскрывает всё через 2,6 с;
   reduced-motion и печать - всё видно и неподвижно.
   ========================================================================= */

@property --npt-g{syntax:'<percentage>';inherits:true;initial-value:-40%}
@property --npt-f{syntax:'<number>';inherits:true;initial-value:0}
@property --npi-a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --fx-blue:#5B68DF;
  --fx-violet:#7D5BDF;
  --fx-deep:#0000B9;
  --fx-ink:#EFEFF5;
  --fx-sky:#88C7E1;
  --fx-blue-l:#A9B2FF;      /* светлые тона палитры - для текста и линий на тёмном */
  --fx-violet-l:#BBA3FF;
  --fx-ease:cubic-bezier(.2,.7,.2,1);
  --fx-out:cubic-bezier(.16,1,.3,1);
}

@keyframes fx-failsafe{to{opacity:1;filter:none;clip-path:inset(-60px -60px -60px -60px)}}

/* ---------- появление ---------- */
.js [data-reveal]:not(.fx-in){opacity:0}
.js [data-reveal]:not(.fx-done){
  transition:opacity .9s var(--fx-ease),translate 1.05s var(--fx-out),scale 1.05s var(--fx-out),filter 1s var(--fx-ease),clip-path 1.15s var(--fx-out);
  transition-delay:var(--fx-d,0ms);
}
.js [data-reveal=""]:not(.fx-in),.js [data-reveal="up"]:not(.fx-in){translate:0 44px}
.js [data-reveal="down"]:not(.fx-in){translate:0 -36px}
.js [data-reveal="left"]:not(.fx-in){translate:-64px 0}
.js [data-reveal="right"]:not(.fx-in){translate:64px 0}
/* на узком экране сдвиг вбок раздувает ширину страницы - заменяем на подъём */
@media (max-width:760px){.js [data-reveal="left"]:not(.fx-in),.js [data-reveal="right"]:not(.fx-in){translate:0 32px}}
.js [data-reveal="scale"]:not(.fx-in){scale:.88}
.js [data-reveal="blur"]:not(.fx-in){translate:0 18px;filter:blur(14px)}
.js [data-reveal="mask"]{clip-path:inset(-60px -60px -60px -60px)}
.js [data-reveal="mask"]:not(.fx-in){opacity:1;clip-path:inset(-60px -60px 100% -60px);translate:0 26px}
/* мягкая страховка от fx.js (2,5 с): элементы ниже экрана видны, сдвиг доедет при прокрутке */
.fx-vis[data-reveal]{opacity:1 !important;filter:none !important}
.fx-vis[data-reveal="mask"]{clip-path:inset(-60px -60px -60px -60px) !important}
/* жёсткая страховка, если fx.js не загрузился или упал */
.js:not(.fx-alive) [data-reveal]:not(.fx-in){animation:fx-failsafe 1ms linear 2.6s forwards}

/* ---------- маркер-подчёркивание ---------- */
[data-marker]{
  background-image:linear-gradient(100deg,rgba(91,104,223,.55),rgba(125,91,223,.5));
  background-repeat:no-repeat;background-position:0 86%;background-size:100% .42em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  border-radius:.12em;padding:0 .06em;margin:0 -.06em;
}
[data-marker="line"]{background-image:linear-gradient(90deg,#8F9BFF,#B49BFF);background-size:100% .09em;background-position:0 100%;padding-bottom:.08em;border-radius:0}
.js [data-marker]:not(.fx-in){background-size:0% .42em}
.js [data-marker="line"]:not(.fx-in){background-size:0% .09em}
.js [data-marker]{transition:background-size 1.15s var(--fx-out) var(--fx-d,.2s)}

/* ---------- прожектор за курсором ---------- */
.fx-spot{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:var(--fx-sz,1)}
.fx-spot--page{position:fixed;border-radius:0}
.fx-spot__b{
  position:absolute;left:0;top:0;width:var(--fx-sr,880px);height:var(--fx-sr,880px);margin:calc(var(--fx-sr,880px) / -2) 0 0 calc(var(--fx-sr,880px) / -2);
  border-radius:50%;opacity:0;transition:opacity .6s var(--fx-ease);will-change:transform;
  background-image:radial-gradient(closest-side,rgba(125,91,223,.2),rgba(91,104,223,.1) 42%,rgba(0,0,185,.04) 68%,transparent);
  /* без mix-blend-mode: смешивание большого слоя с фоном в каждом кадре - дорогой композит (на тёмном фоне разница незаметна) */
}
.fx-spot.is-on .fx-spot__b{opacity:1}
/* сенсорный экран: дрейф прожектора - две вложенные CSS-анимации transform (композитор, без JS-цикла),
   без mix-blend-mode (смешивание большого слоя в каждом кадре дорого для телефона); вне экрана - пауза */
.fx-spot--drift .fx-spot__x,.fx-spot--drift .fx-spot__y{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.fx-spot--drift .fx-spot__x{animation:fx-sx 11s ease-in-out infinite alternate}
.fx-spot--drift .fx-spot__y{animation:fx-sy 7.4s ease-in-out -2.4s infinite alternate}
.fx-spot--drift .fx-spot__b{mix-blend-mode:normal;will-change:auto;
  background-image:radial-gradient(closest-side,rgba(125,91,223,.2),rgba(91,104,223,.09) 42%,rgba(0,0,185,.035) 68%,transparent)}
.fx-spot--drift:not(.is-live){display:none}
@keyframes fx-sx{from{transform:translate3d(18%,0,0)}to{transform:translate3d(82%,0,0)}}
@keyframes fx-sy{from{transform:translate3d(0,14%,0)}to{transform:translate3d(0,58%,0)}}

/* ---------- частицы ---------- */
:where([data-fx~="particles"]){position:relative}
.fx-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--fx-pz,1);display:block}
/* сенсорный экран: частицы - span с анимациями transform/opacity на композиторе (fx.js ParticlesCSS) */
.fx-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--fx-pz,1);display:block;contain:strict}
.fx-dot{position:absolute;top:100%;margin-top:24px;animation:fx-rise var(--d,40s) linear var(--dl,0s) infinite}
.fx-dot__b{display:block;width:100%;height:100%;border-radius:50%;opacity:var(--a,.5);
  background:radial-gradient(closest-side,rgba(var(--c),1),rgba(var(--c),.6) 26%,rgba(var(--c),.14) 60%,rgba(var(--c),0));
  animation:fx-sway var(--sd,5s) ease-in-out var(--dl,0s) infinite alternate,fx-tw var(--td,3s) ease-in-out infinite alternate}
/* вне экрана частиц нет вовсе: ни анимаций, ни композитных слоёв (каждый слой - работа при коммите кадра) */
.fx-dots:not(.is-live){display:none}
@keyframes fx-rise{to{transform:translate3d(0,calc(var(--fx-h,900px) * -1),0)}}
@keyframes fx-sway{from{transform:translate3d(calc(var(--sw,20px) * -.5),0,0)}to{transform:translate3d(calc(var(--sw,20px) * .5),0,0)}}
@keyframes fx-tw{from{opacity:calc(var(--a,.5) * .4)}to{opacity:var(--a,.5)}}

/* ---------- 3D-наклон ---------- */
:where([data-tilt]){position:relative}
/* перспектива для наклона - классом от fx.js (раньше :has() на всех элементах: самый дорогой селектор при пересчёте стиля) */
.fx-persp{perspective:1100px}
.fx-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s;
  background-image:radial-gradient(420px circle at var(--fx-gx,50%) var(--fx-gy,0%),rgba(239,239,245,.13),rgba(169,178,255,.05) 40%,transparent 62%);
  mix-blend-mode:screen;
}
[data-tilt].fx-tilting .fx-glare{opacity:1}

/* ---------- счётчики ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* =========================================================================
   ЖИВАЯ ИКОНКА .np-ic
   <span class="np-ic" data-icon="mic"></span>
   или <span class="np-ic"><svg viewBox="0 0 24 24"><use href="#npi-mic"/></svg></span>
   или свои path с pathLength="100". Размеры: .np-ic--s / --l или --ic-size.
   ========================================================================= */
.np-ic{
  --ic-size:56px;
  position:relative;flex:none;display:inline-grid;place-items:center;
  width:var(--ic-size);height:var(--ic-size);border-radius:calc(var(--ic-size) * .32);
  color:#B4BCFF;isolation:isolate;vertical-align:middle;
  background:
    radial-gradient(120% 95% at 26% 10%,rgba(125,91,223,.34),rgba(91,104,223,.08) 52%,rgba(0,0,185,.12) 100%),
    rgba(14,14,36,.62);
  box-shadow:
    inset 0 1px 0 rgba(239,239,245,.16),
    inset 0 0 0 1px rgba(150,160,255,.24),
    0 0 38px -12px rgba(91,104,223,.9),
    0 16px 30px -20px rgba(0,0,0,.85);
  transition:box-shadow .5s var(--fx-ease),transform .6s cubic-bezier(.2,1.3,.3,1);
}
.np-ic--s{--ic-size:44px}
.np-ic--l{--ic-size:72px}
.np-ic--xl{--ic-size:92px}
.np-ic::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 46%)}
.np-ic::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--npi-a),transparent 0 66%,rgba(143,155,255,.95) 80%,rgba(196,170,255,.95) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.85;
}
.np-ic.is-live::after{animation:npi-rot 4.8s linear infinite}
@keyframes npi-rot{to{--npi-a:360deg}}
/* с JS: кромку обходит вложенный слой, который вращается transform-ом (композитор, без перерисовки иконки) */
.np-ic.npi-r::after{display:none}
.npi-ring{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.npi-ri{position:absolute;left:-25%;top:-25%;width:150%;height:150%;
  background:conic-gradient(transparent 0 66%,rgba(143,155,255,.95) 80%,rgba(196,170,255,.95) 88%,transparent 100%)}
.np-ic.is-live .npi-ri{animation:npi-ring 4.8s linear infinite}
@keyframes npi-ring{to{transform:rotate(360deg)}}
.np-ic--xs .npi-ring{padding:1px}
.np-ic svg{
  width:50%;height:50%;overflow:visible;position:relative;z-index:1;
  fill:none;stroke:url(#npi-g) #B4BCFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(125,91,223,.55));
}
.np-ic .npi-dot{stroke-width:2.6}
.np-ic .npi-fill{fill:#C2C8FF;stroke:none}
:is(a,button,[data-tilt],.np-ic-host):hover .np-ic,.np-ic:hover{
  box-shadow:inset 0 1px 0 rgba(239,239,245,.2),inset 0 0 0 1px rgba(170,178,255,.45),0 0 46px -8px rgba(125,91,223,1),0 16px 30px -20px rgba(0,0,0,.85);
}
/* прорисовка контура */
.np-ic .npi-d{stroke-dasharray:100 100;transition:stroke-dashoffset 1.25s var(--fx-out) var(--pd,0s)}
.js .np-ic:not(.is-drawn) .npi-d{stroke-dashoffset:100}
.js:not(.fx-alive) .np-ic:not(.is-drawn) .npi-d{animation:npi-fs 1ms linear 2.6s forwards}
@keyframes npi-fs{to{stroke-dashoffset:0}}
/* бегущий блик по контуру */
.np-ic .npi-gc{stroke:rgba(255,255,255,.95);stroke-width:1.6;stroke-dasharray:11 89;stroke-dashoffset:100;opacity:0;transition:opacity .6s 1s;filter:none}
.np-ic.is-drawn .npi-gc{opacity:.85}
.np-ic.is-drawn.is-live .npi-gc{animation:npi-glint 3.4s linear infinite}
@keyframes npi-glint{to{stroke-dashoffset:0}}

/* осмысленное движение частей (только на экране и после прорисовки) */
.np-ic .npi-m{transform-box:view-box;transform-origin:var(--o,12px 12px)}
.np-ic .mv-spark{opacity:0} /* искры видны только в анимации */
.np-ic.is-drawn.is-live .mv-wave{animation:npi-wave 2.2s var(--fx-ease) var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-type{animation:npi-type 3.8s cubic-bezier(.65,0,.3,1) calc(var(--ad,0s) + 1.2s) infinite}
.np-ic.is-drawn.is-live .mv-blink{animation:npi-blink 1.5s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-spark{animation:npi-spark 3s ease-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-travel{animation:npi-travel 3.2s linear var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-float{animation:npi-float 3.2s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-shadow{animation:npi-shadow 3.2s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-swayl{animation:npi-swayl 3.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-swayr{animation:npi-swayr 3.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-twinkle{animation:npi-twinkle 2.4s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-fly{animation:npi-fly 2.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-trail{animation:npi-trail 1.3s linear var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-rise{animation:npi-rise 1.9s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-eyelid{animation:npi-eyelid 4.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-look{animation:npi-look 4.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-buzz{animation:npi-buzz 2.6s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-breathe{animation:npi-breathe 3s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-bob{animation:npi-bob 2.4s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-turn{animation:npi-turn 3.4s cubic-bezier(.5,0,.2,1) var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-spin{animation:npi-spin 7s linear var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-spin-s{animation:npi-spin 84s linear var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-flash{animation:npi-flash 3s linear var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-hit{animation:npi-hit 3.4s cubic-bezier(.3,0,.2,1) var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-ping{animation:npi-ping 3.4s ease-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-dot{animation:npi-dot 1.25s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-scan{animation:npi-scan 3.8s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-flag{animation:npi-flag 1.7s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-shake{animation:npi-shake 3.2s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-write{animation:npi-write 1.9s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-spiny{animation:npi-spiny 4.2s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-pulse{animation:npi-pulse 1.9s ease-in-out var(--ad,0s) infinite}
.np-ic.is-drawn.is-live .mv-pulse-ring{animation:npi-pulsering 2.4s ease-out var(--ad,0s) infinite}

@keyframes npi-wave{0%{opacity:.2;transform:scale(.84)}45%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(1.08)}}
@keyframes npi-type{0%{stroke-dashoffset:100}36%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes npi-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes npi-spark{0%,60%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes npi-travel{0%{transform:translateX(0);opacity:0}12%,86%{opacity:1}100%{transform:translateX(17px);opacity:0}}
@keyframes npi-float{0%,100%{transform:translateY(.4px)}50%{transform:translateY(-1.4px)}}
@keyframes npi-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.7);opacity:.45}}
@keyframes npi-swayl{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes npi-swayr{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes npi-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.5}}
@keyframes npi-fly{0%,100%{transform:translate(0,0)}50%{transform:translate(1.3px,-1.3px)}}
@keyframes npi-trail{0%{opacity:0;transform:translateX(2.5px)}35%{opacity:1}100%{opacity:0;transform:translateX(-3px)}}
@keyframes npi-rise{0%,100%{transform:translate(0,0)}50%{transform:translate(1.1px,-1.1px)}}
@keyframes npi-eyelid{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}}
@keyframes npi-look{0%,100%{transform:translateX(0)}28%{transform:translateX(-1.5px)}62%{transform:translateX(1.5px)}}
@keyframes npi-buzz{0%,66%,100%{transform:rotate(0)}71%{transform:rotate(-5deg)}76%{transform:rotate(4deg)}81%{transform:rotate(-2.5deg)}86%{transform:rotate(0)}}
@keyframes npi-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
@keyframes npi-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes npi-turn{0%,50%,100%{transform:rotate(0)}66%,84%{transform:rotate(-28deg)}}
@keyframes npi-spin{to{transform:rotate(360deg)}}
@keyframes npi-flash{0%,62%,70%,78%,100%{opacity:1}66%,74%{opacity:.25}}
@keyframes npi-hit{0%{transform:translate(5px,-5px);opacity:0}14%{transform:translate(0,0);opacity:1}18%{transform:translate(-.6px,.6px)}22%,82%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes npi-ping{0%,14%{transform:scale(1)}22%{transform:scale(1.2)}36%,100%{transform:scale(1)}}
@keyframes npi-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-1.9px);opacity:1}}
@keyframes npi-scan{0%,100%{transform:translate(0,0)}25%{transform:translate(1.3px,-.7px)}50%{transform:translate(0,-1.4px)}75%{transform:translate(-1.3px,-.7px)}}
@keyframes npi-flag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-14deg) scaleX(.9)}}
@keyframes npi-shake{0%,58%,100%{transform:rotate(0)}64%{transform:rotate(-7deg)}70%{transform:rotate(6deg)}76%{transform:rotate(-4deg)}82%{transform:rotate(2deg)}88%{transform:rotate(0)}}
@keyframes npi-write{0%,100%{transform:translate(0,0)}50%{transform:translate(2.2px,0)}}
@keyframes npi-spiny{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.22)}}
@keyframes npi-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes npi-pulsering{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* =========================================================================
   ЖИВОЙ ЗАГОЛОВОК .np-title
   <h1 class="np-title">Антикризисный PR: <em>первые 24 часа</em></h1>
   Текст полупрозрачный (видно анимированный фон hero), акцент <em> -
   двухцветный градиент агентства с альфой, раз в ~6 с тёмный блик.
   Блик и прозрачность - один background-image на внутренних span (.npt-t),
   родитель без transform/filter.
   ========================================================================= */
:where(.np-title){position:relative}
.np-title{
  --npt-c:rgba(239,239,245,.8);
  --npt-a1:rgba(172,182,255,.88);
  --npt-a2:rgba(178,146,255,.8);
  --npt-dark:rgba(7,6,24,.76);
  color:var(--npt-c);isolation:isolate;
}
/* мягкое затемнение фона под строками - читаемость при полупрозрачном тексте */
.np-title::before{
  content:"";position:absolute;inset:-18% -6% -22% -8%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,4,16,.42),rgba(4,4,16,.18) 60%,transparent);
}
.np-title[data-haze="off"]::before{display:none}
.np-title em,.np-title .np-acc{font-style:normal}
/* без JS / до разбивки: градиент прямо на em */
.np-title:not(.npt-ready) em,.np-title:not(.npt-ready) .np-acc{
  background-image:linear-gradient(120deg,var(--npt-a1),var(--npt-a2));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
/* после разбивки на слова */
.np-title .npt-w{display:inline-block;vertical-align:top;overflow:clip;padding:.1em .04em .16em;margin:-.1em -.04em -.16em}
.np-title.npt-done .npt-w{overflow:visible}
.np-title .npt-i{display:inline-block}
.np-title .npt-t{
  display:inline-block;
  background-image:
    linear-gradient(105deg,transparent calc(var(--npt-g) - 9%),var(--npt-dark) var(--npt-g),transparent calc(var(--npt-g) + 9%)),
    linear-gradient(var(--npt-c),var(--npt-c));
  background-size:var(--npt-W,100%) var(--npt-H,100%),var(--npt-W,100%) var(--npt-H,100%);
  background-position:calc(var(--npt-x,0px) * -1) calc(var(--npt-y,0px) * -1),calc(var(--npt-x,0px) * -1) calc(var(--npt-y,0px) * -1);
  background-repeat:no-repeat,no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.np-title .npt-t.npt-acc{
  background-image:
    linear-gradient(105deg,transparent calc(var(--npt-g) - 9%),var(--npt-dark) var(--npt-g),transparent calc(var(--npt-g) + 9%)),
    linear-gradient(90deg,var(--npt-a1),var(--npt-a2) 50%,var(--npt-a1));
  background-size:var(--npt-W,100%) var(--npt-H,100%),calc(var(--npt-W,1000px) * .7) var(--npt-H,100%);
  background-position:
    calc(var(--npt-x,0px) * -1) calc(var(--npt-y,0px) * -1),
    calc(var(--npt-x,0px) * -1 - var(--npt-f) * var(--npt-W,1000px) * .7) calc(var(--npt-y,0px) * -1);
  background-repeat:no-repeat,repeat-x;
}
/* сдвиг и переход слов - через переменные заголовка: селекторы вида .np-title:not(.npt-in) .npt-i при каждом
   пересчёте стиля проходили всех предков до корня (когда не совпадали), а слова пересчитываются в каждом кадре перелива */
.np-title .npt-i{transform:translate(0,var(--npt-o,0%));transition:transform var(--npt-td,0s) cubic-bezier(.2,.8,.12,1) var(--wd,0s)}
.js .np-title.npt-ready:not(.npt-in){--npt-o:112%}
.np-title.npt-in:not(.npt-done){--npt-td:1s}
.np-title.npt-live.npt-flow{animation:npt-flow 9s linear infinite}
.np-title.npt-live.npt-flow.npt-glint{animation:npt-glint var(--npt-gd,6.2s) linear var(--npt-g0,1.6s) infinite,npt-flow 9s linear infinite}
@keyframes npt-glint{0%,74%{--npt-g:-40%}100%{--npt-g:140%}}
@keyframes npt-flow{to{--npt-f:1}}
/* скрываем до разбивки, чтобы не мигало; страховки ниже */
.js .np-title:not(.npt-ready):not(.npt-static){opacity:0}
.js:not(.fx-alive) .np-title:not(.npt-ready){animation:fx-failsafe 1ms linear 2.6s forwards}
.fx-all .np-title,.rv-all .np-title,.rv-force .np-title{opacity:1}
.rv-force .np-title .npt-i{transform:none !important}

/* без поддержки background-clip:text - простой полупрозрачный цвет */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .np-title .npt-t,.np-title em{background-image:none !important;color:var(--npt-c) !important;-webkit-text-fill-color:currentColor !important}
  .np-title .npt-acc,.np-title em{color:var(--npt-a1) !important}
}

/* ---------- reduced-motion: всё видно и неподвижно ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important;translate:none !important;scale:none !important;filter:none !important;clip-path:none !important;transition:none !important;animation:none !important}
  .js [data-marker]{background-size:100% .42em !important;transition:none !important}
  .js [data-marker="line"]{background-size:100% .09em !important}
  .np-ic .npi-d{stroke-dashoffset:0 !important;transition:none !important;animation:none !important}
  .np-ic::after,.np-ic .npi-gc,.np-ic .npi-m,.npi-ri{animation:none !important}
  .np-ic .npi-gc{display:none}
  .np-title,.np-title .npt-i{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
  .fx-spot,.fx-glare,.fx-dots{display:none}
}
.fx-static [data-reveal]{opacity:1 !important;translate:none !important;scale:none !important;filter:none !important;clip-path:none !important;transition:none !important;animation:none !important}
.fx-static .np-ic .npi-d{stroke-dashoffset:0 !important;transition:none !important}
.fx-static .np-title,.fx-static .np-title .npt-i{opacity:1 !important;transform:none !important}
.rv-force [data-reveal]{opacity:1 !important;translate:none !important;scale:none !important;filter:none !important;clip-path:none !important;transition:none !important;animation:none !important}
.rv-force .np-ic .npi-d{stroke-dashoffset:0 !important}

/* ---------- печать ---------- */
@media print{
  [data-reveal]{opacity:1 !important;translate:none !important;scale:none !important;filter:none !important;clip-path:none !important;animation:none !important}
  .fx-particles,.fx-dots,.fx-spot,.fx-glare,.np-ic .npi-gc,.npi-ring{display:none !important}
  .np-ic .npi-d{stroke-dashoffset:0 !important}
  .np-ic{box-shadow:none;background:none;border:1px solid #999}
  .np-ic::after,.np-title::before{display:none}
  .np-title,.np-title .npt-i{opacity:1 !important;transform:none !important;animation:none !important}
  .np-title .npt-t,.np-title em{background-image:none !important;color:#111 !important;-webkit-text-fill-color:#111 !important}
  [data-magnetic],[data-tilt]{translate:none !important;rotate:none !important}
}

/* ---------- во время прокрутки: видимые украшения на паузе (fx.js ставит fx-hold на live-элементы при старте прокрутки
   и снимает через 0,25 с покоя; html.fx-scrolling - общий признак прокрутки). Конкретные классы без * справа ---------- */
.np-ic.fx-hold .npi-m,.np-ic.fx-hold .npi-gc,.np-ic.fx-hold .npi-ri,.np-title.fx-hold,.fx-dots.fx-hold .fx-dot,.fx-dots.fx-hold .fx-dot__b,
.fx-spot.fx-hold .fx-spot__x,.fx-spot.fx-hold .fx-spot__y{animation-play-state:paused !important}