/* ══════════════════════════════════════════════════════════
   مقاس رووم — هوية كريمية زجاجية
   أزرق للعناوين والأزرار · بنفسجي للمسات · أيقونات ملوّنة
   اتجاه من اليمين إلى اليسار في كل الصفحات
   ══════════════════════════════════════════════════════════ */

:root{
  /* من الشعار مباشرة */
  --cream:#FDF6F2;
  --cream-2:#FFFBF8;
  --blue-deep:#00236E;
  --blue:#004BCE;
  --blue-light:#2E7BF0;
  --purple:#6E3BD6;
  --purple-light:#9B6BF0;

  --green:#159E5B;
  --yellow:#D9A200;
  --orange:#EE7A23;
  --pink:#E0477E;
  --red:#D7453B;

  --ink:#15203C;
  --ink-2:#5A6480;
  --ink-3:#8E96AC;

  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.78);
  --line:rgba(0,35,110,.10);
  --line-2:rgba(0,35,110,.18);

  --r-xl:26px;
  --r-lg:20px;
  --r-md:15px;
  --shadow:0 14px 38px -16px rgba(0,35,110,.26);
  --shadow-s:0 6px 18px -8px rgba(0,35,110,.22);
  --tap:54px;
  --bottom: calc(74px + env(safe-area-inset-bottom));
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,"SF Arabic","SF Pro Text",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
/* إضاءة ناعمة جداً، بلا تموّجات ولا ازدحام */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 42% at 72% -4%, rgba(46,123,240,.13), transparent 62%),
    radial-gradient(58% 36% at 10% 2%, rgba(110,59,214,.09), transparent 64%);
}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}

.glass{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-radius:var(--r-xl);
}

/* ───────── بوابة الموافقة ───────── */
.gate{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:22px;
  background:var(--cream);
}
.gate::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(46,123,240,.16), transparent 60%),
    radial-gradient(54% 34% at 8% 6%, rgba(110,59,214,.12), transparent 62%);
}
.gate-card{position:relative;padding:26px 22px 30px;max-width:420px;width:100%;text-align:center}
.gate-logo{inline-size:190px;margin:0 auto 10px}
.gate-close{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  inline-size:34px; block-size:34px; border:0; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-3);
  background:rgba(0,35,110,.06);
}
.gate-close svg{inline-size:16px;block-size:16px}
.gate-close:active{transform:scale(.92)}
.gate-title{font-size:25px;font-weight:800;color:var(--blue-deep);letter-spacing:-.3px}
.gate-sub{margin-block:8px 18px;color:var(--ink-2);font-size:14.5px}
.gate-note{margin-block-start:12px;font-size:12.5px;color:var(--ink-3)}

.agree{
  display:flex; align-items:center; gap:11px;
  padding:13px 15px; margin-block-end:10px;
  background:var(--glass-2); border:1px solid var(--line);
  border-radius:var(--r-md); text-align:start; cursor:pointer;
}
.agree input{position:absolute;opacity:0;width:0;height:0}
.agree-box{
  inline-size:24px; block-size:24px; flex:0 0 auto; border-radius:8px;
  border:2px solid var(--line-2); background:#fff;
  display:grid; place-items:center; transition:all .16s ease;
}
/* علامة الصح شكل هندسي لا نص: حدود فيزيائية حتى لا تنعكس مع اتجاه الصفحة */
.agree-box::after{
  content:""; width:11px; height:6px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  margin-bottom:2px;
  transform:rotate(-45deg) scale(.4); opacity:0; transition:all .16s ease;
}
.agree input:checked + .agree-box{background:var(--blue);border-color:var(--blue)}
.agree input:checked + .agree-box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.agree-text{font-size:14.5px;color:var(--ink)}
.linkish{background:none;border:0;padding:0;color:var(--blue);font-weight:700;text-decoration:underline}

/* ───────── الشريط العلوي ───────── */
.topbar{
  position:sticky; inset-block-start:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:max(8px,env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(to bottom,var(--cream) 62%,rgba(253,246,242,0));
}
.topbar.is-hidden{display:none}
.topbar-title{font-size:17.5px;font-weight:750;color:var(--blue-deep);letter-spacing:-.2px}
.topbar-spacer{margin-inline-start:auto}
.iconbtn{
  inline-size:40px; block-size:40px; flex:0 0 auto; border:0;
  display:grid; place-items:center; border-radius:13px;
  background:var(--glass-2); color:var(--blue-deep);
  box-shadow:var(--shadow-s);
}
.iconbtn svg{inline-size:21px;block-size:21px;transform:scaleX(-1)}

/* ───────── الشاشات ───────── */
#main{position:relative;z-index:1}
.screen{
  display:none; flex-direction:column;
  min-height:calc(100dvh - 58px);
  padding:2px 18px var(--bottom);
}
.screen.is-active{
  display:flex;
  animation:in .36s cubic-bezier(.22,.85,.26,1) both;
}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen-center{align-items:center;justify-content:center;text-align:center;gap:16px}

.page-title{
  font-size:23px; font-weight:800; color:var(--blue-deep);
  letter-spacing:-.3px; line-height:1.4; margin-block:6px 16px;
}
.field-label{
  font-size:13.5px; font-weight:700; color:var(--purple);
  margin-block:18px 9px;
}

/* ───────── الرئيسية ───────── */
#screen-home{padding-top:max(6px,env(safe-area-inset-top))}

.home-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-block-end:4px;
}
.glassbtn{
  inline-size:46px; block-size:46px; flex:0 0 auto; border:1px solid rgba(255,255,255,.8);
  display:grid; place-items:center; border-radius:15px;
  background:var(--glass-2); color:var(--blue); box-shadow:var(--shadow-s);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.glassbtn svg{inline-size:23px;block-size:23px}
.glassbtn:active{transform:scale(.94)}
.glassbtn-purple{color:var(--purple)}
.home-logo{inline-size:min(190px,46vw);block-size:auto}

.hero-title{
  text-align:center; margin-block-start:2px;
  font-size:clamp(25px,7.6vw,32px); font-weight:800;
  color:var(--blue-deep); line-height:1.3; letter-spacing:-.5px;
}
.hero-sub{
  text-align:center; margin-block-start:9px;
  font-size:clamp(14.5px,4.1vw,16.5px);
  color:var(--purple); font-weight:700; line-height:1.55;
}

/* الصورة تمتد بعرض الشاشة وتذوب أطرافها في الخلفية الكريمية */
.hero-photo{
  margin:16px -18px 0; position:relative; line-height:0;
}
.hero-photo img{
  inline-size:100%; block-size:auto;
  max-block-size:min(38dvh,330px); object-fit:cover; object-position:50% 22%;
}
.hero-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--cream) 0%, rgba(253,246,242,0) 16%,
                    rgba(253,246,242,0) 76%, var(--cream) 99%),
    linear-gradient(to right, var(--cream) 0%, rgba(253,246,242,0) 11%,
                    rgba(253,246,242,0) 89%, var(--cream) 100%);
}

.hero-cta{margin-block-start:-6px;position:relative;z-index:2}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-block-start:14px}
.card3{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:14px 6px; border-radius:var(--r-lg);
  font-size:12.5px; font-weight:750; color:var(--blue-deep);
  line-height:1.4; text-align:center;
  transition:transform .15s ease;
}
.card3:active{transform:scale(.97)}
.card3 .fi{inline-size:42px;block-size:42px}

/* أيقونات ملوّنة */
.fi{
  inline-size:44px; block-size:44px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:14px;
}
.fi svg{inline-size:22px;block-size:22px}
.fi-blue{background:rgba(0,75,206,.12);color:var(--blue)}
.fi-purple{background:rgba(110,59,214,.13);color:var(--purple)}
.fi-green{background:rgba(21,158,91,.13);color:var(--green)}
.fi-yellow{background:rgba(217,162,0,.15);color:var(--yellow)}
.fi-orange{background:rgba(238,122,35,.14);color:var(--orange)}
.fi-pink{background:rgba(224,71,126,.13);color:var(--pink)}
.fi-red{background:rgba(215,69,59,.12);color:var(--red)}

/* ───────── الأزرار ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  inline-size:100%; min-block-size:var(--tap); padding:0 18px;
  border:0; border-radius:999px;
  font-size:16px; font-weight:750; letter-spacing:-.2px;
  transition:transform .13s ease, box-shadow .13s ease;
}
.btn:active{transform:scale(.975)}
.btn .bi{inline-size:20px;block-size:20px;flex:0 0 auto}
.btn-xl{min-block-size:58px;font-size:17px}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff; box-shadow:0 12px 26px -12px rgba(0,75,206,.75);
}
.btn-primary:disabled{
  background:rgba(0,35,110,.09); color:var(--ink-3);
  box-shadow:none; transform:none; cursor:not-allowed;
}
.btn-purple{
  background:linear-gradient(135deg,var(--purple-light),var(--purple));
  color:#fff; box-shadow:0 12px 26px -12px rgba(110,59,214,.7);
}
.btn-ghost{
  background:var(--glass-2); color:var(--blue-deep);
  border:1px solid var(--line); box-shadow:var(--shadow-s);
}
.btn-danger{color:var(--red)}
.row{display:flex;gap:10px}
.row>.btn{flex:1 1 0;min-width:0;font-size:14.5px;padding:0 12px}
.row>.btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dock{
  position:sticky; inset-block-end:0; margin-block-start:auto;
  display:flex; flex-direction:column; gap:10px;
  padding-block:14px 12px; margin-inline:-18px; padding-inline:18px;
  background:linear-gradient(to top,var(--cream) 62%,rgba(253,246,242,0));
}
.dock-note{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5}

/* ───────── مساحات الصور ───────── */
.photo-stage{
  position:relative; inline-size:100%; aspect-ratio:3/4;
  max-block-size:46dvh; margin-inline:auto;
  display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-xl);
}
.photo-empty{color:rgba(0,35,110,.22)}
.photo-empty svg{inline-size:72px;block-size:72px}
.photo-view{inline-size:100%;block-size:100%;object-fit:cover}

.tips{display:flex;flex-direction:column;gap:9px;margin-block-start:16px}
.tips li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink-2)}
.ti{inline-size:34px;block-size:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px}
.ti svg{inline-size:17px;block-size:17px}
.ti-blue{background:rgba(0,75,206,.1);color:var(--blue)}
.ti-purple{background:rgba(110,59,214,.11);color:var(--purple)}
.ti-green{background:rgba(21,158,91,.11);color:var(--green)}
.ti-yellow{background:rgba(217,162,0,.13);color:var(--yellow)}
.ti-orange{background:rgba(238,122,35,.12);color:var(--orange)}

.checks{display:flex;flex-direction:column;gap:7px;margin-block-start:14px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.chk svg{inline-size:16px;block-size:16px;flex:0 0 auto;margin-block-start:3px}
.chk.pass{color:var(--green)}
.chk.warn{color:var(--orange)}
.chk.fail{color:var(--red)}

/* ───────── شريط الاختيارات ───────── */
.seg{
  display:flex; gap:7px; padding:5px;
  background:var(--glass-2); border:1px solid var(--line);
  border-radius:999px; overflow-x:auto; scrollbar-width:none;
  box-shadow:var(--shadow-s);
}
.seg::-webkit-scrollbar{display:none}
.seg[hidden]{display:none}
.seg-btn{
  flex:0 0 auto; min-block-size:36px; padding-inline:15px;
  background:transparent; border:0; border-radius:999px;
  color:var(--ink-2); font-size:14px; font-weight:650; white-space:nowrap;
}
.seg-btn.is-on{background:linear-gradient(135deg,var(--blue-light),var(--blue));color:#fff}

/* ───────── التجهيز ───────── */
.hanger-load{inline-size:170px;color:var(--blue)}
.hanger-load svg{inline-size:100%;overflow:visible}
#hanger-path,#hanger-body{
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  animation:draw 2.3s ease-in-out infinite;
}
#hanger-body{animation-delay:.3s}
@keyframes draw{
  0%{stroke-dashoffset:var(--len,300);opacity:.35}
  45%{stroke-dashoffset:0;opacity:1}
  80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:.35}
}
.load-title{font-size:19px;font-weight:750;color:var(--blue-deep)}
.bar{
  inline-size:min(260px,78vw); block-size:9px; border-radius:99px;
  background:rgba(0,35,110,.09); overflow:hidden;
}
.bar>span{
  display:block; block-size:100%; inline-size:0;
  border-radius:99px; background:linear-gradient(90deg,var(--purple),var(--blue));
  transition:width .5s cubic-bezier(.3,.9,.3,1);
}
#screen-loading .btn{inline-size:auto;min-inline-size:130px}

/* ───────── النتيجة ───────── */
.result-card{padding:7px}
.reveal{
  --p:55%;
  position:relative; inline-size:100%; line-height:0;
  border-radius:var(--r-lg); overflow:hidden;
  touch-action:none; cursor:ew-resize; user-select:none;
  background:rgba(255,255,255,.5);
}
.result-img{inline-size:100%;max-block-size:52dvh;object-fit:contain}
.reveal-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.reveal-before img{inline-size:100%;block-size:100%;object-fit:contain}
.reveal-bar{
  position:absolute; inset-block:0; inset-inline-start:var(--p);
  inline-size:2px; margin-inline-start:-1px; background:#fff;
  box-shadow:0 0 12px rgba(0,35,110,.45);
  display:grid; place-items:center; pointer-events:none;
}
.reveal-knob{
  inline-size:36px; block-size:36px; border-radius:50%;
  background:#fff; box-shadow:0 4px 14px rgba(0,35,110,.35);
  position:relative;
}
.reveal-knob::before,.reveal-knob::after{
  content:""; position:absolute; inset-block-start:50%;
  margin-block-start:-5px; border-block:5px solid transparent;
}
.reveal-knob::before{inset-inline-start:9px;border-inline-end:6px solid var(--blue)}
.reveal-knob::after{inset-inline-end:9px;border-inline-start:6px solid var(--blue)}
.reveal.is-single .reveal-before,.reveal.is-single .reveal-bar{display:none}
.reveal-hint{font-size:12px;color:var(--ink-3);text-align:center;padding-block:8px 4px;line-height:1.5}

.stars{display:flex;justify-content:center;gap:10px}
.star{
  background:none; border:0; font-size:34px; line-height:1;
  color:rgba(0,35,110,.17); transition:transform .14s ease,color .14s ease;
}
.star.is-on{color:var(--yellow)}
.star:active{transform:scale(.88)}
.stars-label{text-align:center;font-size:13.5px;color:var(--ink-2);min-block-size:20px;margin-block-start:6px}

.trio{display:flex;gap:9px}
.trio-btn{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 6px; border:1px solid rgba(255,255,255,.75);
  background:var(--glass); border-radius:var(--r-md);
  box-shadow:var(--shadow-s);
  font-size:12.5px; font-weight:700; color:var(--blue-deep);
  text-align:center; line-height:1.3;
}
.trio-btn:active{transform:scale(.97)}
.trio-btn .fi{inline-size:38px;block-size:38px}
.trio-btn .fi svg{inline-size:19px;block-size:19px}

/* ───────── الخزانة ───────── */
.grid{
  display:grid; gap:11px; margin-block-start:14px;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
}
.tile{
  position:relative; padding:0; aspect-ratio:3/4; overflow:hidden;
  border:1px solid rgba(255,255,255,.8); border-radius:var(--r-md);
  background:var(--glass); box-shadow:var(--shadow-s);
  transition:transform .15s ease;
}
.tile:active{transform:scale(.97)}
.tile img{inline-size:100%;block-size:100%;object-fit:cover}
.tile-cap{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding:16px 8px 7px; font-size:11px; font-weight:650; color:#fff;
  text-align:start; background:linear-gradient(to top,rgba(0,20,60,.82),transparent);
}
.tile-del{
  position:absolute; inset-block-start:6px; inset-inline-end:6px;
  inline-size:27px; block-size:27px; border:0; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(0,20,60,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tile-del svg{inline-size:13px;block-size:13px}

.empty{padding:30px 22px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.empty p{color:var(--ink-2);font-size:14.5px}
.empty .btn{inline-size:auto;padding-inline:26px}

/* ───────── المشاركة ───────── */
.share-stack{padding:9px;display:grid;place-items:center}
.share-stack img{inline-size:100%;max-block-size:46dvh;object-fit:contain;border-radius:var(--r-lg)}
.share-copy{
  margin-block-start:16px; text-align:center; font-size:16px;
  font-weight:700; color:var(--purple); line-height:1.6;
}

/* ───────── التنبيهات والصفوف ───────── */
.notice{display:flex;gap:12px;padding:16px;margin-block-start:14px;align-items:flex-start}
.notice-title{font-weight:750;font-size:14.5px;color:var(--blue-deep)}
.notice-body{font-size:13.5px;color:var(--ink-2);margin-block-start:3px;line-height:1.6}

.credit{padding:18px;display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center}
.credit-title{font-size:14px;font-weight:750;color:var(--blue-deep)}
.credit-state{font-size:13.5px;color:var(--ink-2)}
.credit .btn{inline-size:auto;padding-inline:24px}

.rows{margin-block-start:14px;overflow:hidden;padding:4px}
.rowitem{
  display:flex; align-items:center; gap:12px;
  inline-size:100%; padding:12px; border:0; background:none;
  font-size:15px; font-weight:650; color:var(--ink); text-align:start;
}
.rowitem + .rowitem{border-block-start:1px solid var(--line)}
/* السهم يشير إلى اليسار في صفحة عربية — أي إلى داخل الصفحة التالية */
.rowitem .chev{inline-size:18px;block-size:18px;margin-inline-start:auto;color:var(--ink-3)}
.rowitem:active{background:rgba(255,255,255,.6);border-radius:12px}

/* ───────── الصفحات النصّية ───────── */
.doc{padding:20px;display:flex;flex-direction:column;gap:14px}
.doc h3{font-size:15.5px;font-weight:750;color:var(--blue-deep);margin:0}
.doc p{font-size:14px;color:var(--ink-2);line-height:1.75}
.doc .warn{
  padding:13px 15px; border-radius:var(--r-md);
  background:rgba(238,122,35,.09); border:1px solid rgba(238,122,35,.26);
  color:#8A4710; font-size:13.5px; line-height:1.7;
}

/* ───────── شريط التنقل ───────── */
.tabbar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:40;
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:8px 6px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,251,248,.86);
  border-block-start:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.tabbar.is-hidden{display:none}
.tab{
  flex:1 1 0; border:0; background:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:5px 2px; color:var(--ink-3); font-size:10.5px; font-weight:650;
}
.tab svg{inline-size:22px;block-size:22px}
.tab.is-on{color:var(--blue)}
.tab-mid{position:relative}
.tab-fab{
  inline-size:48px; block-size:48px; margin-block-start:-20px;
  display:grid; place-items:center; border-radius:17px;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff; box-shadow:0 10px 22px -8px rgba(0,75,206,.8);
}
.tab-fab svg{inline-size:23px;block-size:23px}
.tab-mid.is-on .tab-fab{background:linear-gradient(135deg,var(--purple-light),var(--purple))}

/* ───────── التنبيه العائم ───────── */
.toast{
  position:fixed; inset-inline:18px; inset-block-end:calc(var(--bottom) + 14px);
  z-index:70; padding:13px 16px; text-align:center;
  background:rgba(255,255,255,.95); border:1px solid var(--line-2);
  border-radius:15px; box-shadow:var(--shadow);
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:rise .22s ease;
}
.toast.err{border-color:rgba(215,69,59,.45);color:var(--red)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media (min-width:620px){
  #main,.topbar{max-inline-size:540px;margin-inline:auto}
  .tabbar{max-inline-size:540px;margin-inline:auto;border-radius:22px 22px 0 0}
}

/* زر بانتظار الموافقة: واضح أنه غير جاهز، لكنه يستجيب ويشرح */
.btn.is-waiting{
  background:linear-gradient(135deg,#9FB4D8,#7D93BC);
  box-shadow:none;
}
.agree.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}