/* =====================================================================
   Набор живых 3D-иконок (CSS 3D) для всего сайта.
   Размер — от родителя; единицы глубины — cqw (доли ширины иконки).
   Вне экрана анимации ставятся на паузу (класс .i3-off из js/decor.js).
   ===================================================================== */
.i3{position:relative;width:72%;aspect-ratio:1;container-type:inline-size;perspective:320px;pointer-events:none}
.i3 .w{position:absolute;inset:0;transform-style:preserve-3d}
.i3 .w *{position:absolute;box-sizing:border-box;transform-style:preserve-3d}
.i3-off *, .ic.i3-off *, [data-live].i3-off, [data-live].i3-off *{animation-play-state:paused !important}
.s16-rub{aspect-ratio:1;display:grid;place-items:center}
.s16-rub .i3{width:100%}
.s22-ico .i3{width:auto;height:74%}
.s16-hub-ico .i3{width:auto;height:84%}

/* общие материалы */
.i3 .k-ln{border:max(1.5px,3.2cqw) solid #121314}
.i3 .coral{background:linear-gradient(150deg,#ffa49b 0%,#f7766c 50%,#d9564d 100%)}
.i3 .ball{border-radius:50%;background:radial-gradient(circle at 32% 28%, #ffd0ca 0%, #f98b81 22%, #f7766c 45%, #d9564d 78%, #b9443c 100%)}
.i3 .glass{background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.95);box-shadow:0 2cqw 6cqw rgba(30,70,90,.16)}

/* общие движения (спокойные) */
@keyframes i3sway{0%,100%{transform:rotateY(-20deg) rotateX(10deg)}50%{transform:rotateY(16deg) rotateX(4deg)}}
@keyframes i3spinZ{to{transform:rotateZ(360deg)}}
@keyframes i3bob{0%,100%{translate:0 0}50%{translate:0 -6%}}

/* ---------- календарь: листок перелистывается ---------- */
.i3-cal .w{animation:i3sway 9s ease-in-out infinite}
.i3-cal .pg{left:8%;top:16%;width:84%;height:78%;border-radius:16%;background:#fff;box-shadow:0 3cqw 8cqw rgba(30,70,90,.18)}
.i3-cal .th{left:8%;top:16%;width:84%;height:78%;border-radius:16%;background:#c9d4d9;transform:translateZ(-5cqw)}
.i3-cal .top{left:8%;top:16%;width:84%;height:24%;border-radius:16% 16% 0 0;transform:translateZ(1cqw)}
.i3-cal .rg{top:6%;width:9%;height:20%;border-radius:5cqw;background:#121314;transform:translateZ(3cqw)}
.i3-cal .r1{left:28%}.i3-cal .r2{left:63%}
.i3-cal .gd,.i3-cal .leaf .gd{left:20%;top:50%;width:60%;height:34%;
  background:radial-gradient(circle, #121314 34%, transparent 38%) 0 0/33.33% 50%;transform:translateZ(1cqw)}
.i3-cal .gd .on{left:33.33%;top:50%;width:33.33%;height:50%;border-radius:50%;background:radial-gradient(circle,#f7766c 40%,transparent 44%)}
.i3-cal .leaf{left:8%;top:40%;width:84%;height:54%;border-radius:0 0 16% 16%;background:#fff;border-top:1px solid #e3e9ec;
  transform-origin:50% 0;transform:translateZ(2cqw);animation:i3leaf 7s ease-in-out infinite;backface-visibility:hidden}
.i3-cal .leaf .gd{top:18%}
@keyframes i3leaf{0%,55%{transform:translateZ(2cqw) rotateX(0);opacity:1}75%{transform:translateZ(2cqw) rotateX(170deg);opacity:1}76%,85%{transform:translateZ(2cqw) rotateX(0);opacity:0}100%{opacity:1}}

/* ---------- мишень: прилетает дротик ---------- */
.i3-tgt .w{transform:rotateX(48deg) rotateZ(-8deg)}
.i3-tgt .dk{border-radius:50%}
.i3-tgt .d1{inset:4%;background:#fff;box-shadow:0 0 0 max(1.5px,3cqw) #121314 inset, 0 3cqw 6cqw rgba(30,70,90,.2)}
.i3-tgt .d0{inset:4%;border-radius:50%;background:#c9d4d9;transform:translateZ(-4cqw)}
.i3-tgt .d2{inset:22%;background:#fff;box-shadow:0 0 0 max(1.5px,3cqw) #121314 inset;transform:translateZ(2cqw)}
.i3-tgt .d3{inset:37%;transform:translateZ(4cqw)}
.i3-tgt .hit{inset:37%;border-radius:50%;border:max(1.5px,2.6cqw) solid #f7766c;opacity:0;transform:translateZ(5cqw);animation:i3hit 6s ease-out infinite}
.i3-tgt .dart{left:48.5%;top:50%;width:3cqw;height:46cqw;margin-top:-46cqw;transform-origin:50% 100%;animation:i3dart 6s cubic-bezier(.2,.8,.3,1) infinite}
.i3-tgt .dart .sh{inset:0;border-radius:2cqw;background:linear-gradient(90deg,#3a3d40,#0b0b0c)}
.i3-tgt .dart .fl{left:-5cqw;top:-2cqw;width:13cqw;height:14cqw;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}
.i3-tgt .dart .fl2{transform:rotateY(90deg)}
@keyframes i3dart{
  0%{transform:translateZ(60cqw) rotateX(-90deg);opacity:0}
  8%{opacity:1}
  22%{transform:translateZ(4cqw) rotateX(-90deg)}
  25%{transform:translateZ(4cqw) rotateX(-84deg)}
  28%{transform:translateZ(4cqw) rotateX(-94deg)}
  31%,82%{transform:translateZ(4cqw) rotateX(-90deg);opacity:1}
  92%,100%{transform:translateZ(4cqw) rotateX(-90deg);opacity:0}}
@keyframes i3hit{0%,21%{opacity:0;scale:1}24%{opacity:.9;scale:1}45%,100%{opacity:0;scale:2.4}}

/* ---------- гео-метка: подпрыгивает над картой ---------- */
.i3-pin .w{animation:i3sway 10s ease-in-out infinite}
.i3-pin .gnd{left:20%;top:76%;width:60%;height:18%;border-radius:50%;background:radial-gradient(closest-side, rgba(20,50,60,.32), rgba(20,50,60,0));animation:i3shadow 3.2s ease-in-out infinite}
.i3-pin .pulse{left:24%;top:78%;width:52%;height:14%;border-radius:50%;border:max(1.5px,2.4cqw) solid #f7766c;opacity:0;animation:i3pulse 3.2s ease-out infinite}
.i3-pin .pin{left:28%;top:4%;width:44%;height:76%;animation:i3hop 3.2s ease-in-out infinite;transform:translateZ(4cqw)}
.i3-pin .head{left:0;top:0;width:100%;height:56%}
.i3-pin .tip{left:16%;top:40%;width:68%;height:60%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(90deg,#f7766c,#c9493f)}
.i3-pin .dot{left:32%;top:15%;width:36%;height:26%;border-radius:50%;background:#fff;transform:translateZ(1cqw);box-shadow:inset 0 1cqw 2cqw rgba(0,0,0,.12)}
@keyframes i3hop{0%,100%{translate:0 0;scale:1 1}40%{translate:0 -12%;scale:1 1}55%{translate:0 0;scale:1.06 .94}65%{scale:1 1}}
@keyframes i3shadow{0%,100%{scale:1;opacity:1}40%{scale:.7;opacity:.6}}
@keyframes i3pulse{0%,52%{opacity:0;scale:.5}58%{opacity:.85;scale:.6}100%{opacity:0;scale:1.5}}

/* ---------- монета ₽: переворачивается ---------- */
.i3-coin .w{transform:rotateX(12deg)}
.i3-coin .cn{inset:6%;animation:i3flip 5.5s cubic-bezier(.5,0,.3,1) infinite}
.i3-coin .cn i{position:absolute;inset:0;border-radius:50%;background:#c9493f}
.i3-coin .cn i:nth-child(1){transform:translateZ(-4cqw)}
.i3-coin .cn i:nth-child(2){transform:translateZ(-2.6cqw);background:#d4554b}
.i3-coin .cn i:nth-child(3){transform:translateZ(-1.3cqw);background:#de5f55}
.i3-coin .cn .f{transform:translateZ(0);display:grid;place-items:center;font:800 48cqw/1 var(--font-head);color:#fff;
  background:radial-gradient(circle at 32% 28%, #ffc1ba 0%, #f7766c 50%, #d9564d 100%);box-shadow:inset 0 0 0 3cqw rgba(255,255,255,.35)}
.i3-coin .plus{right:-6%;top:-6%;width:34%;height:34%;border-radius:50%;background:#121314;color:#fff;display:grid;place-items:center;font:700 24cqw/1 var(--font-head);
  transform:translateZ(8cqw);animation:i3pop 5.5s ease-in-out infinite}
@keyframes i3flip{0%,40%{transform:rotateY(0)}70%,100%{transform:rotateY(360deg)}}
@keyframes i3pop{0%,62%,100%{scale:1}70%{scale:1.3}78%{scale:.95}}

/* ---------- ноутбук: на экране растут столбики ---------- */
.i3-lap .w{animation:i3sway 9s ease-in-out infinite}
.i3-lap .base{left:2%;top:68%;width:96%;height:30%;border-radius:8%;background:linear-gradient(#eef2f4,#b9c3c9);transform-origin:50% 0;transform:rotateX(74deg);box-shadow:0 2cqw 4cqw rgba(0,0,0,.15)}
.i3-lap .lid{left:10%;top:6%;width:80%;height:62%;border-radius:8% 8% 2% 2%;background:#121314;transform-origin:50% 100%;animation:i3lid 6s ease-in-out infinite}
.i3-lap .scr{inset:7% 6% 9%;border-radius:3%;background:#fff;transform:translateZ(.5cqw);overflow:hidden}
.i3-lap .scr i{bottom:10%;width:16%;border-radius:2cqw 2cqw 0 0;background:linear-gradient(#ffa49b,#f7766c);transform-origin:50% 100%;animation:i3bar 3.6s ease-in-out infinite}
.i3-lap .scr i:nth-child(1){left:14%;height:36%}
.i3-lap .scr i:nth-child(2){left:42%;height:56%;animation-delay:.3s;background:linear-gradient(#5fb2bf,#3f8f9c)}
.i3-lap .scr i:nth-child(3){left:70%;height:76%;animation-delay:.6s}
@keyframes i3lid{0%,100%{transform:rotateX(-4deg)}50%{transform:rotateX(6deg)}}
@keyframes i3bar{0%,100%{scale:1 .45}50%{scale:1 1}}

/* ---------- монитор: пульсирует «play» ---------- */
.i3-mon .w{animation:i3sway 9s ease-in-out infinite}
.i3-mon .scr{left:4%;top:10%;width:92%;height:62%;border-radius:12%;background:#fff;box-shadow:0 0 0 max(1.5px,3.4cqw) #121314 inset, 0 3cqw 6cqw rgba(30,70,90,.18)}
.i3-mon .th{left:4%;top:10%;width:92%;height:62%;border-radius:12%;background:#c9d4d9;transform:translateZ(-5cqw)}
.i3-mon .play{left:38%;top:24%;width:28%;height:34%;clip-path:polygon(0 0,100% 50%,0 100%);transform:translateZ(4cqw);animation:i3beat 2.6s ease-in-out infinite}
.i3-mon .stand{left:44%;top:72%;width:12%;height:14%;background:#121314}
.i3-mon .foot{left:26%;top:84%;width:48%;height:9%;border-radius:4cqw;background:#121314}
@keyframes i3beat{0%,100%{scale:1}15%{scale:1.22}30%{scale:1}45%{scale:1.12}60%{scale:1}}

/* ---------- мини-диаграмма (аудитории Mtarget) ---------- */
.i3-pie .w{transform:rotateX(50deg) rotateZ(-18deg)}
.i3-pie .spin{inset:0;animation:i3spinZ 22s linear infinite}
.i3-pie .sg{inset:4%;animation:i3popseg 6s ease-in-out infinite}
.i3-pie .sg i{position:absolute;inset:0;border-radius:50%}
.i3-pie .sg i:nth-child(1){transform:translateZ(0);filter:brightness(.75)}
.i3-pie .sg i:nth-child(2){transform:translateZ(5cqw)}
.i3-pie .s1 i{background:conic-gradient(#f7766c 0deg 140deg, transparent 140deg)}
.i3-pie .s1{--dx:6cqw;--dy:-3cqw}
.i3-pie .s2 i{background:conic-gradient(transparent 0deg 144deg, #121314 144deg 250deg, transparent 250deg)}
.i3-pie .s2{--dx:-1cqw;--dy:7cqw;animation-delay:-2s}
.i3-pie .s3 i{background:conic-gradient(transparent 0deg 254deg, #8fcfd8 254deg 356deg, transparent 356deg)}
.i3-pie .s3{--dx:-6cqw;--dy:-3cqw;animation-delay:-4s}
@keyframes i3popseg{0%,55%,100%{translate:0 0 0}20%,35%{translate:var(--dx) var(--dy) 4cqw}}

/* ---------- динамик: расходятся волны ---------- */
.i3-spk .w{animation:i3sway 9s ease-in-out infinite}
.i3-spk .bx{left:10%;top:36%;width:20%;height:28%;border-radius:3cqw;background:#121314}
.i3-spk .cone{left:24%;top:16%;width:30%;height:68%;clip-path:polygon(0 30%,100% 0,100% 100%,0 70%);transform:translateZ(1cqw)}
.i3-spk .wv{left:40%;top:25%;width:40%;height:50%;border-radius:50%;border:max(1.5px,3.6cqw) solid transparent;border-right-color:#121314;opacity:0;animation:i3wave 2.4s ease-out infinite}
.i3-spk .w2{animation-delay:.8s}.i3-spk .w3{animation-delay:1.6s}
@keyframes i3wave{0%{opacity:0;scale:.5;translate:-10% 0}20%{opacity:1}100%{opacity:0;scale:1.25;translate:12% 0}}

/* ---------- документы: верхний лист отъезжает ---------- */
.i3-doc .w{animation:i3sway 9s ease-in-out infinite}
.i3-doc .p{left:18%;top:8%;width:62%;height:82%;border-radius:12%;background:#fff;box-shadow:0 0 0 max(1.5px,3cqw) #121314 inset}
.i3-doc .p1{transform:translateZ(-8cqw) translate(10%,6%);background:#dfe7ea;box-shadow:none}
.i3-doc .p2{transform:translateZ(-4cqw) translate(5%,3%);background:#eef3f5;box-shadow:none}
.i3-doc .p3{animation:i3slide 6s ease-in-out infinite}
.i3-doc .p3 i{left:18%;width:64%;height:7%;border-radius:2cqw;background:#121314}
.i3-doc .p3 i:nth-child(1){top:22%}.i3-doc .p3 i:nth-child(2){top:40%;width:50%}
.i3-doc .p3 i:nth-child(3){top:58%;background:#f7766c;width:40%;transform-origin:0 50%;animation:i3line 6s ease-in-out infinite}
@keyframes i3slide{0%,50%,100%{transform:translateZ(2cqw)}25%{transform:translateZ(10cqw) translate(-14%,-4%) rotateZ(-6deg)}}
@keyframes i3line{0%,10%{scale:0 1}35%,100%{scale:1 1}}

/* ---------- сердце + «10K» (Influence) ---------- */
.i3-heart .w{animation:i3sway 9s ease-in-out infinite}
.i3-heart .ht{left:12%;top:26%;width:56%;height:56%;animation:i3beat 2.2s ease-in-out infinite}
.i3-heart .ht .a,.i3-heart .ht .b{width:60%;height:60%;top:0}
.i3-heart .ht .a{left:0}.i3-heart .ht .b{left:40%}
.i3-heart .ht .c{left:20%;top:20%;width:60%;height:60%;transform:rotateZ(45deg) translate(10%,10%);border-radius:8%;background:linear-gradient(135deg,#f98b81,#d9564d)}
.i3-heart .bub{left:48%;top:4%;width:50%;height:32%;border-radius:30cqw;display:grid;place-items:center;font:700 13cqw/1 var(--font-head);color:#121314;
  transform:translateZ(10cqw);animation:i3bob 3.4s ease-in-out infinite}

/* ---------- фото + плюс (Seeding) ---------- */
.i3-img .w{animation:i3sway 9s ease-in-out infinite}
.i3-img .ph{left:6%;top:14%;width:74%;height:66%;border-radius:12%;overflow:hidden;background:linear-gradient(#cfe8ee,#9fd0da);box-shadow:0 0 0 max(1.5px,3cqw) #121314 inset}
.i3-img .ph .sun{left:58%;top:16%;width:22%;height:30%}
.i3-img .ph .mt{left:0;right:0;bottom:0;height:56%;background:#121314;clip-path:polygon(0 100%,0 60%,30% 10%,52% 55%,68% 30%,100% 80%,100% 100%)}
.i3-img .add{left:62%;top:56%;width:34%;height:34%;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 24cqw/1 var(--font-head);
  transform:translateZ(10cqw);animation:i3turn 4s ease-in-out infinite}
@keyframes i3turn{0%,30%{transform:translateZ(10cqw) rotateY(0)}60%,100%{transform:translateZ(10cqw) rotateY(360deg)}}

/* ---------- чат с галочкой (ORM) ---------- */
.i3-chat .w{animation:i3sway 9s ease-in-out infinite}
.i3-chat .b1{left:4%;top:8%;width:62%;height:46%;border-radius:22% 22% 22% 6%;background:#fff;box-shadow:0 0 0 max(1.5px,3cqw) #121314 inset;transform:translateZ(-4cqw);animation:i3bob 3.6s ease-in-out infinite}
.i3-chat .b1 i{left:18%;height:9%;border-radius:2cqw;background:#121314}
.i3-chat .b1 i:nth-child(1){top:32%;width:60%}.i3-chat .b1 i:nth-child(2){top:56%;width:40%}
.i3-chat .b2{left:34%;top:42%;width:62%;height:46%;border-radius:22% 22% 6% 22%;transform:translateZ(6cqw);animation:i3bob 3.6s ease-in-out -1.8s infinite;box-shadow:0 3cqw 6cqw rgba(220,90,80,.25)}
.i3-chat .ck{left:32%;top:20%;width:34%;height:44%;border:solid #fff;border-width:0 max(2px,5cqw) max(2px,5cqw) 0;transform:rotateZ(40deg);
  clip-path:inset(0 0 100% 0);animation:i3check 3.6s ease-in-out infinite}
@keyframes i3check{0%,15%{clip-path:inset(100% 0 0 0)}45%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}

@media (prefers-reduced-motion:reduce){ .i3 *, .i3 .w{animation:none !important} }