/* H3 sysmap «Один пульт на всю роботу». Лінивий (media=print→all). Рух: transform/opacity.
   .js — скрипт готовий; .on — секція вже була в кадрі (вхідні рухи); .v — зараз у кадрі (петлі). */
.sysmap{position:relative;padding:88px 0 96px;--ps:paused}
.sysmap.v{--ps:running}
.sysmap .so-kicker{margin-bottom:14px}
.sm-g{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(268px,auto);gap:16px;margin-top:8px}
.sm-a{grid-area:1/1/3/3}.sm-s{grid-area:1/3}.sm-b{grid-area:1/4}.sm-d{grid-area:2/3/3/5}
.sm-l{grid-area:3/1/4/3}.sm-i{grid-area:3/3}.sm-n{grid-area:3/4}
.sm-t{z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px 22px;overflow:hidden;transition:box-shadow .3s}
.sm-t::before{opacity:.55;transition:opacity .3s}
.sm-t:hover::before{opacity:1}
.sm-t:hover{box-shadow:var(--so-depth-2)}
.sm-t>.so-mascot{top:12px;right:12px;bottom:auto;width:52px;transform-origin:50% 90%}
.sm-t:has(>.so-mascot) .so-body{padding-right:0}
.sm-t:hover>.so-mascot{animation:smWv .7s var(--so-ease-io) 1}
@keyframes smWv{30%{transform:rotate(-7deg)}65%{transform:rotate(6deg)}}
.sm-o{position:relative;flex:1 1 auto;min-height:84px;margin-bottom:16px;transition:transform .32s var(--so-ease-out)}
.sm-t:hover .sm-o{transform:translateY(-4px)}
.sm-t h3{margin:8px 0 6px;font:italic 350 19px/1.2 var(--serif);color:var(--so-amber-hi)}
.sm-t p{margin:0;font-size:13.5px;line-height:1.5;color:var(--dim)}
.sm-s p{margin-top:8px}
.sm-a>.so-mascot,.sm-l>.so-mascot{top:auto;bottom:20px;width:68px}
.sm-a:has(>.so-mascot) .so-body,.sm-l:has(>.so-mascot) .so-body{padding-right:90px}
/* дроти: під плитками видно лише проміжки */
.sm-w{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.sm-wp{fill:none;stroke:var(--so-violet);stroke-opacity:.5;stroke-width:1}
.sm-wd{fill:#fff}.sm-wh{fill:var(--so-violet-2);opacity:.28}
/* автопілот: тиждень */
.sm-wk{display:flex;flex-direction:column;gap:8px;min-height:230px}
.sm-dn{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 2px;font:500 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink)}
.sm-cl{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr);gap:6px;padding-right:0}
.sm-cl i{position:relative;border-radius:10px;background:var(--so-glass);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
.sm-cl .p::before,.sm-cl .p::after{content:"";position:absolute;inset:3px;border-radius:8px;animation:smIn 9s var(--so-ease-out) var(--d) infinite both;animation-play-state:var(--ps)}
.sm-cl .p::before{background:linear-gradient(90deg,rgba(255,255,255,.22) 0 55%,transparent 55%) 9px 10px/100% 4px no-repeat,rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
.sm-cl .p::after{background:linear-gradient(90deg,rgba(245,166,10,.6) 0 55%,transparent 55%) 9px 10px/100% 4px no-repeat,rgba(245,166,10,.17);box-shadow:0 0 0 1px rgba(245,166,10,.55) inset;animation-name:smAm}
.sm-cl .live::before{background:linear-gradient(90deg,rgba(168,146,255,.7) 0 55%,transparent 55%) 9px 10px/100% 4px no-repeat,rgba(124,92,255,.28);box-shadow:0 0 0 1px rgba(124,92,255,.8) inset;animation-name:smLv}
.sm-cl .live::after{display:none}
@keyframes smLv{0%{opacity:0;transform:translateY(-18px)}6%{opacity:1;transform:none}92%{opacity:1}100%{opacity:0}}
@keyframes smIn{0%{opacity:0;transform:translateY(-18px) scale(.92)}6%{opacity:1;transform:translateY(2px)}9%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes smAm{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
/* стратегія */
.sm-or{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9ccff,var(--so-violet) 55%,#3d2a99);box-shadow:0 0 18px rgba(124,92,255,.4)}
.sm-pl{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:10px;height:62px}
.sm-pl i{width:24px;border-radius:12px;transform-origin:50% 100%;background:linear-gradient(180deg,rgba(124,92,255,.5),rgba(124,92,255,.14));box-shadow:0 0 0 1px rgba(124,92,255,.5) inset}
.sm-pl i:nth-child(1){height:38px}.sm-pl i:nth-child(2){height:62px}.sm-pl i:nth-child(3){height:48px}
/* бренд */
.sm-sh{position:absolute;left:0;top:0;width:min(168px,100%);padding:11px 12px;border-radius:12px;background:var(--so-glass);box-shadow:0 0 0 1px rgba(255,255,255,.09) inset;display:flex;flex-direction:column;gap:7px}
.sm-dt{display:flex;gap:6px}.sm-dt i{width:12px;height:12px;border-radius:50%;background:var(--so-amber)}
.sm-dt i:nth-child(2){background:rgba(124,92,255,.6)}.sm-dt i:nth-child(3){background:#efe6d6}
.sm-sh u{display:block;height:6px;width:86%;border-radius:3px;background:rgba(255,255,255,.28);transform-origin:0 50%;text-decoration:none}
.sm-sh u+u{width:58%}
.sm-sh s{position:relative;display:block;height:6px;width:64%;border-radius:3px;background:rgba(255,255,255,.12);text-decoration:none;transform-origin:0 50%}
.sm-sh s::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--so-violet-2);transform-origin:0 50%}
/* студія */
.sm-d .sm-o{min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.sm-fr{display:flex;justify-content:space-between;align-items:flex-end;flex:1;min-height:0;padding-right:70px}
.sm-fr i{position:relative;height:100%;max-height:126px;aspect-ratio:9/16;border-radius:9px;background:radial-gradient(70% 60% at 50% 55%,rgba(124,92,255,.22),transparent),#1d1814;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;overflow:hidden}
.sm-fr i::before{content:"";position:absolute;inset:0;background:var(--s);animation:smFr .6s var(--so-ease-out) both;animation-delay:calc(var(--k)*.4s + .2s)}
.sm-fr i:nth-child(1){--k:0;--s:radial-gradient(circle at 50% 38%,rgba(245,166,10,.6) 0 15%,transparent 16%),linear-gradient(180deg,#3a2a18,#1d1814)}
.sm-fr i:nth-child(2){--k:1;--s:linear-gradient(rgba(245,166,10,.28),rgba(245,166,10,.28)) 50% 78%/60% 30% no-repeat,radial-gradient(circle at 32% 30%,rgba(255,200,90,.6) 0 9%,transparent 10%),linear-gradient(180deg,#2c2118,#1d1814)}
.sm-fr i:nth-child(3){--k:2;--s:radial-gradient(60% 50% at 30% 90%,rgba(245,166,10,.4),transparent 70%),linear-gradient(180deg,#2a2016,#1d1814)}
.sm-fr i:nth-child(4){--k:3;--s:radial-gradient(circle at 70% 30%,rgba(255,200,90,.6) 0 10%,transparent 11%),linear-gradient(0deg,rgba(245,166,10,.26) 0 28%,transparent 28%),#1d1814}
.sm-fr b{position:absolute;left:5px;top:4px;z-index:1;font:400 8px/1 var(--mono);color:rgba(255,255,255,.55)}
.sm-rb{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.sm-rb i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--so-violet),var(--so-amber));transform-origin:0 50%;animation:smRb 6s var(--so-ease-io) infinite;animation-play-state:var(--ps)}
@keyframes smRb{0%{transform:scaleX(0)}70%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes smFr{from{opacity:0}}
/* вхідні */
.sm-i .sm-o{display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.sm-i u{display:block;height:20px;width:62%;border-radius:12px 12px 12px 4px;background:var(--so-glass);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;text-decoration:none}
.sm-i u+u{width:44%}
.sm-dr{display:flex;align-items:center;justify-content:space-between;align-self:flex-end;width:86%;height:32px;padding:0 8px 0 12px;border-radius:12px 12px 4px 12px;background:rgba(124,92,255,.14);box-shadow:0 0 0 1px rgba(124,92,255,.6) inset}
.sm-dr em{font:500 9px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--so-violet-ink);font-style:normal}
.sm-dr i{width:18px;height:18px;border-radius:50%;background:var(--so-amber)}
/* аналітика */
.sm-n .sm-o svg{position:absolute;inset:34px 0 0;width:100%;height:100%}
.sm-n .gr{stroke:rgba(255,255,255,.08);fill:none}
.sm-n .ln{fill:none;stroke:var(--so-violet-2);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.sm-n .en{fill:var(--so-amber);transform-box:fill-box;transform-origin:center}
/* бібліотека */
.sm-l .sm-o{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-right:0}
.sm-lc{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;padding:10px 12px;border-radius:14px;background:var(--so-glass);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.sm-lc em{font:500 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink);font-style:normal}
.sm-lc i{display:block;margin:6px auto 10px}
.sm-lc .av{width:52px;height:52px;border-radius:50%;border:2px solid rgba(245,166,10,.6);background:radial-gradient(circle,rgba(245,166,10,.3) 0 28%,transparent 30%)}
.sm-lc .rm{width:78px;height:54px;border-radius:5px;background:linear-gradient(180deg,transparent 70%,rgba(255,255,255,.1) 70% 72%,transparent 72%),linear-gradient(rgba(245,166,10,.3),rgba(245,166,10,.3)) 14px 8px/22px 24px no-repeat,rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.sm-lc .pr{width:46px;height:56px;border-radius:7px;background:linear-gradient(rgba(245,166,10,.7),rgba(245,166,10,.7)) 7px 44px/22px 3px no-repeat,rgba(245,166,10,.16);box-shadow:0 0 0 1px rgba(245,166,10,.5) inset}
/* вхід (один раз): елементи ховаються лише коли скрипт готовий і секція ще не була в кадрі */
.sysmap.js:not(.on) :is(.sm-or,.sm-pl i,.sm-sh u,.sm-sh s,.sm-dt i,.sm-i u,.sm-dr,.sm-lc,.sm-n .ln,.sm-n .en){opacity:0}
.sysmap.js:not(.on) .sm-fr i::before{opacity:0}
.sysmap.on .sm-or{animation:smPop .6s var(--so-spring) backwards}
.sysmap.on .sm-pl i{animation:smRs .7s var(--so-spring) backwards;animation-delay:calc(var(--k,0)*70ms + .15s)}
.sysmap.on .sm-pl i:nth-child(2){--k:1}.sysmap.on .sm-pl i:nth-child(3){--k:2}
.sysmap.on .sm-dt i{animation:smPop .5s var(--so-spring) backwards;animation-delay:.2s}
.sysmap.on .sm-dt i:nth-child(2){animation-delay:.28s}.sysmap.on .sm-dt i:nth-child(3){animation-delay:.36s}
.sysmap.on .sm-sh u{animation:smDr .6s var(--so-ease-out) backwards .45s}
.sysmap.on .sm-sh u+u{animation-delay:.6s}
.sysmap.on .sm-sh s{animation:smDr .5s var(--so-ease-out) backwards .8s}
.sysmap.on .sm-sh s::after{animation:smDr .45s var(--so-ease-io) backwards 1.3s}
.sysmap.on .sm-i u{animation:smSl .5s var(--so-ease-out) backwards .2s}
.sysmap.on .sm-i u+u{animation-delay:.45s}
.sysmap.on .sm-dr{animation:smPop .5s var(--so-spring) backwards 1s}
.sysmap.on .sm-dr i{animation:smPop .4s var(--so-spring) backwards 1.5s}
.sysmap.on .sm-lc{animation:smRise .6s var(--so-ease-out) backwards;animation-delay:calc(var(--k,0)*90ms + .1s)}
.sysmap.on .sm-lc:nth-child(2){--k:1}.sysmap.on .sm-lc:nth-child(3){--k:2}
.sysmap.on .sm-n .ln{animation:smLn 1.4s var(--so-ease-io) backwards .2s}
.sysmap.on .sm-n .en{animation:smPop .5s var(--so-spring) backwards 1.5s}
@keyframes smPop{from{opacity:0;transform:scale(.4)}}
@keyframes smRs{from{opacity:0;transform:scaleY(.1)}}
@keyframes smDr{from{opacity:0;transform:scaleX(0)}}
@keyframes smSl{from{opacity:0;transform:translateX(-14px)}}
@keyframes smRise{from{opacity:0;transform:translateY(14px)}}
@keyframes smLn{from{stroke-dashoffset:1;opacity:1}}
@media (max-width:1000px){
  .sm-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-t{grid-area:auto}.sm-a,.sm-d,.sm-l{grid-column:span 2}
  .sm-w{display:none}
}
@media (max-width:600px){
  .sysmap{padding:56px 0 64px}
  .sm-g{grid-template-columns:1fr;grid-auto-rows:auto}
  .sm-a,.sm-d,.sm-l{grid-column:auto}
  .sm-t{min-height:240px}
  .sm-a .sm-o{min-height:240px}
  .sm-fr{padding-right:0;margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .sm-cl .p::before,.sm-cl .p::after,.sm-rb i,.sm-t:hover>.so-mascot{animation:none!important}
  .sm-cl .p::after{opacity:0}
  .sysmap.js:not(.on) :is(.sm-or,.sm-pl i,.sm-sh u,.sm-sh s,.sm-dt i,.sm-i u,.sm-dr,.sm-lc,.sm-n .ln,.sm-n .en){opacity:1}
  .sysmap.on *{animation:none!important}
}