[data-motion^="srv3-"]{position:relative;isolation:isolate}.srv3-scene{position:absolute;z-index:1;right:max(24px,4vw);bottom:24px;width:276px;height:146px;overflow:hidden;overflow:clip;contain:layout paint;isolation:isolate;pointer-events:none;box-sizing:border-box;color:#dce8ee;background:#071522;border:1px solid rgba(32,201,195,.42);border-radius:22px;box-shadow:0 5px 5px rgba(3,13,22,.2)}.srv3-scene,.srv3-scene *{box-sizing:border-box;pointer-events:none}[data-motion^="srv3-"]>:not(.srv3-scene){position:relative;z-index:2}[data-motion="srv3-conic-selector"] .srv3-scene,[data-motion="srv3-origami-clamp"] .srv3-scene,[data-motion="srv3-bellows-estimate"] .srv3-scene,[data-motion="srv3-punchcard-prepare"] .srv3-scene,[data-motion="srv3-moire-faq"] .srv3-scene{right:auto;left:max(24px,4vw)}
/* 01. Луч входит в призму и разделяется на три самостоятельных выхода. */
.srv3-prism{background:linear-gradient(145deg,#071522,#153d4a)}.srv3-prism-body{position:absolute;z-index:3;top:25px;left:104px;width:72px;height:96px;background:rgba(225,244,245,.22);border:2px solid #b8d8dc;clip-path:polygon(50% 0,100% 100%,0 100%)}.srv3-beam{position:absolute;z-index:2;top:69px;left:18px;width:99px;height:6px;background:#f0c57d}.srv3-ray{position:absolute;z-index:4;left:159px;width:102px;height:5px;transform-origin:left center}.srv3-ray.ray-a{top:61px;rotate:-16deg;background:#20c9c3}.srv3-ray.ray-b{top:72px;background:#f0c57d}.srv3-ray.ray-c{top:83px;rotate:16deg;background:#ed724f}.js [data-motion="srv3-prism-deploy"] .srv3-beam{animation:srv3-prism-beam .75s steps(8,end) .1s both paused}.js [data-motion="srv3-prism-deploy"] .srv3-prism-body{animation:srv3-prism-seat .85s cubic-bezier(.2,.67,.28,1.07) .25s both paused}.js [data-motion="srv3-prism-deploy"] .ray-a{animation:srv3-prism-ray-a .76s cubic-bezier(.18,.7,.3,1.08) .46s both paused}.js [data-motion="srv3-prism-deploy"] .ray-b{animation:srv3-prism-ray-b .84s cubic-bezier(.18,.7,.3,1.08) .54s both paused}.js [data-motion="srv3-prism-deploy"] .ray-c{animation:srv3-prism-ray-c .92s cubic-bezier(.18,.7,.3,1.08) .62s both paused}
@keyframes srv3-prism-beam{0%{clip-path:inset(0 100% 0 0);filter:brightness(.55)}100%{clip-path:inset(0);filter:none}}@keyframes srv3-prism-seat{0%{translate:0 -21px;scale:.45;filter:contrast(.5)}72%{translate:0 2px;scale:1.06;filter:contrast(1.15)}100%{translate:0;scale:1;filter:none}}@keyframes srv3-prism-ray-a{0%{scale:.08 1;rotate:0;opacity:.25}100%{scale:1;rotate:-16deg;opacity:1}}@keyframes srv3-prism-ray-b{0%{translate:-63px 0;scale:.2 1}100%{translate:0;scale:1}}@keyframes srv3-prism-ray-c{0%{clip-path:inset(0 100% 0 0);rotate:0;filter:saturate(.3)}100%{clip-path:inset(0);rotate:16deg;filter:none}}
/* 02. Три секущие плоскости дают круг, эллипс и параболу. */
.srv3-conic{background:linear-gradient(150deg,#e9f4f2,#a6c7cb);border-color:rgba(10,48,63,.24)}.srv3-cone{position:absolute;top:15px;left:91px;width:96px;height:118px;background:#18394a;clip-path:polygon(50% 0,100% 100%,0 100%)}.srv3-plane{position:absolute;z-index:3;left:68px;width:142px;height:9px;background:rgba(237,114,79,.78);border:1px solid #fff}.srv3-plane.plane-a{top:45px}.srv3-plane.plane-b{top:72px;rotate:12deg;background:rgba(32,201,195,.8)}.srv3-plane.plane-c{top:101px;rotate:-23deg;background:rgba(240,197,125,.82)}.srv3-section{position:absolute;z-index:5;border:3px solid #fff}.srv3-section.section-a{top:34px;right:39px;width:25px;height:25px;border-radius:50%}.srv3-section.section-b{top:66px;right:27px;width:39px;height:22px;border-radius:50%}.srv3-section.section-c{right:26px;bottom:20px;width:40px;height:30px;border-width:0 0 3px 3px;border-radius:0 0 0 30px}.js [data-motion="srv3-conic-selector"] .plane-a{animation:srv3-plane-a .72s cubic-bezier(.18,.7,.3,1.1) .12s both paused}.js [data-motion="srv3-conic-selector"] .plane-b{animation:srv3-plane-b .82s cubic-bezier(.18,.7,.3,1.1) .24s both paused}.js [data-motion="srv3-conic-selector"] .plane-c{animation:srv3-plane-c .92s cubic-bezier(.18,.7,.3,1.1) .36s both paused}.js [data-motion="srv3-conic-selector"] .section-a{animation:srv3-conic-circle .65s steps(6,end) .52s both paused}.js [data-motion="srv3-conic-selector"] .section-b{animation:srv3-conic-ellipse .72s steps(7,end) .62s both paused}.js [data-motion="srv3-conic-selector"] .section-c{animation:srv3-conic-parabola .8s steps(8,end) .72s both paused}
@keyframes srv3-plane-a{0%{translate:-88px -16px;scale:.35 1}100%{translate:0;scale:1}}@keyframes srv3-plane-b{0%{translate:91px -9px;rotate:-17deg;opacity:.25}100%{translate:0;rotate:12deg;opacity:1}}@keyframes srv3-plane-c{0%{translate:-80px 18px;rotate:18deg;filter:saturate(.35)}100%{translate:0;rotate:-23deg;filter:none}}@keyframes srv3-conic-circle{0%{clip-path:inset(50%);scale:.3}100%{clip-path:inset(0);scale:1}}@keyframes srv3-conic-ellipse{0%{scale:.15 1;filter:brightness(.55)}100%{scale:1;filter:none}}@keyframes srv3-conic-parabola{0%{clip-path:inset(0 100% 100% 0)}100%{clip-path:inset(0)}}
/* 03. Канат ложится на барабан и подтягивает отдельный груз. */
.srv3-capstan{background:linear-gradient(145deg,#2b211d,#0b1824)}.srv3-drum{position:absolute;z-index:3;top:34px;left:101px;width:74px;height:74px;border:13px double #bc7048;border-radius:50%;rotate:24deg}.srv3-rope{position:absolute;z-index:4;height:6px;background:#eac787;border-radius:6px}.srv3-rope.rope-a{top:68px;left:17px;width:98px;rotate:5deg}.srv3-rope.rope-b{top:75px;right:19px;width:94px;rotate:-8deg}.srv3-pawl{position:absolute;z-index:5;top:22px;left:161px;width:18px;height:45px;background:#20c9c3;clip-path:polygon(0 0,100% 15%,48% 100%,12% 78%);rotate:9deg}.srv3-load{position:absolute;z-index:5;right:18px;bottom:18px;width:43px;height:35px;background:#dbe6e9;border:3px solid #17394a}.js [data-motion="srv3-capstan-load"] .srv3-drum{animation:srv3-capstan-drum .94s cubic-bezier(.2,.62,.25,1) .14s both paused}.js [data-motion="srv3-capstan-load"] .rope-a{animation:srv3-rope-feed .74s steps(8,end) .2s both paused}.js [data-motion="srv3-capstan-load"] .rope-b{animation:srv3-rope-tension .86s cubic-bezier(.18,.7,.3,1.08) .38s both paused}.js [data-motion="srv3-capstan-load"] .srv3-pawl{animation:srv3-pawl-seat .7s cubic-bezier(.2,.67,.28,1.08) .56s both paused}.js [data-motion="srv3-capstan-load"] .srv3-load{animation:srv3-load-lift .98s cubic-bezier(.2,.64,.27,1.05) .42s both paused}
@keyframes srv3-capstan-drum{0%{rotate:-118deg;scale:.65;filter:contrast(.5)}100%{rotate:24deg;scale:1;filter:none}}@keyframes srv3-rope-feed{0%{clip-path:inset(0 100% 0 0);rotate:-7deg;filter:brightness(.55)}61%{clip-path:inset(0 17% 0 0);rotate:7deg;filter:brightness(1.15)}100%{clip-path:inset(0);rotate:5deg;filter:none}}@keyframes srv3-rope-tension{0%{scale:.18 1;rotate:3deg}100%{scale:1;rotate:-8deg}}@keyframes srv3-pawl-seat{0%{translate:11px -13px;rotate:-24deg}100%{translate:0;rotate:9deg}}@keyframes srv3-load-lift{0%{translate:0 48px;scale:.82;filter:saturate(.35)}72%{translate:0 -3px;scale:1.04;filter:saturate(1.2)}100%{translate:0;scale:1;filter:none}}
/* 04. Три складки формируют жёсткий карман между двумя зажимами. */
.srv3-origami{background:linear-gradient(145deg,#f4eee6,#c4dbdc);border-color:rgba(10,48,63,.22)}.srv3-sheet{position:absolute;top:22px;left:53px;width:170px;height:102px;background:#17394a;clip-path:polygon(8% 0,92% 0,100% 80%,76% 100%,25% 94%,0 67%)}.srv3-fold{position:absolute;z-index:3;background:#20c9c3}.srv3-fold.fold-a{top:30px;left:68px;width:62px;height:70px;clip-path:polygon(0 0,100% 35%,22% 100%)}.srv3-fold.fold-b{top:28px;right:65px;width:66px;height:75px;background:#ed724f;clip-path:polygon(100% 0,78% 100%,0 36%)}.srv3-fold.fold-c{left:105px;bottom:19px;width:70px;height:49px;background:#f0c57d;clip-path:polygon(50% 0,100% 100%,0 100%)}.srv3-clamp{position:absolute;z-index:5;top:54px;width:17px;height:49px;background:#dce8ee;border:3px solid #17394a}.srv3-clamp.clamp-a{left:37px}.srv3-clamp.clamp-b{right:37px}.js [data-motion="srv3-origami-clamp"] .fold-a{animation:srv3-fold-a .76s cubic-bezier(.18,.7,.3,1.08) .12s both paused}.js [data-motion="srv3-origami-clamp"] .fold-b{animation:srv3-fold-b .86s cubic-bezier(.18,.7,.3,1.08) .26s both paused}.js [data-motion="srv3-origami-clamp"] .fold-c{animation:srv3-fold-c .96s cubic-bezier(.18,.7,.3,1.08) .4s both paused}.js [data-motion="srv3-origami-clamp"] .clamp-a{animation:srv3-clamp-a .72s steps(7,end) .58s both paused}.js [data-motion="srv3-origami-clamp"] .clamp-b{animation:srv3-clamp-b .78s steps(8,end) .66s both paused}
@keyframes srv3-fold-a{0%{transform:perspective(130px) rotateY(78deg);filter:brightness(.55)}100%{transform:perspective(130px) rotateY(0);filter:none}}@keyframes srv3-fold-b{0%{transform:perspective(130px) rotateX(-72deg);clip-path:inset(38%)}100%{transform:perspective(130px) rotateX(0);clip-path:inset(0)}}@keyframes srv3-fold-c{0%{scale:.2 .9;translate:0 25px}100%{scale:1;translate:0}}@keyframes srv3-clamp-a{0%{translate:-38px 0;opacity:.3}100%{translate:0;opacity:1}}@keyframes srv3-clamp-b{0%{translate:39px 0;scale:.4 1}100%{translate:0;scale:1}}
/* 05. Кулачок поднимает один толкатель и сжимает пружину. */
.srv3-cam{background:linear-gradient(150deg,#0a1723,#17394a)}.srv3-cam-wheel{position:absolute;top:37px;left:45px;width:82px;height:82px;border-radius:58% 42% 63% 37%;background:#bd7047;border:8px double #f0c57d;rotate:31deg}.srv3-follower{position:absolute;z-index:4;top:28px;left:151px;width:25px;height:72px;background:#dce8ee;border:3px solid #071522;translate:0 -8px}.srv3-spring{position:absolute;z-index:3;left:151px;bottom:13px;width:25px;height:45px;background:repeating-linear-gradient(0deg,transparent 0 5px,#20c9c3 6px 9px);scale:1 .72;transform-origin:center bottom}.srv3-datum{position:absolute;left:28px;right:28px;bottom:13px;height:4px;background:#6d8795}.srv3-stop{position:absolute;top:19px;right:35px;width:53px;height:7px;background:#ed724f}.js [data-motion="srv3-cam-profile"] .srv3-cam-wheel{animation:srv3-cam-turn .98s cubic-bezier(.2,.62,.25,1) .12s both paused}.js [data-motion="srv3-cam-profile"] .srv3-follower{animation:srv3-follower-rise .88s cubic-bezier(.18,.7,.3,1.08) .28s both paused}.js [data-motion="srv3-cam-profile"] .srv3-spring{animation:srv3-spring-compress .82s steps(9,end) .36s both paused}.js [data-motion="srv3-cam-profile"] .srv3-stop{animation:srv3-cam-stop .68s cubic-bezier(.18,.7,.3,1.1) .62s both paused}
@keyframes srv3-cam-turn{0%{rotate:-93deg;scale:.72;filter:saturate(.4)}100%{rotate:31deg;scale:1;filter:none}}@keyframes srv3-follower-rise{0%{translate:0 25px;scale:.82 1}68%{translate:0 -11px;scale:1.04 .98}100%{translate:0 -8px;scale:1}}@keyframes srv3-spring-compress{0%{scale:1 1.15;filter:brightness(.55)}100%{scale:1 .72;filter:none}}@keyframes srv3-cam-stop{0%{translate:45px 0;scale:.3 1;opacity:.25}100%{translate:0;scale:1;opacity:1}}
/* 06. Три меха сжимаются по-разному и выставляют поршень. */
.srv3-bellows{background:linear-gradient(150deg,#dce8ea,#8aa2ad);border-color:rgba(10,48,63,.26)}.srv3-bellow{position:absolute;top:38px;width:49px;height:72px;background:repeating-linear-gradient(90deg,#17394a 0 7px,#20c9c3 8px 11px);clip-path:polygon(0 8%,100% 0,92% 100%,8% 92%)}.srv3-bellow.fold-a{left:34px;scale:.72 1}.srv3-bellow.fold-b{left:91px;scale:.86 1}.srv3-bellow.fold-c{left:154px}.srv3-piston{position:absolute;z-index:4;top:54px;right:24px;width:59px;height:38px;background:#bd7047;border:3px solid #f5d8aa;translate:0 0}.srv3-gauge-mark{position:absolute;right:33px;bottom:18px;width:45px;height:5px;background:#17394a}.js [data-motion="srv3-bellows-estimate"] .fold-a{animation:srv3-bellow-a .76s cubic-bezier(.2,.67,.28,1.07) .12s both paused}.js [data-motion="srv3-bellows-estimate"] .fold-b{animation:srv3-bellow-b .86s cubic-bezier(.2,.67,.28,1.07) .24s both paused}.js [data-motion="srv3-bellows-estimate"] .fold-c{animation:srv3-bellow-c .96s cubic-bezier(.2,.67,.28,1.07) .36s both paused}.js [data-motion="srv3-bellows-estimate"] .srv3-piston{animation:srv3-piston-seat .82s steps(8,end) .52s both paused}
@keyframes srv3-bellow-a{0%{scale:1.35 1;filter:contrast(.5)}100%{scale:.72 1;filter:none}}@keyframes srv3-bellow-b{0%{scale:.35 1;translate:-24px 0}100%{scale:.86 1;translate:0}}@keyframes srv3-bellow-c{0%{clip-path:inset(0 80% 0 0);filter:saturate(.3)}100%{clip-path:polygon(0 8%,100% 0,92% 100%,8% 92%);filter:none}}@keyframes srv3-piston-seat{0%{translate:52px 0;scale:.5 1;opacity:.3}100%{translate:0;scale:1;opacity:1}}
/* 07. Мальтийский механизм делает один индексный шаг на четыре позиции. */
.srv3-geneva{background:linear-gradient(145deg,#eef6f5,#acc9cc);border-color:rgba(10,48,63,.24)}.srv3-drive{position:absolute;top:34px;left:35px;width:78px;height:78px;border:12px solid #bd7047;border-radius:50%;rotate:72deg}.srv3-pin{position:absolute;z-index:5;top:41px;left:89px;width:16px;height:16px;border-radius:50%;background:#f0c57d;border:3px solid #17394a}.srv3-geneva-wheel{position:absolute;top:22px;right:43px;width:103px;height:103px;border:15px double #17394a;border-radius:50%;rotate:90deg}.srv3-slot{position:absolute;z-index:4;right:87px;width:15px;height:35px;background:#eef6f5}.srv3-slot.slot-a{top:16px}.srv3-slot.slot-b{top:55px;right:48px;rotate:90deg}.srv3-slot.slot-c{right:87px;bottom:15px}.srv3-slot.slot-d{top:55px;right:126px;rotate:90deg}.srv3-lock{position:absolute;z-index:6;right:82px;bottom:56px;width:25px;height:25px;border-radius:50%;background:#20c9c3}.js [data-motion="srv3-geneva-sequence"] .srv3-drive{animation:srv3-geneva-drive .98s cubic-bezier(.2,.62,.25,1) .12s both paused}.js [data-motion="srv3-geneva-sequence"] .srv3-pin{animation:srv3-geneva-pin .82s cubic-bezier(.2,.67,.28,1.07) .2s both paused}.js [data-motion="srv3-geneva-sequence"] .srv3-geneva-wheel{animation:srv3-geneva-wheel .94s steps(8,end) .36s both paused}.js [data-motion="srv3-geneva-sequence"] .srv3-lock{animation:srv3-geneva-lock .66s cubic-bezier(.18,.7,.3,1.1) .68s both paused}
@keyframes srv3-geneva-drive{0%{rotate:-88deg;filter:contrast(.55)}100%{rotate:72deg;filter:none}}@keyframes srv3-geneva-pin{0%{translate:-34px 39px;scale:.45}62%{translate:3px -2px;scale:1.1}100%{translate:0;scale:1}}@keyframes srv3-geneva-wheel{0%{rotate:0;filter:saturate(.4)}100%{rotate:90deg;filter:none}}@keyframes srv3-geneva-lock{0%{scale:.2;opacity:.25}76%{scale:1.16;opacity:1}100%{scale:1;opacity:1}}
/* 08. Карта проходит считыватель, четыре отверстия открываются разными способами. */
.srv3-punchcard{background:linear-gradient(150deg,#132b3b,#071522)}.srv3-card{position:absolute;top:25px;left:43px;width:190px;height:97px;background:#e8d2ad;border:3px solid #bd7047;clip-path:polygon(0 0,91% 0,100% 18%,100% 100%,0 100%)}.srv3-hole{position:absolute;z-index:4;width:22px;height:22px;border-radius:50%;background:#071522}.srv3-hole.hole-a{top:45px;left:72px}.srv3-hole.hole-b{top:45px;left:123px}.srv3-hole.hole-c{bottom:41px;left:97px}.srv3-hole.hole-d{right:68px;bottom:40px}.srv3-reader{position:absolute;z-index:5;top:16px;left:183px;width:12px;height:116px;background:#20c9c3;box-shadow:0 0 0 2px #dce8ee}.js [data-motion="srv3-punchcard-prepare"] .srv3-card{animation:srv3-card-feed .92s cubic-bezier(.2,.65,.27,1.05) .12s both paused}.js [data-motion="srv3-punchcard-prepare"] .hole-a{animation:srv3-hole-a .62s steps(6,end) .35s both paused}.js [data-motion="srv3-punchcard-prepare"] .hole-b{animation:srv3-hole-b .7s steps(7,end) .43s both paused}.js [data-motion="srv3-punchcard-prepare"] .hole-c{animation:srv3-hole-c .78s steps(8,end) .51s both paused}.js [data-motion="srv3-punchcard-prepare"] .hole-d{animation:srv3-hole-d .86s steps(9,end) .59s both paused}.js [data-motion="srv3-punchcard-prepare"] .srv3-reader{animation:srv3-reader-pass .94s linear .22s both paused}
@keyframes srv3-card-feed{0%{translate:-92px 0;scale:.84 1;filter:saturate(.4)}100%{translate:0;scale:1;filter:none}}@keyframes srv3-hole-a{0%{scale:.15;clip-path:circle(10%)}100%{scale:1;clip-path:circle(50%)}}@keyframes srv3-hole-b{0%{scale:1 .12;opacity:.2}100%{scale:1;opacity:1}}@keyframes srv3-hole-c{0%{translate:0 24px;filter:brightness(.5)}100%{translate:0;filter:none}}@keyframes srv3-hole-d{0%{clip-path:inset(45%);rotate:45deg}100%{clip-path:inset(0 round 50%);rotate:0}}@keyframes srv3-reader-pass{0%{translate:-137px 0;opacity:.35}100%{translate:0;opacity:1}}
/* 09. Два пролёта принимают разный провис, центральный груз садится вниз. */
.srv3-catenary{background:linear-gradient(145deg,#071522,#17424b)}.srv3-pylon{position:absolute;z-index:4;bottom:19px;width:12px;height:106px;background:#dce8ee;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}.srv3-pylon.pylon-a{left:37px}.srv3-pylon.pylon-b{right:37px}.srv3-cable{position:absolute;z-index:3;top:29px;height:66px;border-bottom:5px solid #20c9c3;border-radius:0 0 50% 50%}.srv3-cable.cable-a{left:44px;width:94px;transform:skewY(3deg)}.srv3-cable.cable-b{right:44px;width:94px;transform:skewY(-3deg);border-color:#f0c57d}.srv3-weight{position:absolute;z-index:5;top:81px;left:126px;width:24px;height:31px;background:#ed724f;clip-path:polygon(50% 0,100% 100%,0 100%)}.srv3-ground{position:absolute;right:20px;bottom:17px;left:20px;height:4px;background:#6d8795}.js [data-motion="srv3-catenary-mile"] .pylon-a{animation:srv3-pylon-a .72s cubic-bezier(.18,.7,.3,1.08) .1s both paused}.js [data-motion="srv3-catenary-mile"] .pylon-b{animation:srv3-pylon-b .8s cubic-bezier(.18,.7,.3,1.08) .2s both paused}.js [data-motion="srv3-catenary-mile"] .cable-a{animation:srv3-cable-a .86s cubic-bezier(.2,.65,.27,1.06) .32s both paused}.js [data-motion="srv3-catenary-mile"] .cable-b{animation:srv3-cable-b .96s cubic-bezier(.2,.65,.27,1.06) .42s both paused}.js [data-motion="srv3-catenary-mile"] .srv3-weight{animation:srv3-weight-seat .82s cubic-bezier(.18,.7,.3,1.1) .58s both paused}
@keyframes srv3-pylon-a{0%{translate:-34px 17px;scale:1 .35}100%{translate:0;scale:1}}@keyframes srv3-pylon-b{0%{translate:35px 18px;clip-path:inset(72% 0 0)}100%{translate:0;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}}@keyframes srv3-cable-a{0%{scale:.2 .25;border-radius:0;transform:skewY(-9deg)}100%{scale:1;border-radius:0 0 50% 50%;transform:skewY(3deg)}}@keyframes srv3-cable-b{0%{clip-path:inset(0 100% 0 0);border-radius:0;filter:saturate(.3)}100%{clip-path:inset(0);border-radius:0 0 50% 50%;filter:none}}@keyframes srv3-weight-seat{0%{translate:0 -48px;scale:.45;opacity:.25}70%{translate:0 3px;scale:1.08;opacity:1}100%{translate:0;scale:1;opacity:1}}
/* 10. Две решётки дают муар, а окно фиксирует читаемую область. */
.srv3-moire{background:linear-gradient(145deg,#e8f3f2,#a8c6cc);border-color:rgba(10,48,63,.24)}.srv3-grille{position:absolute;inset:22px 40px;background:repeating-linear-gradient(90deg,transparent 0 7px,#17394a 8px 10px);border:1px solid rgba(10,48,63,.22)}.srv3-grille.grille-a{transform:skewX(8deg);background-position:6px 0}.srv3-grille.grille-b{transform:skewX(-8deg);rotate:4deg;opacity:.62;background-position:-6px 0}.srv3-window{position:absolute;z-index:4;top:42px;left:83px;width:110px;height:62px;border:6px solid #ed724f;background:rgba(255,255,255,.1)}.srv3-index{position:absolute;z-index:5;width:34px;height:6px;background:#20c9c3}.srv3-index.index-a{top:28px;left:50px}.srv3-index.index-b{right:50px;bottom:27px;background:#bd7047}.js [data-motion="srv3-moire-faq"] .grille-a{animation:srv3-grille-a .9s linear .12s both paused}.js [data-motion="srv3-moire-faq"] .grille-b{animation:srv3-grille-b 1.02s linear .2s both paused}.js [data-motion="srv3-moire-faq"] .srv3-window{animation:srv3-moire-window .78s steps(8,end) .5s both paused}.js [data-motion="srv3-moire-faq"] .index-a{animation:srv3-index-a .66s cubic-bezier(.18,.7,.3,1.1) .64s both paused}.js [data-motion="srv3-moire-faq"] .index-b{animation:srv3-index-b .74s cubic-bezier(.18,.7,.3,1.1) .72s both paused}
@keyframes srv3-grille-a{0%{background-position:-42px 0;transform:skewX(-14deg);filter:contrast(.5)}100%{background-position:6px 0;transform:skewX(8deg);filter:none}}@keyframes srv3-grille-b{0%{background-position:39px 0;transform:skewX(15deg);rotate:-7deg}100%{background-position:-6px 0;transform:skewX(-8deg);rotate:4deg}}@keyframes srv3-moire-window{0%{clip-path:inset(48%);scale:.35;opacity:.25}100%{clip-path:inset(0);scale:1;opacity:1}}@keyframes srv3-index-a{0%{translate:-49px 0;scale:.25 1}100%{translate:0;scale:1}}@keyframes srv3-index-b{0%{translate:50px 0;clip-path:inset(0 0 0 100%)}100%{translate:0;clip-path:inset(0)}}
.js [data-motion^="srv3-"] .srv3-scene *{animation-play-state:paused}.js [data-motion^="srv3-"].is-motion-active .srv3-scene *{animation-play-state:running}
@media(max-width:1080px){.srv3-scene{width:238px;height:128px;bottom:20px;transform:scale(.88);transform-origin:right bottom}[data-motion="srv3-conic-selector"] .srv3-scene,[data-motion="srv3-origami-clamp"] .srv3-scene,[data-motion="srv3-bellows-estimate"] .srv3-scene,[data-motion="srv3-punchcard-prepare"] .srv3-scene,[data-motion="srv3-moire-faq"] .srv3-scene{transform-origin:left bottom}}
@media(max-width:840px){.srv3-scene{right:22px;bottom:18px;left:auto!important;width:218px;height:118px;transform:scale(.78);transform-origin:right bottom!important}}
@media(max-width:560px){.srv3-scene{right:auto!important;bottom:14px;left:calc(50% - 138px)!important;width:276px;height:146px;transform:scale(.65);transform-origin:center bottom!important}}
@media(max-width:380px){.srv3-scene{bottom:10px;transform:scale(.56)}}
@media(prefers-reduced-motion:reduce){.srv3-scene,.srv3-scene *,.srv3-scene::before,.srv3-scene::after,.srv3-scene *::before,.srv3-scene *::after{animation:none!important;transition:none!important}}