[data-motion^="home3-"] { position: relative; isolation: isolate; }
.home3-scene {
  position: absolute;
  z-index: 1;
  right: max(24px,4vw);
  bottom: 24px;
  width: 278px;
  height: 148px;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: none;
  color: #dce8ee;
  background: rgba(6,20,31,.96);
  border: 1px solid rgba(32,201,195,.42);
  border-radius: 22px;
  box-shadow: 0 5px 5px rgba(4,14,23,.2);
}
.home3-scene,
.home3-scene * { box-sizing: border-box; pointer-events: none; }
[data-motion^="home3-"] > :not(.home3-scene) { position: relative; z-index: 2; }
[data-motion="home3-differential-sum"] .home3-scene,
[data-motion="home3-seismograph-triage"] .home3-scene,
[data-motion="home3-bimetal-tariffs"] .home3-scene,
[data-motion="home3-barycentric-fleet"] .home3-scene,
[data-motion="home3-dialogue-tangram"] .home3-scene { right: auto; left: max(24px,4vw); }

/* 01. Поток сжимается в горловине и расходится без движения всего блока. */
.home3-venturi { background: linear-gradient(145deg,#071522,#123442); }
.home3-duct { position:absolute; inset:23px 18px; border:2px solid #6d8795; clip-path:polygon(0 8%,38% 8%,47% 36%,53% 36%,62% 8%,100% 8%,100% 92%,62% 92%,53% 64%,47% 64%,38% 92%,0 92%); background:rgba(255,255,255,.04); }
.home3-throat { position:absolute; z-index:4; top:51px; left:128px; width:22px; height:46px; border:2px solid #ed724f; border-radius:9px; }
.home3-flow { position:absolute; z-index:3; top:68px; height:5px; background:#20c9c3; border-radius:5px; }
.home3-flow.flow-a { left:28px; width:96px; }
.home3-flow.flow-b { right:28px; width:96px; }
.home3-vane { position:absolute; z-index:5; top:46px; width:4px; height:56px; background:#efbd78; }
.home3-vane.vane-a { left:91px; rotate:11deg; }
.home3-vane.vane-b { right:91px; rotate:-11deg; }
.js [data-motion="home3-venturi-lane"] .flow-a { animation:home3-venturi-in .86s cubic-bezier(.2,.67,.28,1.06) .12s both paused; }
.js [data-motion="home3-venturi-lane"] .flow-b { animation:home3-venturi-out .94s cubic-bezier(.2,.67,.28,1.06) .28s both paused; }
.js [data-motion="home3-venturi-lane"] .home3-throat { animation:home3-venturi-throat .72s steps(7,end) .44s both paused; }
.js [data-motion="home3-venturi-lane"] .home3-vane { animation:home3-venturi-vane .82s cubic-bezier(.18,.7,.3,1.08) .55s both paused; }
@keyframes home3-venturi-in { 0%{translate:-72px 0;scale:.22 1;filter:brightness(.55)} 63%{translate:3px 0;scale:1.06 1;filter:brightness(1.2)} 100%{translate:0;scale:1;filter:none} }
@keyframes home3-venturi-out { 0%{translate:72px 0;clip-path:inset(0 0 0 88%);filter:saturate(.45)} 58%{translate:-2px 0;clip-path:inset(0);filter:saturate(1.2)} 100%{translate:0;clip-path:inset(0);filter:none} }
@keyframes home3-venturi-throat { 0%{scale:1 .25;opacity:.35} 70%{scale:.9 1.1;opacity:1} 100%{scale:1;opacity:1} }
@keyframes home3-venturi-vane { 0%{scale:1 .3;filter:brightness(.55)} 72%{scale:1 1.08;filter:brightness(1.18)} 100%{scale:1;filter:none} }

/* 02. Дифференциал сводит два разных вращения к неподвижному индексу. */
.home3-differential { background:linear-gradient(145deg,#dbe6ea,#8298a5); border-color:rgba(8,30,45,.3); }
.home3-ring { position:absolute; top:17px; left:82px; width:114px; height:114px; border:13px dotted #173448; border-radius:50%; rotate:18deg; }
.home3-gear { position:absolute; z-index:3; top:48px; width:52px; height:52px; border:8px dashed #bd7047; border-radius:50%; }
.home3-gear.gear-a { left:75px; rotate:28deg; }
.home3-gear.gear-b { right:75px; rotate:-24deg; }
.home3-carrier { position:absolute; z-index:4; top:69px; left:58px; width:162px; height:9px; background:#20a8a6; border-radius:8px; rotate:7deg; }
.home3-index { position:absolute; z-index:5; top:9px; left:135px; width:8px; height:27px; background:#f6cf8d; clip-path:polygon(50% 100%,0 0,100% 0); }
.js [data-motion="home3-differential-sum"] .home3-ring { animation:home3-diff-ring .95s cubic-bezier(.2,.64,.27,1.05) .1s both paused; }
.js [data-motion="home3-differential-sum"] .gear-a { animation:home3-diff-gear-a .78s cubic-bezier(.2,.67,.28,1.06) .26s both paused; }
.js [data-motion="home3-differential-sum"] .gear-b { animation:home3-diff-gear-b .88s cubic-bezier(.2,.67,.28,1.06) .34s both paused; }
.js [data-motion="home3-differential-sum"] .home3-carrier { animation:home3-diff-carrier .72s steps(8,end) .58s both paused; }
@keyframes home3-diff-ring { 0%{rotate:-46deg;scale:.82;filter:contrast(.55)} 68%{rotate:22deg;scale:1.04;filter:contrast(1.16)} 100%{rotate:18deg;scale:1;filter:none} }
@keyframes home3-diff-gear-a { 0%{rotate:-102deg;scale:.55} 72%{rotate:34deg;scale:1.07} 100%{rotate:28deg;scale:1} }
@keyframes home3-diff-gear-b { 0%{rotate:88deg;filter:saturate(.4)} 64%{rotate:-29deg;filter:saturate(1.2)} 100%{rotate:-24deg;filter:none} }
@keyframes home3-diff-carrier { 0%{clip-path:inset(0 48%);rotate:-8deg} 70%{clip-path:inset(0);rotate:9deg} 100%{clip-path:inset(0);rotate:7deg} }

/* 03. Четыре голоса сходятся к порогу, затем запирается решение. */
.home3-quorum { background:linear-gradient(155deg,#fff4e9,#d5e9e8); border-color:rgba(10,48,63,.22); }
.home3-vote { position:absolute; z-index:3; width:35px; height:35px; background:#18394b; border:4px solid #20c9c3; clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.home3-vote.vote-a { top:20px; left:35px; }
.home3-vote.vote-b { top:19px; right:35px; }
.home3-vote.vote-c { bottom:27px; left:65px; }
.home3-vote.vote-d { right:65px; bottom:27px; }
.home3-quorum-bar { position:absolute; top:69px; left:49px; width:180px; height:9px; background:#bd7047; border-radius:8px; }
.home3-quorum-lock { position:absolute; z-index:5; top:51px; left:121px; width:36px; height:43px; border:7px solid #102c3c; border-radius:16px 16px 7px 7px; background:#f0c582; }
.js [data-motion="home3-quorum-resolve"] .vote-a { animation:home3-vote-a .74s cubic-bezier(.18,.7,.3,1.1) .12s both paused; }
.js [data-motion="home3-quorum-resolve"] .vote-b { animation:home3-vote-b .82s cubic-bezier(.18,.7,.3,1.1) .22s both paused; }
.js [data-motion="home3-quorum-resolve"] .vote-c { animation:home3-vote-c .9s cubic-bezier(.18,.7,.3,1.1) .32s both paused; }
.js [data-motion="home3-quorum-resolve"] .vote-d { animation:home3-vote-d .98s cubic-bezier(.18,.7,.3,1.1) .42s both paused; }
.js [data-motion="home3-quorum-resolve"] .home3-quorum-bar { animation:home3-quorum-threshold .72s steps(9,end) .5s both paused; }
.js [data-motion="home3-quorum-resolve"] .home3-quorum-lock { animation:home3-quorum-lock .68s cubic-bezier(.2,.65,.27,1.08) .7s both paused; }
@keyframes home3-vote-a { 0%{translate:-38px -24px;rotate:-32deg;opacity:.2} 100%{translate:0;rotate:0;opacity:1} }
@keyframes home3-vote-b { 0%{translate:41px -21px;scale:.45;opacity:.25} 100%{translate:0;scale:1;opacity:1} }
@keyframes home3-vote-c { 0%{translate:-46px 27px;rotate:24deg;filter:saturate(.3)} 100%{translate:0;rotate:0;filter:none} }
@keyframes home3-vote-d { 0%{translate:45px 29px;clip-path:polygon(50% 40%,60% 48%,54% 60%,44% 59%,39% 48%)} 100%{translate:0;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)} }
@keyframes home3-quorum-threshold { 0%{scale:.08 1;filter:brightness(.55)} 100%{scale:1;filter:none} }
@keyframes home3-quorum-lock { 0%{translate:0 -14px;scale:.55;filter:contrast(.5)} 72%{translate:0 2px;scale:1.08;filter:contrast(1.18)} 100%{translate:0;scale:1;filter:none} }

/* 04. Самописец фиксирует три разных сигнала на бумаге. */
.home3-seismograph { background:repeating-linear-gradient(0deg,#132a39 0 11px,#193747 12px 13px); }
.home3-paper { position:absolute; inset:16px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 19px); border:1px solid #6d8795; }
.home3-trace { position:absolute; z-index:3; left:29px; right:29px; height:3px; background:#20c9c3; clip-path:polygon(0 50%,12% 50%,17% 0,22% 100%,28% 50%,48% 50%,53% 12%,59% 87%,65% 50%,100% 50%); }
.home3-trace.trace-a { top:42px; }
.home3-trace.trace-b { top:73px; transform:scaleY(-1); background:#efbd78; }
.home3-trace.trace-c { top:104px; background:#ed724f; }
.home3-needle { position:absolute; z-index:5; top:21px; right:44px; width:4px; height:92px; background:#dce8ee; transform-origin:50% 8%; rotate:8deg; }
.home3-marker { position:absolute; z-index:6; right:31px; bottom:14px; width:30px; height:7px; background:#20c9c3; }
.js [data-motion="home3-seismograph-triage"] .home3-paper { animation:home3-seismo-paper .9s linear .1s both paused; }
.js [data-motion="home3-seismograph-triage"] .trace-a { animation:home3-seismo-trace-a .78s steps(10,end) .2s both paused; }
.js [data-motion="home3-seismograph-triage"] .trace-b { animation:home3-seismo-trace-b .88s steps(12,end) .34s both paused; }
.js [data-motion="home3-seismograph-triage"] .trace-c { animation:home3-seismo-trace-c .98s steps(14,end) .48s both paused; }
.js [data-motion="home3-seismograph-triage"] .home3-needle { animation:home3-seismo-needle 1.02s cubic-bezier(.2,.62,.25,1) .16s both paused; }
@keyframes home3-seismo-paper { 0%{background-position:-80px 0;filter:contrast(.58)} 100%{background-position:0 0;filter:none} }
@keyframes home3-seismo-trace-a { 0%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0)} }
@keyframes home3-seismo-trace-b { 0%{clip-path:inset(0 0 0 100%);opacity:.3} 100%{clip-path:inset(0);opacity:1} }
@keyframes home3-seismo-trace-c { 0%{scale:.08 1;transform-origin:left center;filter:saturate(.4)} 100%{scale:1;filter:none} }
@keyframes home3-seismo-needle { 0%{rotate:-18deg} 30%{rotate:16deg} 58%{rotate:-7deg} 80%{rotate:11deg} 100%{rotate:8deg} }

/* 05. Ячейки каталога собираются вокруг центрального выбора. */
.home3-honeycomb { background:linear-gradient(145deg,#ecf7f6,#b8d9da); border-color:rgba(10,48,63,.24); }
.home3-cell,.home3-queen { position:absolute; width:54px; height:48px; background:#17394a; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.home3-cell.cell-a { top:18px; left:61px; }
.home3-cell.cell-b { top:18px; right:61px; background:#bd7047; }
.home3-cell.cell-c { top:72px; left:34px; background:#285b69; }
.home3-cell.cell-d { top:72px; right:34px; background:#285b69; }
.home3-cell.cell-e { bottom:8px; left:112px; background:#ed724f; }
.home3-queen { z-index:5; top:49px; left:112px; background:#20c9c3; border:4px solid #102c3c; }
.js [data-motion="home3-honeycomb-catalog"] .cell-a { animation:home3-cell-a .7s cubic-bezier(.18,.7,.3,1.1) .1s both paused; }
.js [data-motion="home3-honeycomb-catalog"] .cell-b { animation:home3-cell-b .8s cubic-bezier(.18,.7,.3,1.1) .2s both paused; }
.js [data-motion="home3-honeycomb-catalog"] .cell-c { animation:home3-cell-c .9s cubic-bezier(.18,.7,.3,1.1) .3s both paused; }
.js [data-motion="home3-honeycomb-catalog"] .cell-d { animation:home3-cell-d 1s cubic-bezier(.18,.7,.3,1.1) .4s both paused; }
.js [data-motion="home3-honeycomb-catalog"] .cell-e { animation:home3-cell-e .88s cubic-bezier(.18,.7,.3,1.1) .5s both paused; }
.js [data-motion="home3-honeycomb-catalog"] .home3-queen { animation:home3-queen-seat .72s steps(7,end) .66s both paused; }
@keyframes home3-cell-a { 0%{translate:-42px -26px;scale:.35;rotate:-19deg} 100%{translate:0;scale:1;rotate:0} }
@keyframes home3-cell-b { 0%{translate:43px -25px;clip-path:circle(18%);filter:saturate(.4)} 100%{translate:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:none} }
@keyframes home3-cell-c { 0%{translate:-50px 7px;scale:.4 1} 100%{translate:0;scale:1} }
@keyframes home3-cell-d { 0%{translate:49px 9px;rotate:25deg;opacity:.2} 100%{translate:0;rotate:0;opacity:1} }
@keyframes home3-cell-e { 0%{translate:0 36px;scale:1 .2} 100%{translate:0;scale:1} }
@keyframes home3-queen-seat { 0%{scale:.2;filter:brightness(.55)} 74%{scale:1.12;filter:brightness(1.2)} 100%{scale:1;filter:none} }

/* 06. Две биметаллические полосы изгибаются к отдельным контактам. */
.home3-bimetal { background:linear-gradient(155deg,#1e2d3b,#08141f); }
.home3-strip { position:absolute; top:42px; width:92px; height:18px; border:6px solid #ed724f; border-top:0; border-radius:0 0 60px 60px; }
.home3-strip.strip-a { left:38px; transform:skewY(8deg); }
.home3-strip.strip-b { right:38px; transform:skewY(-8deg); border-color:#20c9c3; }
.home3-contact { position:absolute; z-index:4; top:84px; width:22px; height:22px; border-radius:50%; background:#efbd78; border:3px solid #dce8ee; }
.home3-contact.contact-a { left:105px; }
.home3-contact.contact-b { right:105px; }
.home3-thermal { position:absolute; left:60px; right:60px; bottom:17px; height:9px; background:linear-gradient(90deg,#20c9c3,#efbd78,#ed724f); border-radius:8px; }
.js [data-motion="home3-bimetal-tariffs"] .strip-a { animation:home3-bimetal-a .9s cubic-bezier(.2,.65,.27,1.06) .14s both paused; }
.js [data-motion="home3-bimetal-tariffs"] .strip-b { animation:home3-bimetal-b 1.02s cubic-bezier(.2,.65,.27,1.06) .28s both paused; }
.js [data-motion="home3-bimetal-tariffs"] .contact-a { animation:home3-contact-a .7s steps(6,end) .54s both paused; }
.js [data-motion="home3-bimetal-tariffs"] .contact-b { animation:home3-contact-b .76s steps(7,end) .64s both paused; }
.js [data-motion="home3-bimetal-tariffs"] .home3-thermal { animation:home3-thermal-set .86s linear .2s both paused; }
@keyframes home3-bimetal-a { 0%{border-radius:0;transform:skewY(0);translate:0 -13px;filter:saturate(.45)} 100%{border-radius:0 0 60px 60px;transform:skewY(8deg);translate:0;filter:none} }
@keyframes home3-bimetal-b { 0%{border-radius:0;transform:skewY(0);scale:.8 1;filter:brightness(.6)} 100%{border-radius:0 0 60px 60px;transform:skewY(-8deg);scale:1;filter:none} }
@keyframes home3-contact-a { 0%{translate:-21px 14px;scale:.3} 100%{translate:0;scale:1} }
@keyframes home3-contact-b { 0%{translate:22px 15px;clip-path:inset(48%)} 100%{translate:0;clip-path:inset(0)} }
@keyframes home3-thermal-set { 0%{background-position:-110px 0;filter:brightness(.5)} 100%{background-position:0;filter:none} }

/* 07. Три ролика последовательно проталкивают один пакет по трубке. */
.home3-peristaltic { background:linear-gradient(145deg,#e9f4f3,#a5c7cc); border-color:rgba(10,48,63,.22); }
.home3-tube { position:absolute; top:58px; left:21px; width:236px; height:34px; border:7px solid #214455; border-radius:22px; }
.home3-roller { position:absolute; z-index:4; top:35px; width:43px; height:43px; border:8px dotted #bd7047; border-radius:50%; background:#e9f4f3; }
.home3-roller.roller-a { left:48px; rotate:14deg; }
.home3-roller.roller-b { left:118px; rotate:-18deg; }
.home3-roller.roller-c { right:47px; rotate:22deg; }
.home3-packet { position:absolute; z-index:3; top:68px; right:29px; width:30px; height:14px; border-radius:50%; background:#20c9c3; }
.home3-stop { position:absolute; right:18px; top:52px; width:7px; height:49px; background:#ed724f; }
.js [data-motion="home3-peristaltic-sequence"] .roller-a { animation:home3-roll-a .68s cubic-bezier(.2,.62,.25,1) .1s both paused; }
.js [data-motion="home3-peristaltic-sequence"] .roller-b { animation:home3-roll-b .74s cubic-bezier(.2,.62,.25,1) .28s both paused; }
.js [data-motion="home3-peristaltic-sequence"] .roller-c { animation:home3-roll-c .8s cubic-bezier(.2,.62,.25,1) .46s both paused; }
.js [data-motion="home3-peristaltic-sequence"] .home3-packet { animation:home3-packet-pass 1.18s cubic-bezier(.18,.68,.3,1) .18s both paused; }
@keyframes home3-roll-a { 0%{translate:0 -18px;rotate:-48deg} 72%{translate:0 2px;rotate:19deg} 100%{translate:0;rotate:14deg} }
@keyframes home3-roll-b { 0%{translate:0 -20px;scale:.6;filter:contrast(.55)} 100%{translate:0;scale:1;filter:none} }
@keyframes home3-roll-c { 0%{translate:0 -17px;rotate:86deg;opacity:.3} 100%{translate:0;rotate:22deg;opacity:1} }
@keyframes home3-packet-pass { 0%{translate:-194px 0;scale:.55 1;filter:saturate(.4)} 45%{translate:-100px 0;scale:1.18 .82} 78%{translate:-37px 0;scale:.86 1.1} 100%{translate:0;scale:1;filter:none} }

/* 08. Три массы меняют плечи, а центр тяжести садится под отвес. */
.home3-barycentric { background:linear-gradient(150deg,#071522,#18384a); }
.home3-triangle { position:absolute; top:20px; left:53px; width:172px; height:105px; border:2px solid #6d8795; clip-path:polygon(50% 0,100% 100%,0 100%); background:rgba(255,255,255,.03); }
.home3-mass { position:absolute; z-index:4; width:24px; height:24px; border-radius:50%; background:#ed724f; border:4px solid #efbd78; }
.home3-mass.mass-a { top:22px; left:127px; }
.home3-mass.mass-b { bottom:21px; left:57px; background:#20c9c3; }
.home3-mass.mass-c { right:57px; bottom:21px; background:#2c8790; }
.home3-centroid { position:absolute; z-index:5; top:72px; left:128px; width:22px; height:22px; rotate:45deg; background:#fff; border:4px solid #bd7047; }
.home3-plumb { position:absolute; z-index:3; top:13px; left:138px; width:3px; height:66px; background:#20c9c3; transform-origin:50% 0; rotate:3deg; }
.js [data-motion="home3-barycentric-fleet"] .mass-a { animation:home3-mass-a .78s cubic-bezier(.18,.7,.3,1.08) .1s both paused; }
.js [data-motion="home3-barycentric-fleet"] .mass-b { animation:home3-mass-b .86s cubic-bezier(.18,.7,.3,1.08) .22s both paused; }
.js [data-motion="home3-barycentric-fleet"] .mass-c { animation:home3-mass-c .94s cubic-bezier(.18,.7,.3,1.08) .34s both paused; }
.js [data-motion="home3-barycentric-fleet"] .home3-centroid { animation:home3-centroid-seat .82s steps(8,end) .5s both paused; }
.js [data-motion="home3-barycentric-fleet"] .home3-plumb { animation:home3-plumb-settle 1.08s cubic-bezier(.2,.6,.25,1) .26s both paused; }
@keyframes home3-mass-a { 0%{translate:-31px 18px;scale:.5} 100%{translate:0;scale:1} }
@keyframes home3-mass-b { 0%{translate:42px -29px;rotate:-50deg;filter:saturate(.4)} 100%{translate:0;rotate:0;filter:none} }
@keyframes home3-mass-c { 0%{translate:-46px -22px;clip-path:circle(12%)} 100%{translate:0;clip-path:circle(50%)} }
@keyframes home3-centroid-seat { 0%{translate:23px -14px;scale:.3;opacity:.25} 100%{translate:0;scale:1;opacity:1} }
@keyframes home3-plumb-settle { 0%{rotate:-19deg} 34%{rotate:15deg} 62%{rotate:-7deg} 82%{rotate:6deg} 100%{rotate:3deg} }

/* 09. Четыре квадранта разделяются, фокус выбирает одну область. */
.home3-quadtree { background:linear-gradient(145deg,#eaf6f5,#b6d2d7); border-color:rgba(10,48,63,.22); }
.home3-quadrant { position:absolute; width:91px; height:45px; border:3px solid #17394a; background:rgba(32,201,195,.22); }
.home3-quadrant.quad-a { top:22px; left:45px; }
.home3-quadrant.quad-b { top:22px; right:45px; background:rgba(237,114,79,.2); }
.home3-quadrant.quad-c { bottom:24px; left:45px; background:rgba(239,189,120,.25); }
.home3-quadrant.quad-d { right:45px; bottom:24px; background:rgba(30,92,105,.22); }
.home3-focus { position:absolute; z-index:5; right:57px; bottom:33px; width:68px; height:28px; border:4px solid #ed724f; background:rgba(255,255,255,.36); }
.js [data-motion="home3-quadtree-area"] .quad-a { animation:home3-quad-a .72s cubic-bezier(.18,.7,.3,1.08) .1s both paused; }
.js [data-motion="home3-quadtree-area"] .quad-b { animation:home3-quad-b .8s cubic-bezier(.18,.7,.3,1.08) .2s both paused; }
.js [data-motion="home3-quadtree-area"] .quad-c { animation:home3-quad-c .88s cubic-bezier(.18,.7,.3,1.08) .3s both paused; }
.js [data-motion="home3-quadtree-area"] .quad-d { animation:home3-quad-d .96s cubic-bezier(.18,.7,.3,1.08) .4s both paused; }
.js [data-motion="home3-quadtree-area"] .home3-focus { animation:home3-focus-choose .84s steps(8,end) .58s both paused; }
@keyframes home3-quad-a { 0%{translate:46px 24px;scale:.25;opacity:.25} 100%{translate:0;scale:1;opacity:1} }
@keyframes home3-quad-b { 0%{translate:-46px 24px;scale:1 .2;filter:brightness(.55)} 100%{translate:0;scale:1;filter:none} }
@keyframes home3-quad-c { 0%{translate:46px -24px;clip-path:inset(45%)} 100%{translate:0;clip-path:inset(0)} }
@keyframes home3-quad-d { 0%{translate:-46px -24px;rotate:17deg;filter:saturate(.4)} 100%{translate:0;rotate:0;filter:none} }
@keyframes home3-focus-choose { 0%{translate:-112px -56px;scale:.45;opacity:.3} 55%{translate:-53px 0;scale:.8;opacity:.8} 100%{translate:0;scale:1;opacity:1} }

/* 10. Пять танграмных деталей собирают отдельное диалоговое облако. */
.home3-tangram { background:linear-gradient(150deg,#172d3c,#08141f); }
.home3-piece { position:absolute; z-index:3; background:#20c9c3; }
.home3-piece.piece-a { top:31px; left:72px; width:43px; height:43px; clip-path:polygon(0 0,100% 100%,0 100%); }
.home3-piece.piece-b { top:31px; left:116px; width:43px; height:43px; clip-path:polygon(0 0,100% 0,0 100%); background:#ed724f; }
.home3-piece.piece-c { top:75px; left:72px; width:43px; height:43px; rotate:45deg; background:#efbd78; }
.home3-piece.piece-d { top:75px; left:117px; width:60px; height:30px; transform:skewX(-24deg); background:#2d7f8b; }
.home3-piece.piece-e { top:42px; right:57px; width:31px; height:64px; clip-path:polygon(0 0,100% 50%,0 100%); background:#dce8ee; }
.home3-bubble { position:absolute; z-index:2; top:20px; left:51px; width:177px; height:109px; border:3px solid #6d8795; border-radius:52% 48% 47% 53%; }
.home3-bubble::after { content:""; position:absolute; right:17px; bottom:-15px; width:26px; height:24px; background:#6d8795; clip-path:polygon(0 0,100% 0,100% 100%); }
.js [data-motion="home3-dialogue-tangram"] .piece-a { animation:home3-piece-a .7s cubic-bezier(.18,.7,.3,1.1) .1s both paused; }
.js [data-motion="home3-dialogue-tangram"] .piece-b { animation:home3-piece-b .78s cubic-bezier(.18,.7,.3,1.1) .2s both paused; }
.js [data-motion="home3-dialogue-tangram"] .piece-c { animation:home3-piece-c .86s cubic-bezier(.18,.7,.3,1.1) .3s both paused; }
.js [data-motion="home3-dialogue-tangram"] .piece-d { animation:home3-piece-d .94s cubic-bezier(.18,.7,.3,1.1) .4s both paused; }
.js [data-motion="home3-dialogue-tangram"] .piece-e { animation:home3-piece-e 1.02s cubic-bezier(.18,.7,.3,1.1) .5s both paused; }
.js [data-motion="home3-dialogue-tangram"] .home3-bubble { animation:home3-bubble-confirm .76s steps(8,end) .66s both paused; }
@keyframes home3-piece-a { 0%{translate:-49px -26px;rotate:-37deg;opacity:.2} 100%{translate:0;rotate:0;opacity:1} }
@keyframes home3-piece-b { 0%{translate:8px -49px;scale:.35} 100%{translate:0;scale:1} }
@keyframes home3-piece-c { 0%{translate:-43px 33px;rotate:106deg;filter:saturate(.35)} 100%{translate:0;rotate:45deg;filter:none} }
@keyframes home3-piece-d { 0%{translate:27px 48px;transform:skewX(0);clip-path:inset(45%)} 100%{translate:0;transform:skewX(-24deg);clip-path:inset(0)} }
@keyframes home3-piece-e { 0%{translate:51px -6px;scale:.45 1;filter:brightness(.55)} 100%{translate:0;scale:1;filter:none} }
@keyframes home3-bubble-confirm { 0%{clip-path:inset(46% round 50%);opacity:.2} 100%{clip-path:inset(0 round 52% 48% 47% 53%);opacity:1} }

.js [data-motion^="home3-"] .home3-scene * { animation-play-state:paused; }
.js [data-motion^="home3-"].is-motion-active .home3-scene * { animation-play-state:running; }

@media (max-width:1080px) {
  .home3-scene { width:238px; height:128px; bottom:20px; transform:scale(.88); transform-origin:right bottom; }
  [data-motion="home3-differential-sum"] .home3-scene,
  [data-motion="home3-seismograph-triage"] .home3-scene,
  [data-motion="home3-bimetal-tariffs"] .home3-scene,
  [data-motion="home3-barycentric-fleet"] .home3-scene,
  [data-motion="home3-dialogue-tangram"] .home3-scene { transform-origin:left bottom; }
}
@media (max-width:840px) {
  .home3-scene { right:22px; bottom:18px; left:auto !important; width:218px; height:118px; transform:scale(.78); transform-origin:right bottom !important; }
}
@media (max-width:560px) {
  .home3-scene { right:auto !important; bottom:14px; left:calc(50% - 139px) !important; width:278px; height:148px; transform:scale(.64); transform-origin:center bottom !important; }
}
@media (max-width:380px) {
  .home3-scene { bottom:10px; transform:scale(.56); }
}
@media (prefers-reduced-motion:reduce) {
  .home3-scene,
  .home3-scene *,
  .home3-scene::before,
  .home3-scene::after,
  .home3-scene *::before,
  .home3-scene *::after { animation:none !important; transition:none !important; }
}