npm - motiondesk-studio - Versions diffs - 1.3.0 → 1.5.0 - Mend

motiondesk-studio 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/README.md +9 -4
package/app/assets/bank-banker-chat-B_iF_sFM.js +257 -0
package/app/assets/bank-business-loan-BFWWaq-c.js +247 -0
package/app/assets/bank-car-choice-DLE2OVcc.js +229 -0
package/app/assets/bank-card-freeze-J1JfFmLr.js +281 -0
package/app/assets/bank-code-never-CQDlq8GN.js +234 -0
package/app/assets/bank-dark-interlude-DhcdkPP1.js +190 -0
package/app/assets/bank-digital-JTuIxFOJ.js +1 -0
package/app/assets/bank-dinner-split-Be1e7DOQ.js +246 -0
package/app/assets/bank-fast-pay-DoW0ClI6.js +230 -0
package/app/assets/bank-first-salary-D9WxYgJf.js +212 -0
package/app/assets/bank-fomo-stop-uEzdT0HP.js +230 -0
package/app/assets/bank-forex-trip-BHW39y4z.js +205 -0
package/app/assets/bank-growth-bars-DirAz4xB.js +203 -0
package/app/assets/bank-holiday-budget-J41dLHwR.js +224 -0
package/app/assets/bank-invest-B--KJb5m.js +1 -0
package/app/assets/bank-life-C-4wZKyu.js +1 -0
package/app/assets/bank-mortgage-papers-DMtx0XsI.js +214 -0
package/app/assets/bank-new-app-look-CKmeKBU6.js +228 -0
package/app/assets/bank-one-click-loan-BVhe1AGv.js +223 -0
package/app/assets/bank-paper-explainer-CD8mPtnJ.js +191 -0
package/app/assets/bank-pension-compare-BArvoVu7.js +243 -0
package/app/assets/bank-remote-access-Df8UNpc7.js +257 -0
package/app/assets/bank-safety-CBkr-iwJ.js +1 -0
package/app/assets/bank-savings-pocket-B53nO1Z_.js +220 -0
package/app/assets/bank-share-explained-DCp805RD.js +228 -0
package/app/assets/bank-small-business-Bc7Ad4GW.js +217 -0
package/app/assets/bank-student-routine-CnPPhtoV.js +224 -0
package/app/assets/bank-suspicious-sms-CwOrdi3d.js +229 -0
package/app/assets/bank-wedding-budget-CDM2kO0R.js +230 -0
package/app/assets/bank-young-BwV6418l.js +1 -0
package/app/assets/{catalog-Cdx5nbp0.js → catalog-CDdvrdnk.js} +1 -1
package/app/assets/{index-D3rEDfqX.js → index-BRse9TUl.js} +4 -4
package/app/assets/index-b6-Cm4vot4j.js +1 -0
package/app/assets/index-b7-BLEay8YC.js +1 -0
package/app/assets/index-b8-Jbh-zOZB.js +1 -0
package/app/assets/index-b9-caOB8GyX.js +1 -0
package/app/index.html +1 -1
package/bin/motiondesk-studio.mjs +8 -1
package/lib/catalog/hyperframes/bank-banker-chat.html +256 -0
package/lib/catalog/hyperframes/bank-business-loan.html +246 -0
package/lib/catalog/hyperframes/bank-car-choice.html +228 -0
package/lib/catalog/hyperframes/bank-card-freeze.html +280 -0
package/lib/catalog/hyperframes/bank-code-never.html +233 -0
package/lib/catalog/hyperframes/bank-dark-interlude.html +189 -0
package/lib/catalog/hyperframes/bank-dinner-split.html +245 -0
package/lib/catalog/hyperframes/bank-fast-pay.html +229 -0
package/lib/catalog/hyperframes/bank-first-salary.html +211 -0
package/lib/catalog/hyperframes/bank-fomo-stop.html +229 -0
package/lib/catalog/hyperframes/bank-forex-trip.html +204 -0
package/lib/catalog/hyperframes/bank-growth-bars.html +202 -0
package/lib/catalog/hyperframes/bank-holiday-budget.html +223 -0
package/lib/catalog/hyperframes/bank-mortgage-papers.html +213 -0
package/lib/catalog/hyperframes/bank-new-app-look.html +227 -0
package/lib/catalog/hyperframes/bank-one-click-loan.html +222 -0
package/lib/catalog/hyperframes/bank-paper-explainer.html +190 -0
package/lib/catalog/hyperframes/bank-pension-compare.html +242 -0
package/lib/catalog/hyperframes/bank-remote-access.html +256 -0
package/lib/catalog/hyperframes/bank-savings-pocket.html +219 -0
package/lib/catalog/hyperframes/bank-share-explained.html +227 -0
package/lib/catalog/hyperframes/bank-small-business.html +216 -0
package/lib/catalog/hyperframes/bank-student-routine.html +223 -0
package/lib/catalog/hyperframes/bank-suspicious-sms.html +228 -0
package/lib/catalog/hyperframes/bank-wedding-budget.html +229 -0
package/lib/catalog/hyperframes/index-b6.json +146 -0
package/lib/catalog/hyperframes/index-b7.json +121 -0
package/lib/catalog/hyperframes/index-b8.json +92 -0
package/lib/catalog/hyperframes/index-b9.json +87 -0
package/lib/catalog/studio/bank-digital.json +3586 -0
package/lib/catalog/studio/bank-invest.json +3653 -0
package/lib/catalog/studio/bank-life.json +3605 -0
package/lib/catalog/studio/bank-safety.json +3198 -0
package/lib/catalog/studio/bank-young.json +3426 -0
package/lib/vercel-render.mjs +16 -1
package/package.json +30 -7

package/app/assets/bank-pension-compare-BArvoVu7.js ADDED Viewed

@@ -0,0 +1,243 @@
+var e=`<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920, height=1080">
+<title>משווים דמי ניהול</title>
+<script src="vendor/gsap.min.js"><\/script>
+<style>
+@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
+@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
+@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
+@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
+:root{--bg:#F4F4F2;--fg:#141A26;--accent:#D7062E;--card:#FFFFFF;--mute:#868D99}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
+.scene{position:absolute;inset:0;overflow:hidden}
+.cam,.layer{position:absolute;inset:0}
+.abs{position:absolute}
+.m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
+.w{display:inline-block;white-space:nowrap}
+.t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
+.c{left:0;right:0;text-align:center}
+.cw{position:absolute;left:0;right:0;display:flex;justify-content:center}
+.row{display:flex;gap:.26em;align-items:baseline;white-space:nowrap;line-height:1.15;font-weight:700;color:var(--fg)}
+.em{color:var(--accent)}
+.hw{position:relative}
+.hw p{position:relative}
+.hb{position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.34em;background:color-mix(in srgb,var(--accent) 24%,transparent)}
+.pl{position:absolute;background:color-mix(in srgb,var(--card) 62%,transparent)}
+.brand{position:absolute;top:36px;right:44px;height:54px;padding:0 22px;border-radius:27px;background:var(--card);display:flex;align-items:center;gap:12px;box-shadow:0 6px 18px color-mix(in srgb,var(--fg) 12%,transparent)}
+.brand .bm{width:16px;height:16px;border-radius:3px;background:var(--accent)}
+.brand p{font-size:26px;font-weight:700;color:var(--fg);white-space:nowrap}
+.capw{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center}
+.cap{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:12px;padding:16px 28px;box-shadow:0 10px 28px color-mix(in srgb,var(--fg) 14%,transparent)}
+.cap .mk{flex:none;width:16px;height:16px;background:var(--accent)}
+.cap .ct{display:flex;gap:.26em;overflow:hidden;min-width:0;font-size:40px;line-height:1.3;white-space:nowrap;color:var(--fg)}
+.cap .ct .em{font-weight:700}
+.cap .cur{flex:none;width:12px;height:40px;background:var(--fg)}
+.card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 13%,transparent),0 2px 6px color-mix(in srgb,var(--fg) 8%,transparent)}
+.tape{position:absolute;z-index:2;width:120px;height:32px;background:var(--accent);opacity:.94}
+.tape::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;background:var(--card)}
+.tl{top:-6px;left:-34px;transform:rotate(-36deg)}
+.tr{top:-6px;right:-34px;transform:rotate(36deg)}
+.ln{display:block;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 38%,var(--card));margin-top:18px}
+.ln.r{background:color-mix(in srgb,var(--accent) 45%,var(--card))}
+.lab{position:absolute;padding:6px 24px 12px;font-size:46px;font-weight:700;white-space:nowrap;line-height:1.2;background:var(--card);color:var(--fg);box-shadow:0 8px 20px color-mix(in srgb,var(--fg) 12%,transparent)}
+.lab.r{background:var(--accent);color:var(--card)}
+.win{position:absolute;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 14%,transparent)}
+.win .wb{height:44px;background:var(--fg);display:flex;align-items:center;gap:10px;padding:0 18px;direction:ltr}
+.win .wb i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--card) 50%,var(--fg))}
+.fig{position:absolute;width:200px;height:300px}
+.fig .hd{position:absolute;left:55px;top:0;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--fg) 82%,var(--card))}
+.fig .bd{position:absolute;left:0;top:104px;width:200px;height:196px;border-radius:100px 100px 14px 14px;background:var(--fg)}
+.fig .nk{position:absolute;left:78px;top:104px;width:44px;height:58px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
+.fig.a .bd{background:var(--accent)}
+.fig.m .bd{background:var(--mute)}
+.endmk{width:64px;height:64px;border-radius:8px;background:var(--accent)}
+.ebox{border:5px solid var(--fg);background:var(--card);padding:4px 38px 14px;font-weight:700;white-space:nowrap;line-height:1.2;color:var(--fg)}
+.cta{display:flex;align-items:center;gap:14px;height:84px;padding:0 40px;border-radius:42px;background:var(--fg)}
+.cta i{width:16px;height:16px;background:var(--accent)}
+.cta p{font-size:36px;font-weight:700;color:var(--card);white-space:nowrap}
+.fine{font-size:24px;color:color-mix(in srgb,var(--fg) 58%,var(--bg))}
+.ck{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
+.fc{top:330px;width:540px;height:430px}
+.trk{position:absolute;left:44px;right:44px;top:372px;height:16px;border-radius:8px;background:color-mix(in srgb,var(--mute) 22%,var(--card))}
+.trk i{position:absolute;right:0;top:0;bottom:0;border-radius:8px;background:var(--fg)}
+#fbf{background:var(--accent)}
+.vs{position:absolute;left:900px;top:485px;width:120px;height:120px;border-radius:50%;background:var(--fg);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px color-mix(in srgb,var(--fg) 22%,transparent)}
+.vs p{font-size:40px;font-weight:700;color:var(--card)}
+.ch{position:absolute;left:300px;top:250px;width:1320px;height:560px;overflow:visible}
+.gl{stroke:color-mix(in srgb,var(--mute) 28%,transparent);stroke-width:2}
+.axl{stroke:var(--fg);stroke-width:4}
+.la,.lb{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
+.la{stroke:var(--fg)}.lb{stroke:var(--mute)}
+.gp{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
+.mkl{stroke:var(--accent);stroke-width:9;stroke-linecap:round}
+.mkd{fill:var(--accent);stroke:var(--card);stroke-width:5}
+.ax{top:740px;width:200px;text-align:center;font-size:32px;color:var(--mute)}
+.lg{position:absolute;left:380px;display:flex;align-items:center;gap:16px}
+.lg i{width:44px;height:8px;border-radius:4px;flex:none}
+.lg p{font-size:34px;font-weight:700;white-space:nowrap;color:var(--fg)}
+.paper{left:180px;top:150px;width:660px;height:700px;transform:rotate(-2deg)}
+.rowh{position:absolute;left:30px;right:30px;height:62px;transform-origin:100% 50%;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px}
+.mag{position:absolute;left:0;top:0;width:190px;height:190px}
+.mag i{position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;border:16px solid var(--fg);background:color-mix(in srgb,var(--card) 30%,transparent)}
+.mag b{position:absolute;left:128px;top:122px;width:24px;height:80px;border-radius:12px;background:var(--fg);transform:rotate(-40deg)}
+.cbx{position:absolute;width:56px;height:56px;border-radius:10px;border:5px solid var(--fg)}
+.cbx svg{position:absolute;left:-6px;top:-12px;width:66px;height:66px;overflow:visible}
+.cal{left:830px;top:110px;width:260px;height:250px;overflow:hidden}
+.cal .bnd{position:absolute;left:0;right:0;top:0;height:62px;background:var(--accent)}
+.dc{position:absolute;width:40px;height:34px;border-radius:6px;background:color-mix(in srgb,var(--mute) 26%,var(--card))}
+.ring{position:absolute;left:840px;top:96px;width:16px;height:40px;border-radius:8px;background:var(--fg)}
+.cel{position:absolute;left:820px;top:170px;width:280px;height:200px;overflow:visible}
+.cel ellipse{fill:none;stroke:var(--accent);stroke-width:6}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-pension-compare" data-start="0" data-width="1920" data-height="1080" data-duration="15.4">
+<section id="s1" class="clip scene" data-start="0" data-duration="3.6">
+<div class="cam" id="c1">
+  <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
+  <i class="pl" style="left:1460px;top:-300px;width:600px;height:1600px;transform:rotate(-30deg)"></i>
+  <div class="cw" style="top:140px"><div class="row" style="font-size:88px"><p id="h1a">כמה עולים לכם</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">דמי הניהול?</p></div></div></div>
+  <div class="card fc" id="fa" style="left:1040px"><i class="tape tr"></i>
+  <p class="lab" id="fan" style="right:40px;top:40px;font-size:38px">מסלול א</p>
+  <p class="t" id="fav" style="right:40px;top:118px;font-size:150px;font-weight:700">0.2%</p>
+  <p class="t" id="fas" style="right:44px;top:300px;font-size:34px;color:var(--mute)">דמי ניהול מהצבירה</p>
+  <div class="trk"><i id="faf" style="width:20%"></i></div></div>
+  <div class="card fc" id="fb" style="left:340px"><i class="tape tl"></i>
+  <p class="lab r" id="fbn" style="right:40px;top:40px;font-size:38px">מסלול ב</p>
+  <p class="t em" id="fbv" style="right:40px;top:118px;font-size:150px;font-weight:700">1.0%</p>
+  <p class="t" id="fbs" style="right:44px;top:300px;font-size:34px;color:var(--mute)">דמי ניהול מהצבירה</p>
+  <div class="trk"><i id="fbf" style="width:100%"></i></div></div>
+  <div class="vs" id="vs"><p id="vst">מול</p></div>
+  <div class="capw"><div class="cap" id="cap1"><i class="mk"></i><div class="ct" id="ct1"><p id="cp1a">הבדל קטן באחוזים</p><p id="cp1b" class="em">גדל עם השנים</p></div><i class="cur" id="cu1"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="3.6" data-duration="4.4">
+<div class="cam" id="c2">
+  <i class="pl" style="left:-200px;top:-500px;width:820px;height:1800px;transform:rotate(30deg)"></i>
+  <div class="cw" style="top:110px"><div class="row" style="font-size:80px"><p id="t2a">הפער</p><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">גדל</p></div><p id="t2c">עם השנים</p></div></div>
+  <svg class="ch" viewBox="0 0 1320 560"><defs><clipPath id="clipg"><rect id="clr" x="0" y="0" width="0" height="560"/></clipPath></defs>
+    <line class="gl" x1="40" x2="1280" y1="370" y2="370"/><line class="gl" x1="40" x2="1280" y1="270" y2="270"/><line class="gl" x1="40" x2="1280" y1="170" y2="170"/><line class="gl" x1="40" x2="1280" y1="70" y2="70"/><line class="axl" x1="40" x2="1280" y1="472" y2="472"/>
+    <g clip-path="url(#clipg)"><polygon class="gp" points="60,470 100,463.8 140,457.3 180,450.5 220,443.4 260,435.9 300,428.1 340,419.9 380,411.3 420,402.3 460,392.8 500,382.9 540,372.6 580,361.7 620,350.3 660,338.3 700,325.8 740,312.7 780,299 820,284.6 860,269.5 900,253.7 940,237.1 980,219.7 1020,201.5 1060,182.4 1100,162.4 1140,141.5 1180,119.5 1220,96.5 1260,72.4 1260,180.5 1220,196.6 1180,212.1 1140,227 1100,241.3 1060,255.1 1020,268.3 980,281 940,293.2 900,305 860,316.3 820,327.2 780,337.6 740,347.7 700,357.4 660,366.7 620,375.6 580,384.2 540,392.4 500,400.4 460,408 420,415.4 380,422.4 340,429.2 300,435.8 260,442 220,448.1 180,453.9 140,459.5 100,464.8 60,470"/><polyline class="lb" points="60,470 100,464.8 140,459.5 180,453.9 220,448.1 260,442 300,435.8 340,429.2 380,422.4 420,415.4 460,408 500,400.4 540,392.4 580,384.2 620,375.6 660,366.7 700,357.4 740,347.7 780,337.6 820,327.2 860,316.3 900,305 940,293.2 980,281 1020,268.3 1060,255.1 1100,241.3 1140,227 1180,212.1 1220,196.6 1260,180.5"/><polyline class="la" points="60,470 100,463.8 140,457.3 180,450.5 220,443.4 260,435.9 300,428.1 340,419.9 380,411.3 420,402.3 460,392.8 500,382.9 540,372.6 580,361.7 620,350.3 660,338.3 700,325.8 740,312.7 780,299 820,284.6 860,269.5 900,253.7 940,237.1 980,219.7 1020,201.5 1060,182.4 1100,162.4 1140,141.5 1180,119.5 1220,96.5 1260,72.4"/></g>
+    <g id="mk"><line class="mkl" id="mkl" x1="60" x2="60" y1="470" y2="470"/><circle class="mkd" id="mkb" r="13" cx="60" cy="470"/><circle class="mkd" id="mka" r="13" cx="60" cy="470"/></g></svg>
+  <p class="t ax" id="ax0" style="left:260px">היום</p><p class="t ax" id="ax1" style="left:660px">10 שנים</p><p class="t ax" id="ax2" style="left:1060px">20 שנה</p><p class="t ax" id="ax3" style="left:1460px">30 שנה</p>
+  <div class="lg" id="lg1" style="top:300px"><i style="background:var(--fg)"></i><p id="lg1t">מסלול א · 0.2%</p></div>
+  <div class="lg" id="lg2" style="top:356px"><i style="background:var(--mute)"></i><p id="lg2t">מסלול ב · 1.0%</p></div>
+  <p class="lab r" id="gl1" style="left:1600px;top:342px;font-size:40px;transform:rotate(-2deg)">הפער</p>
+  <p class="t fine" id="fn2" style="left:380px;top:812px">להמחשה בלבד · תשואה שנתית משוערת 5% לפני דמי ניהול</p>
+  <div class="capw"><div class="cap" id="cap2"><i class="mk"></i><div class="ct" id="ct2"><p id="cp2a">כל שנה</p><p id="cp2b" class="em">הפער מתרחב</p></div><i class="cur" id="cu2"></i></div></div>
+</div>
+</section>
+<section id="s3" class="clip scene" data-start="8" data-duration="4">
+<div class="cam" id="c3">
+  <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
+  <div class="card paper" id="pp"><i class="tape tl"></i><i class="tape tr"></i>
+    <p class="t" id="p1" style="right:50px;top:50px;font-size:50px;font-weight:700">דוח שנתי</p>
+    <p class="t" id="p2" style="right:50px;top:122px;font-size:28px;color:var(--mute)">חיסכון פנסיוני · נתוני הדגמה</p>
+    <i class="ln" style="position:absolute;right:50px;top:178px;width:470px"></i><i class="ln" style="position:absolute;right:50px;top:212px;width:360px"></i>
+    <i class="rowh" id="rh" style="top:286px"></i>
+    <p class="t" id="p3" style="right:50px;top:292px;font-size:38px">דמי ניהול מהצבירה</p><p class="t em" id="p4" style="left:50px;top:292px;font-size:38px;font-weight:700">1.0%</p>
+    <p class="t" id="p5" style="right:50px;top:372px;font-size:38px">דמי ניהול מההפקדה</p><p class="t" id="p6" style="left:50px;top:372px;font-size:38px;font-weight:700">2.0%</p>
+    <i class="ln" style="position:absolute;right:50px;top:458px;width:500px"></i><i class="ln" style="position:absolute;right:50px;top:492px;width:420px"></i><i class="ln" style="position:absolute;right:50px;top:526px;width:300px"></i>
+    <i class="ln r" style="position:absolute;right:50px;top:590px;width:180px"></i>
+  </div>
+  <div class="mag" id="mg"><i></i><b></b></div>
+  <div class="row" style="position:absolute;right:160px;top:160px;font-size:84px"><p id="t3a">מה</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">בודקים</p></div><p id="t3c">בדוח?</p></div>
+  <i class="cbx" style="right:160px;top:342px"><svg viewBox="0 0 60 60"><path class="ck" id="ck0" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl0" style="right:250px;top:330px;font-size:46px">דמי ניהול מהצבירה</p><i class="cbx" style="right:160px;top:458px"><svg viewBox="0 0 60 60"><path class="ck" id="ck1" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl1" style="right:250px;top:446px;font-size:46px">דמי ניהול מההפקדה</p><i class="cbx" style="right:160px;top:574px"><svg viewBox="0 0 60 60"><path class="ck" id="ck2" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl2" style="right:250px;top:562px;font-size:46px">מסלול ההשקעה</p><i class="cbx" style="right:160px;top:690px"><svg viewBox="0 0 60 60"><path class="ck" id="ck3" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl3" style="right:250px;top:678px;font-size:46px">כיסויים ביטוחיים</p>
+  <div class="capw"><div class="cap" id="cap3"><i class="mk"></i><div class="ct" id="ct3"><p id="cp3a">פעם בשנה,</p><p id="cp3b" class="em">פותחים את הדוח</p></div><i class="cur" id="cu3"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12" data-duration="3.4">
+<div class="cam" id="c4">
+  <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
+  <div class="card cal" id="cal"><i class="bnd"></i><i class="dc" style="left:22px;top:90px"></i><i class="dc" style="left:74px;top:90px"></i><i class="dc" style="left:126px;top:90px"></i><i class="dc" style="left:178px;top:90px"></i><i class="dc" style="left:22px;top:136px"></i><i class="dc" style="left:74px;top:136px"></i><i class="dc" style="left:126px;top:136px"></i><i class="dc" style="left:178px;top:136px"></i><i class="dc" style="left:22px;top:182px"></i><i class="dc" style="left:74px;top:182px"></i><i class="dc" style="left:126px;top:182px"></i><i class="dc" style="left:178px;top:182px"></i></div>
+  <i class="ring" id="rg1"></i><i class="ring" id="rg2" style="left:1064px"></i>
+  <svg class="cel" viewBox="0 0 280 200"><ellipse id="cel" pathLength="1" cx="156" cy="93" rx="44" ry="36"/></svg>
+  <div class="cw" style="top:410px"><div class="row" style="font-size:100px"><p id="e1">משווים</p><div class="hw"><i class="hb" id="hb-e2"></i><p id="e2" class="em">פעם בשנה</p></div></div></div>
+  <p class="t c" id="e3" style="top:560px;font-size:44px">ובודקים שדמי הניהול מתאימים לכם</p>
+  <div class="cw" style="top:670px"><div class="cta" id="cta"><i></i><p id="ctat">בודקים באפליקציה</p></div></div>
+  <p class="t c fine" id="fn4" style="top:810px">להמחשה בלבד · אין באמור ייעוץ פנסיוני או המלצה · בכפוף לתנאי הגוף המנהל</p>
+</div>
+</section>
+<div id="ov" class="clip" data-start="0" data-duration="15.4">
+<div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
+</div>
+</div>
+<script>
+const tl=gsap.timeline({paused:true});
+const S=[0,3.6,8,12,15.4],D=15.4;
+const P="power3.out",X="expo.out",B="back.out(1.7)";
+tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
+function capIn(n,at,W,E){tl.fromTo("#cap"+n,{opacity:0,y:24},{opacity:1,y:0,duration:.35,ease:"power2.out"},at);const d=Math.min(1.3,W/700),t0=at+.3;
+tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
+let r=Math.floor((E-t0-d-.45)/.24);if(r%2===0)r--;if(r>0)tl.fromTo("#cu"+n,{opacity:1},{opacity:0,duration:.24,repeat:r,yoyo:true,ease:"steps(1)"},t0+d);}
+function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
+function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
+function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
+function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
+// s1 two fee cards
+camIn(0);
+tl.fromTo("#c1",{scale:1.04},{scale:1,duration:3.6,ease:"none"},S[0]);
+tl.fromTo(["#h1a","#h1b"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
+hl("h1b",S[0]+.7);
+tl.fromTo("#fa",{y:120,opacity:0,rotation:3},{y:0,opacity:1,rotation:-1,duration:.7,ease:X},S[0]+.35);
+tl.fromTo("#fb",{y:120,opacity:0,rotation:-3},{y:0,opacity:1,rotation:1,duration:.7,ease:X},S[0]+.55);
+tl.fromTo(".fc .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.12},S[0]+.9);
+tl.fromTo("#vs",{scale:0},{scale:1,duration:.45,ease:B},S[0]+.95);
+tl.fromTo(["#faf","#fbf"],{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.8,ease:"power2.out",stagger:.2},S[0]+1.1);
+tl.fromTo("#fbv",{scale:1},{scale:1.08,duration:.25,yoyo:true,repeat:1,ease:"power1.inOut",transformOrigin:"100% 50%"},S[0]+1.9);
+capIn(1,S[0]+1.2,640,S[1]);
+fadeOut(0);
+// s2 gap chart with a red marker riding the gap
+camIn(1);
+tl.fromTo(["#t2a","#t2b","#t2c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.1},S[1]+.1);
+hl("t2b",S[1]+.55);
+tl.fromTo(".ch",{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P},S[1]+.15);
+tl.fromTo(".ax",{opacity:0,y:20},{opacity:1,y:0,duration:.4,ease:P,stagger:.08},S[1]+.35);
+tl.fromTo(["#lg1","#lg2"],{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.12},S[1]+.45);
+tl.fromTo("#mk",{opacity:0},{opacity:1,duration:.2},S[1]+.6);
+tl.fromTo("#clr",{attr:{width:60}},{attr:{width:1262},duration:2.4,ease:"none",autoRound:false},S[1]+.7);
+tl.to("#mkl",{keyframes:[{"attr":{"x1":260,"x2":260,"y1":435.9,"y2":442},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":460,"x2":460,"y1":392.8,"y2":408},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":660,"x2":660,"y1":338.3,"y2":366.7},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":860,"x2":860,"y1":269.5,"y2":316.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":1060,"x2":1060,"y1":182.4,"y2":255.1},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":1260,"x2":1260,"y1":72.4,"y2":180.5},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
+tl.to("#mka",{keyframes:[{"attr":{"cx":260,"cy":435.9},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":460,"cy":392.8},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":660,"cy":338.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":860,"cy":269.5},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1060,"cy":182.4},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1260,"cy":72.4},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
+tl.to("#mkb",{keyframes:[{"attr":{"cx":260,"cy":442},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":460,"cy":408},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":660,"cy":366.7},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":860,"cy":316.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1060,"cy":255.1},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1260,"cy":180.5},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
+tl.fromTo("#gl1",{scale:.4,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+3.1);
+tl.fromTo("#fn2",{opacity:0},{opacity:1,duration:.4},S[1]+1.2);
+capIn(2,S[1]+1.3,420,S[2]);
+fadeOut(1);
+// s3 statement + checklist
+camIn(2);
+tl.fromTo("#pp",{y:100,opacity:0,rotation:-6},{y:0,opacity:1,rotation:-2,duration:.7,ease:X},S[2]+.05);
+tl.fromTo("#pp .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.1},S[2]+.45);
+tl.fromTo("#mg",{x:-260,y:760,opacity:0},{x:575,y:392,opacity:1,duration:.9,ease:"power2.inOut"},S[2]+.4);
+tl.fromTo("#rh",{scaleX:0},{scaleX:1,duration:.5,ease:"power2.inOut"},S[2]+1.2);
+tl.to("#mg",{x:200,y:380,duration:.7,ease:"power2.inOut"},S[2]+1.4);
+tl.fromTo(["#t3a","#t3b","#t3c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.1},S[2]+.15);
+hl("t3b",S[2]+.6);
+tl.fromTo("#c3 .cbx,#c3 p.t[id^=cl]",{opacity:0,x:40},{opacity:1,x:0,duration:.4,ease:P,stagger:.07},S[2]+.5);
+for(let k=0;k<4;k++)draw("#ck"+k,S[2]+1.3+k*.3,.3);
+capIn(3,S[2]+1.2,560,S[3]);
+fadeOut(2);
+// s4 calendar close + disclaimer
+camIn(3);
+tl.fromTo("#cal",{y:60,opacity:0},{y:0,opacity:1,duration:.6,ease:X},S[3]+.05);
+tl.fromTo(["#rg1","#rg2"],{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.3,ease:B,stagger:.08},S[3]+.4);
+tl.fromTo(".dc",{scale:0},{scale:1,duration:.25,ease:B,stagger:.03},S[3]+.35);
+draw("#cel",S[3]+.9,.5);
+tl.fromTo(["#e1","#e2"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[3]+.3);
+hl("e2",S[3]+.8);
+tl.fromTo("#e3",{opacity:0,y:20},{opacity:1,y:0,duration:.45,ease:P},S[3]+.7);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1);
+tl.fromTo("#fn4",{opacity:0},{opacity:1,duration:.4},S[3]+1.3);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-pension-compare"]=tl;
+<\/script>
+</body>
+</html>
+`;export{e as default};

package/app/assets/bank-remote-access-Df8UNpc7.js ADDED Viewed

@@ -0,0 +1,257 @@
+var e=`<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920, height=1080">
+<title>גישה מרחוק? מנתקים</title>
+<script src="vendor/gsap.min.js"><\/script>
+<style>
+@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
+@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
+@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
+@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
+:root{--paper:#F4F4F2;--card:#FFFFFF;--ink:#141A26;--accent:#E3063B;--mute:#B4B8C0;--glow:#FF3B5C}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
+.scene{position:absolute;inset:0;overflow:hidden}
+.cam,.layer{position:absolute;inset:0}
+.abs{position:absolute}
+.m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
+.w{display:inline-block;white-space:nowrap}
+#root{background:radial-gradient(ellipse at 72% 18%,var(--card),var(--paper) 62%)}
+.t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--ink)}
+.b{font-weight:700}
+.bgl{position:absolute;height:2px;width:1400px;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:0 0}
+.ov{position:absolute;inset:0;pointer-events:none}
+.ov>*{pointer-events:auto}
+.brand{position:absolute;top:38px;right:44px;display:flex;align-items:center;gap:12px;height:57.2px;padding:0 26px;border-radius:28.6px;background:var(--card);box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 14%,transparent)}
+.brand i{width:15.6px;height:15.6px;border-radius:3px;background:var(--accent);flex:none}
+.brand p{font-size:26px;font-weight:700;color:var(--ink);white-space:nowrap}
+.ltw{position:absolute;left:0;right:0;display:flex;justify-content:center}
+.lt{display:flex;align-items:center;gap:12.8px;height:88px;padding:0 34px;border-radius:14px;background:var(--card);box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 16%,transparent)}
+.lt .mk{width:16.8px;height:16.8px;border-radius:3px;background:var(--accent);flex:none}
+.lt p{font-size:40px;white-space:nowrap;color:var(--ink);line-height:1.2}
+.lt .em{font-weight:700;color:var(--accent)}
+.lt .cu{width:12px;height:42px;background:var(--ink);flex:none}
+.card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
+.tape{position:absolute;width:140px;height:36px;background:var(--accent);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 18%,transparent)}
+.tape::after{content:"";position:absolute;left:44%;top:12px;width:12px;height:12px;background:color-mix(in srgb,var(--card) 85%,var(--accent))}
+.lab{position:absolute;padding:2px .55em 8px;font-weight:700;white-space:nowrap;line-height:1.2;box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 14%,transparent)}
+.lab.r{background:var(--accent);color:var(--card)}
+.lab.w{background:var(--card);color:var(--ink)}
+.lab.k{background:var(--ink);color:var(--card)}
+.hw{position:absolute;white-space:nowrap}
+.hw p{position:relative;line-height:1.15;color:var(--ink)}
+.hl{position:absolute;left:-12px;right:-12px;bottom:10%;height:34%;background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:100% 50%}
+.ul{position:absolute;left:-6px;right:-6px;bottom:-6px;height:7px;border-radius:4px;background:var(--accent);transform-origin:100% 50%}
+.cx{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:26px;white-space:nowrap}
+.cx .hw{position:relative}
+.cx>p{color:var(--ink);line-height:1.15}
+.ln{position:absolute;height:14px;border-radius:7px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
+.win{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
+.win>.wb{position:absolute;left:0;right:0;top:0;height:44px;background:var(--ink)}
+.win>.wb::before{content:"";position:absolute;left:18px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--mute);box-shadow:20px 0 0 var(--mute),40px 0 0 var(--mute)}
+.pill{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent)}
+.pill p{color:var(--card);font-weight:700;white-space:nowrap}
+.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:0 26px;border-radius:999px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 14%,transparent)}
+.chip i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
+.chip p{font-weight:700;white-space:nowrap;color:var(--ink)}
+.fine{position:absolute;white-space:nowrap;color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
+.dk{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--ink) 80%,var(--glow) 8%),var(--ink) 70%)}
+.glw{position:absolute;background:var(--glow);box-shadow:0 0 60px 6px color-mix(in srgb,var(--glow) 70%,transparent),0 0 180px 40px color-mix(in srgb,var(--glow) 32%,transparent)}
+.fig{position:absolute}
+.fig .h{position:absolute;border-radius:50%}
+.fig .bd{position:absolute;border-radius:48% 48% 14px 14px / 38% 38% 14px 14px}
+.ck{fill:none;stroke:var(--card);stroke-linecap:round;stroke-linejoin:round}
+.gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
+.c2{left:0;right:0;text-align:center}
+.lap{position:absolute;left:520px;top:270px;width:880px;height:520px;border-radius:26px;background:var(--ink);box-shadow:0 26px 60px color-mix(in srgb,var(--ink) 24%,transparent)}
+.lap>.sc{position:absolute;inset:18px;border-radius:10px;background:var(--paper);overflow:hidden}
+.lapb{position:absolute;left:430px;top:780px;width:1060px;height:36px;border-radius:4px 4px 24px 24px;background:color-mix(in srgb,var(--mute) 70%,var(--ink))}
+.lapb::after{content:"";position:absolute;left:470px;top:0;width:120px;height:10px;border-radius:0 0 8px 8px;background:color-mix(in srgb,var(--ink) 40%,var(--mute))}
+.dic{position:absolute;width:64px;height:64px;border-radius:14px;background:color-mix(in srgb,var(--mute) 45%,var(--card))}
+.cw{position:absolute;left:24px;bottom:22px;width:500px;height:420px;border-radius:18px;background:var(--card);overflow:hidden;box-shadow:0 16px 40px color-mix(in srgb,var(--ink) 22%,transparent)}
+.cwh{position:absolute;left:0;right:0;top:0;height:86px;background:var(--ink)}
+.hs{position:absolute;right:18px;top:13px;width:60px;height:60px;border-radius:50%;background:color-mix(in srgb,var(--mute) 70%,var(--ink))}
+.hs::before{content:"";position:absolute;left:12px;top:10px;width:36px;height:30px;border:6px solid var(--card);border-bottom:0;border-radius:20px 20px 0 0;box-sizing:border-box}
+.hs::after{content:"";position:absolute;left:9px;top:32px;width:42px;height:14px;border-radius:7px;background:var(--card)}
+.wt{color:var(--card)}
+.bb{position:absolute;right:18px;padding:10px 22px 14px;border-radius:22px 6px 22px 22px;background:color-mix(in srgb,var(--mute) 24%,var(--card));font-size:26px;line-height:1.3;white-space:nowrap;color:var(--ink)}
+.ins{position:absolute;left:18px;right:18px;top:262px;height:132px;border-radius:16px;background:color-mix(in srgb,var(--mute) 14%,var(--card));border:3px solid color-mix(in srgb,var(--mute) 40%,var(--card))}
+.apt{position:absolute;right:20px;top:24px;width:80px;height:80px;border-radius:22px;background:var(--ink)}
+.apt::before{content:"";position:absolute;left:16px;top:18px;width:48px;height:34px;border:6px solid var(--card);border-radius:6px;box-sizing:border-box}
+.apt::after{content:"";position:absolute;left:30px;top:56px;width:20px;height:6px;border-radius:3px;background:var(--accent)}
+.ib{position:absolute;left:20px;top:36px;width:130px;height:58px;border-radius:29px;background:var(--accent);display:flex;align-items:center;justify-content:center}
+.ib p{font-size:27px;font-weight:700;color:var(--card);white-space:nowrap}
+.pr{position:absolute;left:12px;top:28px;width:146px;height:74px;border-radius:37px;border:5px solid var(--accent)}
+.mon{position:absolute;left:300px;top:150px;width:1320px;height:720px;border-radius:28px;background:var(--ink);box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 26%,transparent)}
+.mon>.sc{position:absolute;inset:18px;border-radius:12px;background:var(--paper);overflow:hidden}
+.bar{position:absolute;left:0;right:0;top:0;height:90px;background:var(--card);border-bottom:3px solid color-mix(in srgb,var(--mute) 30%,var(--card))}
+.bal{position:absolute;right:40px;top:130px;width:560px;height:210px}
+.tile{position:absolute;top:380px;width:170px;height:160px;border-radius:18px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 10%,transparent)}
+.tile p{position:absolute;left:0;right:0;top:100px;text-align:center;font-size:30px;font-weight:700;color:var(--ink);white-space:nowrap}
+.tic{position:absolute;left:57px;top:26px;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--card));border:5px solid var(--accent)}
+.thl{position:absolute;inset:-6px;border-radius:22px;border:6px solid var(--accent)}
+.trx{position:absolute;left:40px;top:130px;width:560px;height:520px}
+.cur{position:absolute;left:250px;top:560px;width:64px;height:84px;overflow:visible}
+.cur path{fill:var(--card);stroke:var(--accent);stroke-width:5;stroke-linejoin:round}
+.clk{position:absolute;left:1110px;top:410px;width:90px;height:90px;border-radius:50%;border:6px solid var(--accent)}
+.scrim{position:absolute;inset:0;background:var(--ink)}
+.rf{position:absolute;inset:0;border-radius:12px;border:12px solid var(--accent);box-shadow:inset 0 0 40px color-mix(in srgb,var(--glow) 50%,transparent)}
+.tab{position:absolute;left:342px;top:0;width:600px;height:70px;border-radius:0 0 22px 22px;background:var(--accent);display:flex;align-items:center;justify-content:center;gap:16px}
+.tab i{width:18px;height:18px;border-radius:50%;background:var(--card);flex:none}
+.tab p{font-size:30px;font-weight:700;color:var(--card);white-space:nowrap}
+.nb{position:absolute;left:150px;top:170px;width:1000px;height:690px;border-radius:12px;background:var(--card);overflow:hidden;box-shadow:0 24px 54px color-mix(in srgb,var(--ink) 16%,transparent)}
+.nbh{position:absolute;left:0;right:0;top:0;height:110px;background:var(--accent)}
+.rw{position:absolute;left:50px;right:50px;height:150px;border-bottom:3px dashed color-mix(in srgb,var(--mute) 60%,var(--card))}
+.rn{position:absolute;right:20px;top:24px;width:96px;height:96px;border-radius:50%;border:6px solid var(--accent);font-size:56px;font-weight:700;color:var(--accent);text-align:center;line-height:82px}
+.noi{position:absolute;left:390px;top:470px;width:300px;height:300px}
+.noi .apt{right:60px;top:60px;width:180px;height:180px;border-radius:44px}
+.noi .apt::before{left:36px;top:40px;width:108px;height:78px;border-width:12px;border-radius:12px}
+.noi .apt::after{left:66px;top:126px;width:48px;height:12px;border-radius:6px}
+.noi svg{position:absolute;inset:0;overflow:visible}
+.ns{fill:none;stroke:var(--accent);stroke-width:22;stroke-linecap:round}
+.plg{position:absolute;left:-200px;top:250px;width:1200px;height:200px}
+.cab{position:absolute;left:0;top:86px;width:960px;height:24px;border-radius:12px;background:var(--ink)}
+.pb{position:absolute;left:840px;top:30px;width:200px;height:140px;border-radius:30px;background:var(--accent);box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 34%,transparent)}
+.pg{position:absolute;left:1040px;width:72px;height:24px;border-radius:0 8px 8px 0;background:var(--ink)}
+.sok{position:absolute;left:1080px;top:200px;width:260px;height:300px;border-radius:44px;background:var(--card);box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
+.sok i{position:absolute;left:-8px;width:26px;height:36px;border-radius:8px;background:var(--ink)}
+.spk{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-remote-access" data-start="0" data-width="1920" data-height="1080" data-duration="16.4">
+<section id="s1" class="clip scene" data-start="0" data-duration="4.2">
+<div class="cam" id="c1">
+  <i class="bgl" style="left:-120px;top:980px;transform:rotate(-14deg)"></i>
+  <div class="cx" style="top:104px"><p id="h1" style="font-size:80px;font-weight:700">״התמיכה״ ביקשה</p><div class="hw"><i class="hl" id="hl1"></i><p id="h1b" style="font-size:80px;font-weight:700;color:var(--accent)">להתקין אפליקציה?</p></div></div>
+  <div class="lapb" id="lapb"></div>
+  <div class="lap" id="lap"><div class="sc">
+    <i class="dic" style="right:40px;top:36px"></i><i class="dic" style="right:40px;top:126px"></i><i class="dic" style="right:40px;top:216px"></i><i class="dic" style="right:130px;top:36px"></i><i class="dic" style="right:130px;top:126px"></i>
+    <div class="cw" id="cw"><div class="cwh"><i class="hs"></i><p class="t b wt" id="cwn" style="right:96px;top:10px;font-size:30px">תמיכה טכנית</p><p class="t wt" id="cws" style="right:96px;top:48px;font-size:22px">מחובר עכשיו</p></div>
+      <p class="bb" id="m1" style="top:104px">שלום, זיהינו תקלה במחשב שלכם</p>
+      <p class="bb" id="m2" style="top:180px">התקינו אפליקציה ונתקן מרחוק</p>
+      <div class="ins" id="ins"><i class="apt"></i><p class="t b" id="ina" style="right:120px;top:22px;font-size:28px">שליטה מרחוק</p><p class="t gr" id="inb" style="right:120px;top:66px;font-size:22px">גישה מלאה למחשב</p><i class="pr" id="pr"></i><div class="ib"><p id="ibt">התקנה</p></div></div>
+    </div>
+  </div></div>
+  <div class="ltw" style="bottom:56px"><div class="lt" id="lt1"><i class="mk"></i><p id="lt1a">נשמע מקצועי?</p><p class="em" id="lt1b">זה בדיוק הטריק</p><i class="cu" id="lt1k"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="4.2" data-duration="4.2">
+<div class="cam" id="c2">
+  <div class="mon" id="mon"><div class="sc">
+    <div class="ui" id="ui">
+      <div class="bar"><p class="t b" id="u0" style="right:40px;top:22px;font-size:36px">החשבון שלי</p></div>
+      <div class="card bal"><p class="t gr" id="u1" style="right:36px;top:30px;font-size:30px">יתרה בחשבון</p><p class="t b" id="u2" style="right:36px;top:80px;font-size:84px">12,480 ₪</p></div>
+      <div class="tile" style="right:40px"><i class="tic"></i><p id="u3">העברה</p><i class="thl" id="thl"></i></div><div class="tile" style="right:230px"><i class="tic"></i><p id="u4">תשלום</p></div><div class="tile" style="right:420px"><i class="tic"></i><p id="u5">הגדרות</p></div>
+      <div class="card trx"><i class="ln" style="right:40px;left:200px;top:60px"></i><i class="ln" style="right:40px;left:260px;top:140px"></i><i class="ln" style="right:40px;left:180px;top:220px"></i><i class="ln" style="right:40px;left:240px;top:300px"></i><i class="ln" style="right:40px;left:300px;top:380px"></i></div>
+    </div>
+    <svg class="cur" id="cur" viewBox="0 0 64 84"><path d="M6 6v62l15-14 11 24 11-5-11-23h21z"/></svg>
+    <i class="clk" id="clk"></i>
+    <i class="scrim" id="scrim"></i>
+    <div class="cx" style="top:220px"><p id="g1" style="font-size:96px;font-weight:700;color:var(--card)">מי ששולט במסך</p></div>
+    <div class="cx" style="top:350px"><p id="g2" style="font-size:96px;font-weight:700;color:var(--glow)">שולט גם בחשבון</p></div>
+    <i class="rf" id="rf"></i>
+    <div class="tab" id="tab"><i id="tdot"></i><p id="tbt">מישהו אחר שולט במסך</p></div>
+  </div></div>
+  <div class="ltw" style="bottom:56px"><div class="lt" id="lt2"><i class="mk"></i><p id="lt2a">גישה מרחוק</p><p class="em" id="lt2b">פותחת להם את הדלת</p><i class="cu" id="lt2k"></i></div></div>
+</div>
+</section>
+<section id="s3" class="clip scene" data-start="8.4" data-duration="4.4">
+<div class="cam" id="c3">
+  <i class="bgl" style="left:900px;top:20px;transform:rotate(30deg)"></i>
+  <div class="nb" id="nb"><div class="nbh"><p class="t b wt" id="nbt" style="right:50px;top:18px;font-size:58px">שלושה כללים לגישה מרחוק</p></div><div class="rw" style="top:150px"><p class="rn" id="rn0">1</p><p class="t b" id="ra0" style="right:150px;top:16px;font-size:50px">לא מתקינים לפי בקשה</p><p class="t gr" id="rb0" style="right:150px;top:84px;font-size:32px">גם כשזה נשמע דחוף</p></div><div class="rw" style="top:320px"><p class="rn" id="rn1">2</p><p class="t b" id="ra1" style="right:150px;top:16px;font-size:50px">לא משתפים מסך</p><p class="t gr" id="rb1" style="right:150px;top:84px;font-size:32px">לא עם נציג ולא עם ״טכנאי״</p></div><div class="rw" style="top:490px"><p class="rn" id="rn2">3</p><p class="t b" id="ra2" style="right:150px;top:16px;font-size:50px">מנתקים ומתקשרים לבנק</p><p class="t gr" id="rb2" style="right:150px;top:84px;font-size:32px">ממספר שאתם מכירים</p></div></div>
+  <i class="tape" id="tp1" style="left:100px;top:150px;transform:rotate(-24deg)"></i><i class="tape" id="tp2" style="left:1060px;top:150px;transform:rotate(24deg)"></i>
+  <p class="t b" id="h5" style="right:110px;top:190px;font-size:78px">לפני שנותנים</p>
+  <p class="lab r" id="h6" data-r="-1.5" style="right:110px;top:300px;font-size:70px">גישה למכשיר</p>
+  <div class="noi" id="noi" style="left:1400px;top:440px"><i class="apt"></i><svg viewBox="0 0 300 300"><circle class="ns" id="nsc" cx="150" cy="150" r="136" pathLength="1"/><path class="ns" id="nsl" d="M54 54l192 192" pathLength="1"/></svg></div>
+  <div class="ltw" style="bottom:56px"><div class="lt" id="lt3"><i class="mk"></i><p id="lt3a">הבנק</p><p class="em" id="lt3b">לעולם לא יבקש</p><p id="lt3c">גישה למכשיר שלכם</p><i class="cu" id="lt3k"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12.8" data-duration="3.6">
+<div class="cam" id="c4">
+  <i class="bgl" style="left:-80px;top:120px;transform:rotate(12deg)"></i>
+  <div class="plg" id="plg" style="left:-52px;top:200px"><i class="cab"></i><i class="pb"></i><i class="pg" style="top:48px"></i><i class="pg" style="top:128px"></i></div>
+  <div class="sok" id="sok" style="left:1000px;top:150px"><i style="top:92px"></i><i style="top:172px"></i></div>
+  <svg class="abs" style="left:800px;top:190px;width:200px;height:220px;overflow:visible" viewBox="0 0 200 220"><path class="spk" d="M100 20v40" pathLength="1"/><path class="spk" d="M40 50l30 30" pathLength="1"/><path class="spk" d="M160 50l-30 30" pathLength="1"/><path class="spk" d="M100 200v-40" pathLength="1"/></svg>
+  <div class="cx" style="top:560px"><p id="e1" style="font-size:100px;font-weight:700">המסך שלכם</p><div class="hw"><i class="ul" id="ul4"></i><p id="e2" style="font-size:100px;font-weight:700;color:var(--accent)">נשאר שלכם</p></div></div>
+  <p class="t gr c2" id="e3" style="top:710px;font-size:40px">הבנק לא יבקש מכם להתקין תוכנה או לשתף מסך</p>
+  <div class="pill" id="cta" style="left:680px;top:820px;width:560px;height:104px"><p id="ctat" style="font-size:44px">בכל ספק, מתקשרים לבנק</p></div>
+</div>
+</section>
+<div id="ov" class="clip ov" data-start="0" data-duration="16.4">
+<div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
+</div>
+</div>
+<script>
+const tl=gsap.timeline({paused:true});
+const S=[0,4.2,8.4,12.8,16.4],D=16.4;
+const X="expo.out",P="power3.out",B="back.out(1.7)",E="power2.inOut";
+function sIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.35,ease:"power1.out"},S[i]);}
+function sOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.35,ease:"power1.in"},S[i+1]-.35);}
+function LT(id,t){tl.fromTo("#"+id,{y:50,opacity:0},{y:0,opacity:1,duration:.5,ease:P},t);
+tl.fromTo("#"+id+" p",{clipPath:"inset(-30% 0% -30% 100%)"},{clipPath:"inset(-30% 0% -30% 0%)",duration:.55,ease:"none",stagger:.5},t+.2);
+tl.fromTo("#"+id+"k",{opacity:1},{opacity:0,duration:.05,repeat:5,yoyo:true,repeatDelay:.25,ease:"none"},t+.3);}
+function HL(sel,t){tl.fromTo(sel,{scaleX:0},{scaleX:1,duration:.5,ease:P},t);}
+function UP(sel,t,st){tl.fromTo(sel,{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P,stagger:st||0},t);}
+function LAB(sel,t,st){tl.fromTo(sel,{x:60,opacity:0,rotation:-4},{x:0,opacity:1,rotation:(i,e)=>+(e.dataset.r||0),duration:.5,ease:B,stagger:st||.15},t);}
+function DRAW(sel,t,d,st){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d||.8,ease:E,stagger:st||0,autoRound:false},t);}
+tl.fromTo("#brand",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},.2);
+// s1 laptop + fake support chat
+sIn(0);
+UP("#h1",S[0]+.1);UP("#h1b",S[0]+.25);HL("#hl1",S[0]+.8);
+tl.fromTo(["#lap","#lapb"],{y:80,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[0]+.15);
+tl.fromTo("#cw",{scale:.7,opacity:0,transformOrigin:"0% 100%"},{scale:1,opacity:1,duration:.5,ease:B},S[0]+.7);
+tl.fromTo(["#m1","#m2"],{x:40,opacity:0},{x:0,opacity:1,duration:.4,ease:P,stagger:.45},S[0]+1.1);
+tl.fromTo("#ins",{y:30,opacity:0},{y:0,opacity:1,duration:.45,ease:B},S[0]+2);
+tl.fromTo("#pr",{scale:1,opacity:.9},{scale:1.45,opacity:0,duration:.7,ease:"power1.out",repeat:1},S[0]+2.4);
+LT("lt1",S[0]+1.2);
+sOut(0);
+// s2 monitor taken over: ghost cursor, red sharing frame, dark scrim
+sIn(1);
+tl.fromTo("#mon",{scale:.9,opacity:0},{scale:1,opacity:1,duration:.7,ease:X},S[1]+.05);
+tl.fromTo("#cur",{opacity:0},{opacity:1,duration:.2},S[1]+.45);
+tl.fromTo("#cur",{x:0,y:0},{x:880,y:-130,duration:1.1,ease:E},S[1]+.55);
+tl.fromTo("#clk",{scale:.3,opacity:1},{scale:1.5,opacity:0,duration:.45,ease:P},S[1]+1.7);
+tl.fromTo("#thl",{opacity:0},{opacity:1,duration:.2},S[1]+1.7);
+tl.fromTo("#rf",{opacity:0,scale:1.04},{opacity:1,scale:1,duration:.4,ease:P},S[1]+1);
+tl.fromTo("#rf",{opacity:1},{opacity:.4,duration:.25,yoyo:true,repeat:3,ease:"sine.inOut",immediateRender:false},S[1]+1.5);
+tl.fromTo("#tab",{y:-80},{y:0,duration:.45,ease:B},S[1]+1.1);
+tl.fromTo("#tdot",{opacity:1},{opacity:.2,duration:.3,yoyo:true,repeat:5,ease:"none"},S[1]+1.5);
+tl.fromTo("#scrim",{opacity:0},{opacity:.9,duration:.5,ease:"power1.inOut"},S[1]+2.3);
+tl.to("#ui",{opacity:.3,duration:.4},S[1]+2.3);
+tl.fromTo(["#g1","#g2"],{y:40,opacity:0},{y:0,opacity:1,duration:.55,ease:P,stagger:.18},S[1]+2.5);
+LT("lt2",S[1]+.9);
+sOut(1);
+// s3 taped notepad with three rules + no-install tile
+sIn(2);
+tl.fromTo("#nb",{y:90,opacity:0,rotation:2},{y:0,opacity:1,rotation:-1,duration:.8,ease:X},S[2]+.05);
+tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[2]+.5);
+tl.fromTo("#c3 .rw",{x:60,opacity:0},{x:0,opacity:1,duration:.5,ease:P,stagger:.4},S[2]+.6);
+tl.fromTo("#c3 .rn",{scale:0},{scale:1,duration:.4,ease:B,stagger:.4},S[2]+.7);
+UP("#h5",S[2]+.2);LAB("#h6",S[2]+.45);
+tl.fromTo("#noi .apt",{scale:0},{scale:1,duration:.5,ease:B},S[2]+1);
+DRAW("#nsc",S[2]+1.4,.5);DRAW("#nsl",S[2]+1.8,.3);
+LT("lt3",S[2]+1.7);
+sOut(2);
+// s4 plug pulled out of the socket
+sIn(3);
+tl.fromTo("#sok",{x:80,opacity:0},{x:0,opacity:1,duration:.5,ease:P},S[3]+.05);
+tl.fromTo("#plg",{opacity:0},{opacity:1,duration:.35,ease:P},S[3]+.05);
+tl.to("#plg",{x:-220,duration:.6,ease:"power3.inOut"},S[3]+.6);
+DRAW("#c4 .spk",S[3]+.95,.3,.05);
+tl.fromTo("#c4 .spk",{opacity:1},{opacity:0,duration:.3,immediateRender:false},S[3]+1.5);
+UP(["#e1","#e2"],S[3]+.5,.15);HL("#ul4",S[3]+1.1);
+UP("#e3",S[3]+1);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.3);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-remote-access"]=tl;
+<\/script>
+</body>
+</html>
+`;export{e as default};