/* ── примеры на слайдах (SVG 730x530) ─────────────────────────────────────
   Шаги - классы p1, p2, ... на корневом svg (ставит run() из js/vig*.js).
   В SVG у трансформаций по умолчанию transform-box: view-box, поэтому
   вращение вокруг своей оси - через transform-box: fill-box.            */
svg text{font-family:var(--nar)}
.vh-l{font:700 13px var(--nar);letter-spacing:.2em;fill:var(--ink2)}
.vh-r{font:700 13px var(--nar);letter-spacing:.2em;fill:var(--em)}
.v-t{font:700 14px var(--nar);letter-spacing:.15em;fill:var(--ink)}
.v-d{font:700 11.5px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.v-t .v-d{font-size:11.5px}
@keyframes flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:.15}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 1. судмедэксперт. Действие 1 - стол лаборатории */
.fx-lbl{font:700 5.5px var(--nar);fill:#2A2E2B}
.fx-lbl2{font:700 8px var(--nar);letter-spacing:.12em;fill:var(--ink3)}
.fx-lbl3{font:700 9px var(--nar);letter-spacing:.14em;fill:#DDE6E1}
.fx-scrt{font:700 9px var(--nar);letter-spacing:.12em;fill:var(--ink3);transition:fill .4s}
.al .fx-scrt{fill:var(--em)}
.fx-half{transform:translateY(7px);transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.al .fx-half{transform:translateY(0)}
.fx-dl{font:700 8.5px var(--nar);letter-spacing:.12em;fill:var(--ink3)}
.fx-dv{font:600 18px var(--hj);fill:var(--em)}
.fx-dv2{font:600 11px var(--hj);fill:var(--em)}
.fx-dv3{font:600 12.5px var(--hj);fill:var(--em)}
.fx-tmp{fill:var(--amb)}
.fx-well{fill:#2A3731;transition:fill .3s} .fx-well.on{fill:var(--em)}
.fx-tag{font:700 10px var(--nar);letter-spacing:.14em;fill:var(--ink3);transition:fill .4s}
.km .fx-tkm,.al .fx-tal{fill:var(--em)}
.fx-sn{font:600 14px var(--hj);fill:var(--ink4)}
.fx-stt{font:700 12px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.fx-sd{font:12.5px var(--pt);fill:var(--ink4)}
.fx-st.on .fx-sn{fill:var(--em)} .fx-st.on .fx-stt{fill:var(--ink)} .fx-st.on .fx-sd{fill:var(--ink2)}
.fx-print{opacity:0;transition:opacity 4.5s ease .4s}
.a1on .fx-print{opacity:.92}
.fx-fume path,.fx-steam path{opacity:0}
.a1on .fx-fume path{animation:heat 1.6s ease-in-out infinite}
.a1on .fx-fume path:nth-child(2){animation-delay:.55s} .a1on .fx-fume path:nth-child(3){animation-delay:1.05s}
.a1on .fx-steam path{animation:heat 1.3s ease-in-out infinite} .a1on .fx-steam path:nth-child(2){animation-delay:.65s}
.fx-bub circle{fill:#fff;opacity:0}
.a1on .fx-bub circle{animation:bub 1s ease-in infinite}
.a1on .fx-bub circle:nth-child(2){animation-delay:.3s} .a1on .fx-bub circle:nth-child(3){animation-delay:.55s} .a1on .fx-bub circle:nth-child(4){animation-delay:.8s}
@keyframes bub{0%{opacity:0;transform:translateY(0)}20%{opacity:.8}100%{opacity:0;transform:translateY(-16px)}}
.fx-flame{transform-origin:184px 352px}
.a1on .fx-flame{animation:flame .16s ease-in-out infinite alternate}
@keyframes flame{from{transform:scale(1,1)}to{transform:scale(.9,1.09)}}
.fx-bar{transform-box:fill-box;transform-origin:50% 50%}
.a1on .fx-bar{animation:bar .24s linear infinite}
@keyframes bar{0%{transform:scaleX(1)}50%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
.fx-vortex{transform-origin:348px 316px}
.a1on .fx-vortex{animation:vtx .5s ease-in-out infinite alternate}
@keyframes vtx{from{transform:scaleX(.88)}to{transform:scaleX(1.06)}}
.a1on .fx-rotor{animation:spin .42s linear infinite}
.fx-blur{opacity:0;transition:opacity 1s} .a1on .fx-blur{opacity:.45}
.fx-drop{opacity:0}
.drop .fx-drop{animation:drop .55s cubic-bezier(.5,0,1,1) forwards}
@keyframes drop{0%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(40px)}100%{opacity:0;transform:translateY(42px)}}
.fx-km{transition:fill .7s ease,fill-opacity .7s ease}
.km .fx-km{fill:#E75480;fill-opacity:.9}
/* наезд камерой в КЦА-45: стол уходит в кадр, след и дактокарта выходят из камеры */
.fx-a1{transform-origin:75px 262px;transition:transform .95s cubic-bezier(.6,0,.4,1),opacity .45s ease .45s}
.act2 .fx-a1{transform:scale(3.4);opacity:0}
.a1off .fx-a1{display:none}
.fx-a2{opacity:0;transform:scale(.16);transform-origin:75px 262px;transition:transform .9s cubic-bezier(.25,.1,.2,1) .3s,opacity .35s ease .3s}
.act2 .fx-a2{opacity:1;transform:scale(1)}
/* Действие 2 - дактилоскопия */
.fx-trace{opacity:1}
.fx-scan{opacity:0}
.p2 .fx-scan{animation:fxscan 1.35s cubic-bezier(.45,0,.55,1) forwards}
@keyframes fxscan{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(278px)}}
.mn .ml{fill:none;stroke:var(--em);stroke-width:1.2;opacity:.75;transition:stroke-dashoffset .45s ease}
.mn.on .ml{stroke-dashoffset:0!important}
.mn .mc{fill:none;stroke:var(--em);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mn .mc2{stroke:#14824A;stroke-width:2.2}
.mn.on .mc{transform:scale(1)}
.mn .mnum{font:600 14px var(--hj);fill:var(--em);opacity:0;transition:opacity .3s}
.mn.on .mnum{opacity:1}
.cell{fill:none;stroke:#2E3F37;transition:fill .25s,stroke .25s}
.cell.on{fill:var(--em);stroke:var(--em)}
.fx-cnt{font:600 46px var(--hj);fill:var(--ink)}
.fx-of{font-size:26px;fill:var(--ink4)}
.fx-cardtx{font:700 10px var(--nar);letter-spacing:.1em;fill:#6A665C}
.fx-card rect:first-child{transition:stroke .4s,stroke-width .4s}
.p4 .fx-card rect:first-child{stroke:var(--em);stroke-width:3}
.fx-verd{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s var(--ease)}
.p4 .fx-verd{opacity:1;transform:translateY(0)}
.fx-v1{font:400 23px var(--stencil);letter-spacing:.03em;fill:var(--em)}

/* 2. АЭС */
.rod{opacity:.28;transition:opacity 1.9s ease}
.p1 .rod{opacity:1}
.np-glow{opacity:.06;transition:opacity 2.2s ease}
.p1 .np-glow{opacity:.95;animation:cher 2.6s ease-in-out 2.2s infinite}
@keyframes cher{50%{opacity:.7}}
.np-ctl{transition:transform 1.9s cubic-bezier(.5,0,.3,1)}
.p1 .np-ctl{transform:translateY(-150px)}
.np-steam,.np-cond,.np-pw{stroke-dasharray:9 9;opacity:0;transition:opacity .6s}
.p2 .np-steam,.p2 .np-cond{opacity:1;animation:flow .45s linear infinite}
.p3 .np-pw{opacity:1;animation:flow .35s linear infinite}
.np-bl{stroke-dasharray:2 3;opacity:.45;transition:opacity 1s}
.p2 .np-bl{opacity:1;animation:bl .09s linear infinite}
@keyframes bl{from{stroke-dashoffset:5}to{stroke-dashoffset:0}}
.np-g{font:400 28px var(--stencil);fill:var(--ink)}
.np-sc{font:600 14px var(--hj);fill:var(--ink3)}
.np-read .np-mw{font:600 40px var(--hj);fill:var(--ink)}
.np-read .np-u{font:600 20px var(--hj);fill:var(--ink3)}
.np-v{font:600 19px var(--hj);fill:var(--ink)}
.np-st{fill:var(--em)}
.np-spent{font:700 12px var(--nar);letter-spacing:.14em;fill:var(--red);opacity:0;transition:opacity .3s}
.p4 .np-spent{opacity:1;animation:blink .6s steps(2) 3}
.p5 .np-spent{opacity:0;animation:none}
.np-r7{transition:transform 1s cubic-bezier(.5,0,.4,1) .7s,opacity .5s ease 1.3s}
.np-r7 rect{transition:fill .3s}
.p4 .np-r7 rect{fill:#8A3226;opacity:1}
.p4 .np-r7{transform:translateY(-250px);opacity:0}
.np-r7n{transform:translateY(-250px);opacity:0;transition:transform 1.1s cubic-bezier(.3,0,.2,1),opacity .4s}
.p5 .np-r7n{transform:translateY(0);opacity:1}

/* 3. городская сеть */
.gr-v{font:600 19px var(--hj);fill:var(--ink)}
.gr-src{fill:var(--em)}
.gr-warn{font:700 12.5px var(--nar);letter-spacing:.16em;fill:var(--red);opacity:0}
.p4 .gr-warn{opacity:1;animation:blink .5s steps(2) infinite}
.p6 .gr-warn{opacity:0;animation:none}
.gr-d1{font:600 21px var(--hj);fill:#44504A;transition:fill .2s}
.gr-d2{font:600 16px var(--hj);fill:var(--ink4)}
.p2 .gr-d1{fill:var(--em)} .p2 .gr-d2{fill:var(--ink3)}
.p5 .gr-d1{fill:var(--red)}
.p7 .gr-d1{fill:var(--em)}
.gr-lamp{transition:fill .15s,stroke .15s}
.p2 .gr-lamp{fill:var(--em);stroke:#9BF0BF}
.p5 .gr-lamp{fill:#2A3731;stroke:#48565E}
.p6 .gr-lamp{fill:var(--amb);stroke:#FBE68A}
.p7 .gr-lamp{fill:var(--em);stroke:#9BF0BF}
.gr-fan{transform-origin:597px 358px;animation:spin .42s linear infinite;animation-play-state:paused}
.p2 .gr-fan{animation-play-state:running}
.p5 .gr-fan{animation-play-state:paused}
.p7 .gr-fan{animation-play-state:running}
.gr-flow{stroke-dasharray:8 10;opacity:0;animation:flow .4s linear infinite}
.p2 .gr-flow{opacity:1} .p5 .gr-flow{opacity:0} .p7 .gr-flow{opacity:1}
.gr-spark{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.p2 .gr-spark{animation:spark .55s ease-out}
@keyframes spark{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.4)}}
.gr-dark{opacity:0;transition:opacity .25s}
.p5 .gr-dark{opacity:.66} .p6 .gr-dark{opacity:.3} .p7 .gr-dark{opacity:0;transition:opacity .6s}
.gr-bo{font:400 70px var(--stencil);letter-spacing:.08em;fill:var(--red);opacity:0}
.gr-bo2{font:16px var(--pt);fill:var(--ink2);opacity:0}
.p5 .gr-bo,.p5 .gr-bo2{opacity:1;animation:bo .9s steps(1) 1}
.p7 .gr-bo,.p7 .gr-bo2{opacity:0;animation:none;transition:opacity .4s}
@keyframes bo{0%{opacity:1}12%{opacity:.1}24%{opacity:1}36%{opacity:.3}48%{opacity:1}}

/* 4. денежные принтеры */
.pr-head{opacity:0}
.p1 .pr-head{opacity:1}
.p2 .pr-head{opacity:0;transition:opacity .3s}
.pr-wet{transition:opacity 1.7s ease}
.p2 .pr-wet{opacity:0}
.pr-heat path{stroke:var(--amb);stroke-width:2;fill:none;opacity:0}
.p2 .pr-heat path{animation:heat 1.1s ease-in-out infinite}
.p2 .pr-heat path:nth-child(2){animation-delay:.3s}
.p2 .pr-heat path:nth-child(3){animation-delay:.6s}
.p2 .pr-heat path:nth-child(4){animation-delay:.15s}
.p3 .pr-heat path{animation:none;opacity:0}
@keyframes heat{0%{opacity:0;transform:translateY(0)}40%{opacity:.8}100%{opacity:0;transform:translateY(-26px)}}
.pr-cut{opacity:0;transition:opacity .2s ease .75s}
.p3 .pr-cut{opacity:1}
.p4 .pr-cut{opacity:0;transition-delay:0s}
.pr-bg{transition:opacity .3s ease 1s}
.p3 .pr-bg{opacity:0}
.pr-note{transition:transform .55s cubic-bezier(.3,1.4,.5,1) 1s}
.p3 .pr-n0{transform:translate(-8px,-6px)} .p3 .pr-n1{transform:translate(8px,-6px)}
.p3 .pr-n2{transform:translate(-8px,0)} .p3 .pr-n3{transform:translate(8px,0)}
.p3 .pr-n4{transform:translate(-8px,6px)} .p3 .pr-n5{transform:translate(8px,6px)}
.p4 .pr-note{transition:transform .6s cubic-bezier(.6,0,.3,1) 0s}
.p4 .pr-n0{transform:translate(61px,57px)} .p4 .pr-n1{transform:translate(-61px,55.5px)}
.p4 .pr-n2{transform:translate(61px,-1.5px)} .p4 .pr-n3{transform:translate(-61px,-3px)}
.p4 .pr-n4{transform:translate(61px,-61.5px)} .p4 .pr-n5{transform:translate(-61px,-63px)}
.pr-band{opacity:0;transition:opacity .25s ease .55s}
.p4 .pr-band{opacity:1}
.pr-sheet{transform-origin:365px 144px;transition:transform .75s cubic-bezier(.6,0,.9,.5),opacity .3s ease .5s}
.p4b .pr-sheet{transform:translate(296px,228px) scale(.14);opacity:0}
.pr-den{font:600 23px var(--hj);fill:#1E6B43}
.pr-bn{font:700 8px var(--nar);letter-spacing:.24em;fill:#2F7A52}
.pr-ser{font:600 10px var(--hj);fill:#B03A2E;letter-spacing:.04em}
.pr-big{font:600 32px var(--hj);fill:var(--ink)}
.pr-disp{font:600 14px var(--hj);fill:var(--em);letter-spacing:.06em}
.pr-pc{font:600 15px var(--hj);fill:var(--ink2)}
.pr-led{transition:fill .2s}
.p1:not(.p2) .pr-P40 .pr-led,.p2:not(.p3) .pr-D20 .pr-led,.p3 .pr-C15 .pr-led{fill:var(--em);animation:blink .5s steps(2) infinite}
.p5 .pr-C15 .pr-led{fill:var(--amb)}
.pr-roll{transform-origin:70px 252px}
.p1:not(.p2) .pr-roll{animation:spin 1.1s linear infinite}
.pr-carr{transition:none}
.p1:not(.p2) .pr-carr{animation:carr .55s ease-in-out infinite alternate}
@keyframes carr{to{transform:translateX(136px)}}
.pr-stack{opacity:.35;transition:opacity .4s ease 2.2s}
.p1 .pr-stack{opacity:1}
.pr-rol{transform-box:fill-box;transform-origin:50% 50%}
.p2:not(.p3) .pr-rol{animation:spin .7s linear infinite}
.pr-dryh{opacity:0}
.p2:not(.p3) .pr-dryh{animation:heat 1s ease-in-out infinite}
.p3 .pr-blade{animation:chop .3s ease-in-out 3}
@keyframes chop{50%{transform:translateY(30px)}}
.pr-b8{opacity:0;transition:opacity .3s ease .7s}
.p4b .pr-b8{opacity:1}
.pr-err{font:700 12.5px var(--nar);letter-spacing:.12em;fill:var(--amb);opacity:0}
.p5 .pr-err{opacity:1;animation:blink .7s steps(2) infinite}
.pr-cb{transition:fill .3s}
.p5 .pr-c3 .pr-cb{fill:var(--red)}
.p5 .pr-c3 .pr-pc{fill:var(--red)}

/* 5. телефон и казино */
.ph-time{font:600 14px var(--hj);fill:#DDE6E1}
.app-l{font:700 9.5px var(--nar);fill:#DDE6E1;letter-spacing:.01em}
.scr-home,.scr-cas{transition:transform .45s var(--ease),opacity .35s ease}
.scr-cas{transform:translateX(232px)}
.p2 .scr-cas{transform:translateX(0)} .p2 .scr-home{transform:translateX(-90px);opacity:0}
.p8 .scr-cas{transform:translateX(232px)} .p8 .scr-home{transform:translateX(0);opacity:1}
.tap-r{fill:none;stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.tap-d{fill:#fff;opacity:0}
.tapA .tA .tap-r,.tapB .tB .tap-r,.tapC .tC .tap-r{animation:tapr .55s ease-out}
.tapA .tA .tap-d,.tapB .tB .tap-d,.tapC .tC .tap-d{animation:tapd .55s ease-out}
@keyframes tapr{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
@keyframes tapd{0%{opacity:.6}100%{opacity:0}}
.cs-h{font:700 16px var(--nar);letter-spacing:.14em;fill:var(--ink)}
.cs-bal{font:600 16px var(--hj);fill:var(--em)}
.cs-tab{font:700 10.5px var(--nar);letter-spacing:.06em;fill:var(--ink2)}
.cs-tab.on{fill:#06110B}
.cr-m{font:600 46px var(--hj);fill:var(--ink)}
.cr-s{font:700 10px var(--nar);letter-spacing:.16em;fill:var(--ink3)}
.p3 .cr-s{fill:var(--em)} .p4 .cr-m,.p4 .cr-s{fill:var(--red)}
.cs-hi{font:600 12px var(--hj)}
.cs-l{font:700 11px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.cs-bet{font:600 16px var(--hj);fill:var(--ink)}
.cr-btn rect{fill:var(--em);transition:fill .2s}
.cr-bt{font:700 14px var(--nar);letter-spacing:.1em;fill:#06110B}
.p3 .cr-btn rect{fill:#0E2A1B;stroke:var(--em)} .p3 .cr-bt{fill:var(--em)}
.p4 .cr-line{stroke:var(--red)} .p4 .cr-fill{fill:var(--red)} .p4 .cr-dot{fill:var(--red)}
.cr-win{opacity:0;transform:translateY(-16px);transition:opacity .3s,transform .4s var(--ease)}
.p3 .cr-win{opacity:1;transform:translateY(0)} .p5 .cr-win{opacity:0}
.cs-wt{font:700 11px var(--nar);letter-spacing:.12em;fill:var(--em)}
.cs-wv{font:600 16px var(--hj);fill:var(--ink)}
.toast{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .6s var(--ease)}
.p1 .ta1,.p5 .ta2,.p6 .ta3,.p7 .ta4{opacity:1;transform:translateY(0)}
.ts-t{font:700 11.5px var(--nar);letter-spacing:.14em;fill:var(--ink)}
.ts-w{font:11px var(--pt);fill:var(--ink3)}
.ts-x{font:14px var(--pt);fill:var(--ink2)}

/* 6. банкомат */
.at-bn{font:700 15px var(--nar);letter-spacing:.12em;fill:var(--ink)}
.as,.ts{opacity:0;transition:opacity .22s ease}
.as.on,.ts.on{opacity:1}
.as-s{font:700 10.5px var(--nar);letter-spacing:.14em;fill:#8FA89B}
.as-b{font:700 14px var(--nar);letter-spacing:.1em;fill:#E3F7EA}
.as-o{font:600 16px var(--hj);fill:#E3F7EA}
.as-o.as-sel{fill:var(--em)}
.pd{opacity:0} .pd.on{opacity:1}
.as-spin{transform-origin:186px 222px;animation:spin .8s linear infinite}
.k-d{font:700 15px var(--nar);fill:#101412}
.k-f{font:700 10px var(--nar);letter-spacing:.06em;fill:#0A0C0B}
.key{transition:transform .08s}
.key.kp{transform:translateY(2px)}
.key.kp rect{stroke:var(--em);stroke-width:2.5}
.sk.kp{fill:var(--em)}
.at-card{transform-origin:398px 64px;transition:transform 1s cubic-bezier(.6,0,.3,1),opacity .25s ease .85s}
.p1 .at-card{transform:translate(-158px,350px) scale(.19);opacity:0}
.p7 .at-card{transform:none;opacity:1;transition:transform .9s cubic-bezier(.3,0,.2,1) .15s,opacity .2s ease}
.p7 .at-cl{opacity:1}
.at-lamp{animation:blink .6s steps(2) infinite}
.p1 .at-lamp{animation:none;opacity:.25}
.p7 .at-lamp{animation:blink .4s steps(2) infinite;opacity:1}
.at-edge{opacity:0;transform:translateY(14px);transition:opacity .2s,transform .5s var(--ease)}
.p7 .at-edge{opacity:1;transform:translateY(0)}
.at-shut{transform-box:fill-box;transform-origin:50% 0;transition:transform .5s ease}
.p5 .at-shut{transform:scaleY(0)}
.at-cash{transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.p5 .at-cash{transform:translateY(36px)}
.at-den{font:600 13px var(--hj);fill:#1E6B43}
.rc-h{font:700 12px var(--nar);letter-spacing:.12em;fill:#1A1D1B}
.rc-t{font:600 14px var(--hj);fill:#2A2E2B}

/* 7. оплата картой */
.ts-l{font:700 11px var(--nar);letter-spacing:.14em;fill:#9FB3A8}
.ts-sum{font:600 32px var(--hj);fill:#F2F5F3}
.ts-ok{font:700 14px var(--nar);letter-spacing:.18em;fill:var(--em)}
.ts-bar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.p2 .ts-bar{transform:scaleX(1);transition:transform 1.2s linear}
.tp{fill:none;stroke:#56645D;stroke-width:1.5} .tp.on{fill:var(--em);stroke:var(--em)}
.tm-brand{font:700 10px var(--nar);letter-spacing:.24em;fill:var(--ink3)}
.tm-wave path{opacity:0}
.p2 .tm-wave path{animation:wave 1s ease-out infinite}
.p2 .tm-wave path:nth-child(2){animation-delay:.15s} .p2 .tm-wave path:nth-child(3){animation-delay:.3s}
.p3 .tm-wave path{animation:none;opacity:0}
@keyframes wave{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
.tm-cf{transform-origin:418px 108px;transition:transform .8s cubic-bezier(.3,0,.2,1),opacity .3s ease}
.p1 .tm-cf{transform:translate(-262px,-52px) rotate(-9deg) scale(.78)}
.p3 .tm-cf{transform:none}
.p4 .tm-cf{transform:translate(-236px,300px) rotate(90deg) scale(.36);opacity:0;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .25s ease .5s}
.p7 .tm-cf{transform:none;opacity:1}
.tm-cb{opacity:0;transform:translateY(62px);transition:transform .6s ease .25s,opacity .2s ease .25s}
.p4 .tm-cb{opacity:1;transform:translateY(0)}
.p6 .tm-cb{opacity:0;transform:translateY(62px);transition-delay:.5s}
.tm-bill{transition:opacity .4s}
.p4 .tm-bill{opacity:0}
.tr-rail{fill:#22302A;transition:fill .3s}
.tr rect:first-child{transition:stroke .3s}
.tr.on .tr-rail{fill:var(--em)} .tr.on rect:first-child{stroke:#2E5A42}
.tr-ic{color:#56645D;transition:color .3s} .tr.on .tr-ic{color:var(--em)}
.tr-t{font:700 13px var(--nar);letter-spacing:.14em;fill:var(--ink3);transition:fill .3s}
.tr-x{font:13.5px var(--pt);fill:var(--ink4);transition:fill .3s}
.tr.on .tr-t{fill:var(--ink)} .tr.on .tr-x{fill:var(--ink2)}

/* 8. заправки */
.fu-az{font:400 30px var(--stencil);fill:var(--ink)}
.fu-sum{font:600 42px var(--hj);fill:var(--em)}
.fu-l{font:600 34px var(--hj);fill:var(--ink)}
.fu-p{font:600 17px var(--hj);fill:var(--ink2)}
.fg rect{transition:fill .2s,stroke .2s}
.p2 .fg1 rect{fill:var(--em);stroke:var(--em)} .p2 .fg1 text{fill:#06110B}
.fg-s{font:700 9px var(--nar);letter-spacing:.1em;fill:var(--ink3)}
.fg-n{font:600 17px var(--hj);fill:var(--ink)}
.fu-paid{font:700 12px var(--nar);letter-spacing:.16em;fill:var(--em);opacity:0;transition:opacity .3s}
.p3 .fu-paid{opacity:1}
.fu-flow{stroke-dasharray:6 8;opacity:0}
.p2 .fu-flow{opacity:1;animation:flow .35s linear infinite} .p3 .fu-flow{opacity:0}
.fu-st{font:700 11.5px var(--nar);letter-spacing:.14em;fill:var(--amb)}
.p2 .fu-st{fill:var(--em)}
.fu-ef{font:600 20px var(--hj);fill:var(--ink2)}
.fu-ico{color:var(--ink3)}
.fu-low{fill:#2A3731}
.p1 .fu-low{fill:var(--amb);animation:blink .5s steps(2) infinite}
.p3 .fu-low{fill:#2A3731;animation:none}
.fu-tank{font:600 17px var(--hj);fill:var(--ink)}
.fu-truck{transition:transform 1.9s cubic-bezier(.45,0,.3,1)}
.p4 .fu-truck{transform:translateX(206px)}
.fu-run{font:700 11.5px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.p5 .fu-run{fill:var(--em)}
.at-cl{transition:opacity .3s} .p1 .at-cl{opacity:0}
.at-rl{opacity:0;transition:opacity .3s} .p6 .at-rl{opacity:1}

/* 9. Синуслуги */
.gv-s{opacity:0;transform:translateX(24px);transition:opacity .3s ease,transform .45s var(--ease)}
.gv-s.on{opacity:1;transform:translateX(0)}
.gv-h{font:700 20px var(--nar);letter-spacing:.12em;fill:#fff}
.gv-hs{font:11px var(--pt);fill:#C9D8F2}
.gv-ht{font:700 15px var(--nar);letter-spacing:.12em;fill:#fff}
.gv-un{font:700 13px var(--pt);fill:var(--ink)}
.gv-ud{font:600 12px var(--hj);fill:var(--ink3);letter-spacing:.04em}
.gv-tl{font:700 12px var(--nar);letter-spacing:.04em;fill:var(--ink)}
.gv-pp{font:700 8.5px var(--nar);letter-spacing:.14em;fill:#F3E9E0}
.gv-pl{font:700 8.5px var(--nar);letter-spacing:.12em;fill:#7C7668}
.gv-pv{font:700 13px var(--nar);letter-spacing:.06em;fill:#1A1D1B}
.gv-ok{font:700 11px var(--nar);letter-spacing:.12em;fill:#27AE60}
.gv-num{font:600 16px var(--hj);fill:#A83A32;letter-spacing:.06em}
.gv-note{font:700 9.5px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.gv-due{font:600 22px var(--hj);fill:var(--ink)}
.gv-ft{font:700 12px var(--nar);letter-spacing:.08em;fill:var(--ink)}
.gv-fd{font:11px var(--pt);fill:var(--ink3)}
.gv-fs{font:600 20px var(--hj);fill:var(--ink)}
.gv-pb{font:700 12px var(--nar);letter-spacing:.12em;fill:#fff}
.gv-pd{font:700 12px var(--nar);letter-spacing:.12em;fill:var(--em)}
.gv-paid,.gv-vd{opacity:0;transition:opacity .25s}
.p3 .gv-paid,.p5 .gv-vd{opacity:1}
.gv-pay,.gv-vb{transition:opacity .25s}
.p3 .gv-pay,.p5 .gv-vb{opacity:0}
.gv-live{font:700 11px var(--nar);letter-spacing:.14em;fill:#5B8FEA}
.gv-cd{font:600 20px var(--hj);fill:#fff}
.gv-cn{font:700 13px var(--pt);fill:var(--ink)}
.gv-pc{font:600 14px var(--hj);fill:var(--ink2)}
.gc{opacity:.42;transition:opacity .4s}
.gc.on{opacity:1}
.gc-r{fill:#22302A;transition:fill .3s} .gc.on .gc-r{fill:var(--em)}
.gc-l{stroke:#26342D;fill:none;transition:stroke .3s} .gc.on .gc-l{stroke:var(--em)}
.gc-d{fill:#26342D;transition:fill .3s} .gc.on .gc-d{fill:var(--em)}
.gc-t{font:700 13px var(--nar);letter-spacing:.16em;fill:var(--ink)}
.gc-x{font:13.5px var(--pt);fill:var(--ink2)}
.gc-more{opacity:.6}

/* 10. бизнесы */
.bz-h{font:400 21px var(--stencil);letter-spacing:.03em;fill:var(--ink)}
.bz-v{font:15px var(--pt);fill:var(--ink)}
.bz-st{font:700 9.5px var(--nar);letter-spacing:.2em;fill:var(--em)}
.bz-stamp{opacity:0;transform:scale(1.7);transform-origin:286px 250px;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .2s}
.p1 .bz-stamp{opacity:.92;transform:scale(1)}
.bz-n{font:700 13px var(--nar);letter-spacing:.12em;fill:var(--ink2)}
.bz-s{font:700 10.5px var(--nar);letter-spacing:.14em;fill:var(--ink4)}
.bz-r rect,.bz-s,.bz-n,.bz-ic{transition:stroke .3s,fill .3s}
.p2 .bz-r0 rect{stroke:var(--em)} .p2 .bz-r0 .bz-s{fill:var(--em)} .p2 .bz-r0 .bz-n{fill:var(--ink)} .p2 .bz-r0 .bz-ic{stroke:var(--em)}
.bz-inc{font:600 46px var(--hj);fill:var(--em)}
.bz-ft{font:600 14px var(--hj);fill:var(--ink3)}
.bz-fx{font:14px var(--pt);fill:var(--ink2)}
.bz-fp{font:600 14px var(--hj);fill:var(--ink3)}
.bz-fs{font:600 17px var(--hj);fill:var(--em)}
.bz-f.new{animation:newrow .6s var(--ease)}
@keyframes newrow{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* 11. экономика */
.ec-tr{font:600 54px var(--hj);fill:var(--ink)}
.ec-h{fill:var(--em)}
.ec-fl{font:600 22px var(--hj);fill:var(--em)}
.ec-fly{opacity:0}
.ec-fly.go{animation:fly 1.1s ease-out}
@keyframes fly{0%{opacity:0;transform:translateY(10px)}20%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.ec-tx rect{fill:rgba(46,204,113,0);stroke:#2E3F37}
.ec-tt{font:700 10.5px var(--nar);letter-spacing:.1em;fill:var(--ink2)}
.ec-tx.hit rect,.ec-g.hit rect{animation:hit 1s ease-out}
@keyframes hit{0%{fill:rgba(46,204,113,.3);stroke:#2ECC71}100%{fill:rgba(46,204,113,0);stroke:#2E3F37}}
.ec-g rect{fill:#0C1210}
.ec-gn{font:14px var(--pt);fill:var(--ink)}
.ec-gp{font:600 18px var(--hj);fill:var(--ink)}
.ec-gc{font:600 16px var(--hj)}
.ec-gc.up{fill:var(--em)} .ec-gc.dn{fill:var(--red)}
.ec-cd{fill:var(--ink)}
.ec-ax{font:600 13px var(--hj);fill:var(--ink3)}
.ec-dot{animation:blink 1.2s ease-in-out infinite}
.ec-cr{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s var(--ease)}
.p3 .ec-cr{opacity:1;transform:translateY(0)}
.ec-crt{font:700 10.5px var(--nar);letter-spacing:.12em;fill:var(--em)}

/* 12. и это не всё */
.mo{opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .5s var(--ease)}
.mo.on{opacity:1;transform:translateX(0)}
.mo-r{fill:#1E2A25;transition:fill .3s}
.mo.hl .mo-r{fill:var(--em)}
.mo-c{font:600 15px var(--hj);fill:var(--em)}
.mo-t{font:700 13px var(--nar);letter-spacing:.1em;fill:var(--ink2);transition:fill .3s}
.mo-d{font:13px var(--pt);fill:var(--ink3);transition:fill .3s}
.mo.hl .mo-t{fill:#fff} .mo.hl .mo-d{fill:var(--ink2)}
.rs *{transition:none!important}
/* банковская карта: размер шрифта задан атрибутом, поэтому без сокращения font */
.cd-bank{font-family:var(--nar);font-weight:700;letter-spacing:.12em;fill:#E8EEEA}
.cd-num{font-family:var(--hj);font-weight:600;letter-spacing:.08em;fill:#C9D3CD}
.cd-name{font-family:var(--nar);font-weight:700;letter-spacing:.16em;fill:#8E9A94}
.cd-exp{font-family:var(--hj);font-weight:600;fill:#8E9A94}