/* ================= الألوان والخطوط =================
   لتغيير أي لون في الموقع كله، غيّره هنا بس.            */
:root{
  --bg:#0B1020;        /* الخلفية الرئيسية */
  --surface:#14213D;   /* خلفية الكروت والأقسام */
  --gold:#D4AF37;      /* اللون المميز: الأزرار والروابط */
  --text:#F5F5F0;      /* العناوين والنصوص الأساسية */
  --muted:#8C96A8;     /* النصوص الثانوية */
  --border:#29334A;    /* الحدود والفواصل */
  --display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r-lg:28px; --r-md:20px;
  --gutter:clamp(16px,4vw,40px);
  --max:1240px;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;line-height:1.15}
p{margin:0}
::selection{background:var(--gold);color:var(--bg)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:16px;top:16px;z-index:200;background:var(--gold);color:var(--bg);padding:8px 14px;border-radius:8px}
.wrap,.section,.reel,.contact,.foot{width:min(var(--max), calc(100% - 2*var(--gutter)));margin-inline:auto}

/* ================= شاشة التحميل ================= */
.loader{
  position:fixed;inset:0;z-index:300;background:var(--surface);display:grid;place-items:center;
  transition:clip-path .8s var(--ease) .1s;clip-path:inset(0 0 0 0);
}
.loader__mark{width:64px;height:64px;fill:var(--gold);animation:pop 1s var(--ease) infinite alternate}
@keyframes pop{from{transform:scale(.8) rotate(-8deg)}to{transform:scale(1.05) rotate(8deg)}}
body.loaded .loader{clip-path:inset(0 0 100% 0)}
html:not(.js) .loader{display:none}

/* ================= الأزرار (النص بيلف لفوق مع الهوفر) ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;padding:0 28px;border-radius:999px;
  font:700 16px/1 var(--body);text-decoration:none;white-space:nowrap;
  transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.btn:active{transform:scale(.96)}
.btn--gold{background:var(--gold);color:var(--bg)}
.btn--gold:hover{background:var(--text)}
.btn--line{border:1.5px solid rgba(245,245,240,.3);color:var(--text)}
.btn--line:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{min-height:44px;padding:0 20px;font-size:15px}
.roll{position:relative;display:inline-block;overflow:hidden;line-height:1.3;vertical-align:middle}
.roll::after{content:attr(data-t);position:absolute;inset:100% 0 auto 0;text-align:center}
.roll,.roll::after{transition:transform .45s var(--ease)}
.btn:hover .roll,.foot__social a:hover .roll{transform:translateY(-100%)}
.btn:hover .roll::after,.foot__social a:hover .roll::after{transform:translateY(0)}

/* ================= الهيدر والقائمة ================= */
.nav{
  position:fixed;top:14px;inset-inline:var(--gutter);z-index:100;
  display:flex;align-items:center;gap:10px;pointer-events:none;
}
.nav > *{pointer-events:auto}
.nav__brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(20,33,61,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:999px;padding:5px 5px 5px 18px;padding-inline-start:5px;
  margin-inline-end:auto;line-height:1.25;
}
.nav__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;background:var(--border)}
.top-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
/* شعار صغير في الهيدر: دايرة ذهبي بتلف وزرار Play */
.nav__mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);flex:none}
.nav__mark svg{width:40px;height:40px;overflow:visible}
.nav__ring{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:80 27;stroke-linecap:round;transform-origin:20px 20px;transition:transform .8s var(--ease)}
.nav__play{fill:var(--gold);transform-origin:20px 20px;transition:transform .4s var(--ease)}
.nav__brand:hover .nav__ring{transform:rotate(200deg)}
.nav__brand:hover .nav__play{transform:scale(1.15)}
.nav__brand b{display:block;font-size:15px;font-family:var(--display)}
.nav__brand small{display:block;font-size:12px;color:var(--muted)}
.nav__menu{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--border);cursor:pointer;
  background:rgba(20,33,61,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;place-content:center;gap:6px;
}
.nav__menu i{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .4s var(--ease)}
.nav__menu[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.nav__menu[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:90;background:var(--surface);
  display:flex;align-items:center;padding:100px var(--gutter) 40px;
  clip-path:circle(0% at 40px 40px);transition:clip-path .7s var(--ease);visibility:hidden;
}
[dir="rtl"] .menu{clip-path:circle(0% at calc(100% - 40px) 40px)}
.menu.open{clip-path:circle(150% at 50% 0);visibility:visible}
.menu ol{list-style:none;margin:0 auto;padding:0;width:min(var(--max),100%)}
.menu li{overflow:hidden}
.menu a{
  display:inline-block;font-family:var(--display);font-weight:800;text-decoration:none;
  font-size:clamp(28px,4.4vw,50px);line-height:1.45;transform:translateY(110%);
  transition:transform .6s var(--ease), color .2s;
}
.menu.open a{transform:none}
.menu.open li:nth-child(2) a{transition-delay:.05s}.menu.open li:nth-child(3) a{transition-delay:.1s}
.menu.open li:nth-child(4) a{transition-delay:.15s}.menu.open li:nth-child(5) a{transition-delay:.2s}
.menu a:hover{color:var(--gold)}

/* ================= الواجهة ================= */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:110px var(--gutter) 90px;overflow:hidden;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(140,150,168,.22) 1.2px, transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero::before{
  content:"";position:absolute;width:70vmax;height:70vmax;left:50%;top:45%;translate:-50% -50%;
  background:radial-gradient(circle, rgba(20,33,61,.95), transparent 62%);pointer-events:none;
}
.hero__layout{
  position:relative;z-index:2;width:min(var(--max),100%);margin-inline:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center;
}
.hero__inner{min-width:0}
.status{
  display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:6px 16px;margin-bottom:26px;background:rgba(20,33,61,.6);
}
.status__dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero__name{
  font-size:clamp(56px,8.6vw,128px);line-height:1.05;letter-spacing:-.01em;
  display:flex;gap:.24em;flex-wrap:wrap;
}
.w{display:inline-block;overflow:hidden;padding:.06em .02em .36em;margin-bottom:-.22em}
.w__i{display:inline-block}
.w:nth-child(2) .w__i{color:var(--gold)}
.hero__role{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,28px);color:var(--muted);margin-top:28px}
.hero__intro{font-size:clamp(16.5px,1.6vw,19px);color:var(--muted);max-width:34em;margin:16px 0 32px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* صورة الواجهة: إطار نظيف بزوايا كاميرا ذهبية، بيظهر بحركة كشف من تحت لفوق */
.hero__media{position:relative;justify-self:center;width:min(420px,100%);padding:14px}
.hero__frame{
  position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;
  background:var(--surface);box-shadow:0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px var(--border);
}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.2s var(--ease)}
.hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(11,16,32,.55), transparent 35%);
}
/* إضاءة ذهبي خفيفة بتعدّي على الصورة كل كام ثانية */
.hero__frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg, transparent 35%, rgba(255,226,140,.10) 44%, rgba(212,175,55,.38) 50%, rgba(255,226,140,.10) 56%, transparent 65%);
  background-size:260% 100%;background-position:120% 0;
}
.loaded .hero__frame::before{animation:sheen 7s ease-in-out 2.4s infinite}
@keyframes sheen{0%{background-position:120% 0}35%,100%{background-position:-20% 0}}
.hero__media:hover .hero__frame img{transform:scale(1.04)}
.hero__corners{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero__corners i{position:absolute;width:34px;height:34px;border:0 solid var(--gold);transition:transform .7s var(--ease), opacity .6s}
.hero__corners i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px;border-top-left-radius:10px}
.hero__corners i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0;border-top-right-radius:10px}
.hero__corners i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px;border-bottom-left-radius:10px}
.hero__corners i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0;border-bottom-right-radius:10px}
.hero__media:hover .hero__corners i:nth-child(1){transform:translate(6px,6px)}
.hero__media:hover .hero__corners i:nth-child(2){transform:translate(-6px,6px)}
.hero__media:hover .hero__corners i:nth-child(3){transform:translate(6px,-6px)}
.hero__media:hover .hero__corners i:nth-child(4){transform:translate(-6px,-6px)}
.hero__chip{
  position:absolute;bottom:44px;inset-inline-end:-18px;z-index:3;display:flex;align-items:center;gap:12px;
  background:rgba(20,33,61,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:16px;padding:10px 16px;color:var(--text);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
.hero__chip b{font-family:var(--display);font-size:26px;line-height:1;color:var(--gold);direction:ltr}
.hero__chip span{font-size:13px;font-weight:500;color:var(--muted);line-height:1.35;max-width:7em}
/* حركة الدخول */
.js .hero__frame{clip-path:inset(100% 0 0 0 round 24px)}
.js .hero__frame img{transform:scale(1.15)}
.js .hero__corners i{opacity:0}
.js .hero__corners i:nth-child(1){transform:translate(-14px,-14px)}
.js .hero__corners i:nth-child(2){transform:translate(14px,-14px)}
.js .hero__corners i:nth-child(3){transform:translate(-14px,14px)}
.js .hero__corners i:nth-child(4){transform:translate(14px,14px)}
.js .hero__chip{opacity:0;transform:translateY(16px)}
.loaded .hero__frame{clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) .3s}
.loaded .hero__frame img{transform:scale(1);transition:transform 1.6s var(--ease) .3s}
.loaded .hero__media:hover .hero__frame img{transform:scale(1.04);transition-delay:0s}
.loaded .hero__corners i{opacity:1;transform:none;transition:transform .8s var(--ease) 1.2s, opacity .6s 1.2s}
.loaded .hero__media:hover .hero__corners i{transition-delay:0s}
.loaded .hero__chip{opacity:1;transform:none;transition:opacity .6s 1.5s, transform .8s var(--ease) 1.5s}

/* حركة دخول الواجهة بعد شاشة التحميل */
.js .w__i{transform:translateY(105%)}
.js .status,.js .hero__role,.js .hero__intro,.js .hero__actions{opacity:0;filter:blur(8px);transform:translateY(16px)}
.loaded .w__i{transform:none;transition:transform 1s var(--ease) .35s}
.loaded .w:nth-child(2) .w__i{transition-delay:.47s}
.loaded .status,.loaded .hero__role,.loaded .hero__intro,.loaded .hero__actions{
  opacity:1;filter:none;transform:none;transition:opacity .8s,filter .8s,transform .8s var(--ease);
}
.loaded .status{transition-delay:.25s}.loaded .hero__role{transition-delay:.7s}
.loaded .hero__intro{transition-delay:.8s}.loaded .hero__actions{transition-delay:.9s}

/* أشكال الجرافيك العايمة */
.shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.shape{position:absolute;overflow:visible;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.shape *{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.s1{width:clamp(60px,7vw,110px);top:12%;right:4%;animation:float 7s ease-in-out infinite}
.s1 circle{stroke:var(--muted)}
.s2{width:clamp(50px,5vw,80px);top:14%;left:46%;animation:float 6s ease-in-out infinite reverse}
.s2 path{fill:var(--gold);stroke:var(--gold)}
.s3{width:clamp(110px,12vw,180px);bottom:9%;right:38%;animation:float 8s ease-in-out infinite}
.s3 path{stroke:var(--gold);stroke-dasharray:240;stroke-dashoffset:240;animation:draw 2.4s var(--ease) 1.2s forwards}
.s4{width:clamp(36px,4vw,56px);bottom:12%;left:4%;animation:spin 14s linear infinite}
.s4 path{stroke:var(--muted)}
.s5{width:clamp(46px,5vw,76px);top:40%;left:2%;animation:float 9s ease-in-out infinite;opacity:.8}
.s5 rect{stroke:var(--border);fill:var(--border)}
.s6{width:clamp(30px,3.4vw,48px);bottom:14%;right:8%;animation:spin 18s linear infinite reverse}
.s6 path{fill:var(--muted);stroke:none}
@keyframes float{50%{translate:0 -18px}}
@keyframes spin{to{rotate:360deg}}
@keyframes draw{to{stroke-dashoffset:0}}
.js .shapes{opacity:0}
.loaded .shapes{opacity:1;transition:opacity 1.2s .6s}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;translate:-50% 0;z-index:2;
  width:28px;height:46px;border:2px solid rgba(245,245,240,.35);border-radius:999px;
}
.scroll-hint span{position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ================= شريط الجهات ================= */
.clients{border-block:1px solid var(--border);display:flex;align-items:center;gap:24px;padding:22px 0;overflow:hidden}
.clients__label{flex:none;padding-inline-start:var(--gutter);color:var(--muted);font-size:15px;white-space:nowrap}
.marquee{overflow:hidden;flex:1;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.client{display:flex;align-items:center;justify-content:center;height:60px;padding:0 clamp(24px,3vw,44px);flex:none}
.client img{height:46px;width:auto;max-width:170px;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .3s, filter .3s}
.client:hover img{opacity:1;filter:none}
.client--text{font-family:var(--display);font-weight:700;font-size:20px;color:var(--muted);border:1px dashed var(--border);border-radius:12px;height:52px;margin:4px 12px;padding:0 22px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================= المشغّل ================= */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--surface);isolation:isolate}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__cover{all:unset;position:absolute;inset:0;cursor:none;display:block}
.player__cover[aria-disabled="true"]{cursor:default}
.player__thumb{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--surface);
  background-image:
    radial-gradient(circle at 78% 25%, rgba(212,175,55,.28), transparent 42%),
    linear-gradient(135deg,var(--surface),var(--bg));
  transition:transform .8s var(--ease), filter .5s;
}
.player__shade{position:absolute;inset:0;background:rgba(11,16,32,.0);transition:background .4s}
.player__cover:hover .player__thumb,.player__cover:focus-visible .player__thumb{transform:scale(1.05);filter:blur(3px) saturate(.8)}
.player__cover:hover .player__shade,.player__cover:focus-visible .player__shade{background:rgba(11,16,32,.45)}
.player__soon{position:absolute;inset:0;display:grid;place-items:center;color:rgba(245,245,240,.7);font-weight:500}

.player__cover:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--r-md)}

/* حركة الوقوف على الفيديو: الكارت يطلع لفوق، إطار ذهبي، وأركان زي الكاميرا */
.player{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.player::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow .4s;
}
.player:hover::after,.player:focus-within::after{box-shadow:inset 0 0 0 2px var(--gold)}
.work .player:hover,.work .player:focus-within{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 50px -18px rgba(212,175,55,.35)}
.player.playing,.player.playing:hover{transform:none}
.player__corners{position:absolute;inset:16px;pointer-events:none;z-index:3}
.player__corners i{
  position:absolute;width:26px;height:26px;border:0 solid var(--gold);opacity:0;
  transition:opacity .3s, transform .5s var(--ease);
}
.player__corners i:nth-child(1){top:0;left:0;border-width:3px 0 0 3px;transform:translate(-14px,-14px)}
.player__corners i:nth-child(2){top:0;right:0;border-width:3px 3px 0 0;transform:translate(14px,-14px)}
.player__corners i:nth-child(3){bottom:0;left:0;border-width:0 0 3px 3px;transform:translate(-14px,14px)}
.player__corners i:nth-child(4){bottom:0;right:0;border-width:0 3px 3px 0;transform:translate(14px,14px)}
.player:hover .player__corners i,.player:focus-within .player__corners i{opacity:1;transform:none}
.player__rec{
  position:absolute;top:30px;inset-inline-end:50px;z-index:3;display:flex;align-items:center;gap:7px;
  font:700 12px/1 var(--body);letter-spacing:.08em;color:var(--text);direction:ltr;opacity:0;transition:opacity .3s;
}
.player__rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D;animation:blink 1s steps(2) infinite}
.player:hover .player__rec{opacity:1}
@keyframes blink{50%{opacity:0}}
.player.playing .player__corners,.player.playing .player__rec{display:none}

/* الفقاعة "تشغيل الفيديو": بتطلع من مكان الماوس جوه نفس الكارت وتمشي معاه */
.player__pill{
  position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;
  background:rgba(245,245,240,.94);color:var(--bg);border-radius:999px;
  font-weight:700;font-size:15px;white-space:nowrap;
  translate:calc(var(--px,50%) - 50%) calc(var(--py,50%) - 50%);
  scale:0;opacity:0;transition:scale .4s var(--ease), opacity .25s;
}
.player__pill i{width:36px;height:36px;border-radius:50%;background:var(--gold);display:grid;place-items:center;flex:none}
.player__pill svg{width:16px;height:16px;fill:var(--bg);transform:translateX(1px)}
.player.hot .player__pill,.player__cover:focus-visible .player__pill{scale:1;opacity:1}
.player__cover:focus-visible .player__pill{--px:50%;--py:50%}

/* على الموبايل (مفيش ماوس) الفقاعة بتظهر ثابتة في نص الفيديو */
@media (hover:none){
  .player__cover{cursor:pointer}
  .player__pill{left:50%;top:50%;translate:-50% -50%;scale:1;opacity:1;padding:5px 5px 5px 14px;font-size:14px}
  .player__pill i{width:30px;height:30px}
  .player__pill svg{width:13px;height:13px}
}

/* ================= العناوين وحركة الظهور ================= */
.section{margin-top:clamp(100px,13vw,170px)}
.title{font-size:clamp(30px,4.2vw,54px);margin-bottom:clamp(28px,3.4vw,44px);letter-spacing:-.01em}
.js .reveal{opacity:0;filter:blur(12px);transform:translateY(30px)}
.js .reveal.in{opacity:1;filter:none;transform:none;transition:opacity 1s, filter 1s, transform 1s var(--ease)}

/* ================= الأعمال ================= */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px) clamp(18px,2.6vw,32px)}
.work:nth-child(even){margin-top:clamp(0px,7vw,96px)}
.work .player{aspect-ratio:4/3}
/* الفيديوهات الطولية 9:16 */
.works[hidden],.reels[hidden]{display:none}
.reels{margin-top:clamp(56px,7vw,96px)}
.reels__title{font-size:clamp(22px,2.4vw,30px);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.reels__title::before{content:"";width:26px;height:2px;background:var(--gold)}
.reels__title{flex-wrap:wrap}
.reels__title small{font-family:var(--body);font-weight:500;font-size:14.5px;color:var(--muted);flex-basis:100%;padding-inline-start:38px;margin-top:-4px}
.reels__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.reels__grid .work:nth-child(even){margin-top:clamp(0px,4vw,48px)}
.work--v .player{aspect-ratio:9/16}
.work--v .work__info{padding:16px}
.work--v .work__title{font-size:clamp(16px,1.4vw,19px)}
.work--v .work__desc{font-size:13.5px}
.work--v .player__corners{inset:12px}
.work--v .player__corners i{width:20px;height:20px}
.work--v .player__rec{top:22px;inset-inline-end:32px}
.work--v .player__pill{font-size:13.5px;padding:5px 5px 5px 14px}
.work--v .player__pill i{width:30px;height:30px}
@media (max-width: 900px){ .reels__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 640px){ .reels__grid{grid-template-columns:repeat(2,1fr)} .reels__grid .work:nth-child(even){margin-top:28px} }
.work__info{position:absolute;inset:auto 0 0 0;padding:22px 24px;z-index:2;pointer-events:none;
  background:linear-gradient(to top, rgba(11,16,32,.85), transparent);transition:opacity .4s, transform .4s var(--ease)}
.work__title{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.35}
.work__desc{color:var(--muted);font-size:15px;margin-top:2px}
.player__cover:hover ~ .work__info,.player__cover:focus-visible ~ .work__info{opacity:0;transform:translateY(10px)}
.player.playing .work__info{display:none}
.skeleton .player{animation:shimmer 1.4s ease-in-out infinite alternate}
@keyframes shimmer{to{background:var(--border)}}
.works__note{grid-column:1/-1;color:var(--muted);text-align:center;padding:24px}

/* فلتر الأعمال: زرار ذهبي بيتزحلق تحت الاختيار */
.works__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px)}
.works__head .title{margin-bottom:0}
.filters{position:relative;display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters__thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--gold);
  transition:transform .5s var(--ease), width .5s var(--ease)}
.filter{
  all:unset;position:relative;z-index:1;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;font:700 13.5px/1 var(--body);color:var(--muted);transition:color .3s;
}
.filter small{font-size:11px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;
  background:var(--border);color:var(--text);transition:background .3s, color .3s}
.filter:hover{color:var(--text)}
.filter[aria-pressed="true"]{color:var(--bg)}
.filter[aria-pressed="true"] small{background:var(--bg);color:var(--gold)}
.filter:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.works{transition:opacity .25s, transform .25s}
.works--out{opacity:0;transform:translateY(10px)}
.work--enter{animation:workIn .7s var(--ease) both}
@keyframes workIn{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ================= عني ================= */
.about{max-width:980px}
.spin{position:absolute;width:clamp(120px,14vw,170px);bottom:-40px;inset-inline-start:-36px;animation:spin 20s linear infinite;
  background:var(--gold);border-radius:50%;padding:6px}
.spin text{font:700 15.5px var(--body);fill:var(--bg)}
.about .title{margin-bottom:22px}
.scrub{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,28px);line-height:1.7}
.scrub span{color:rgba(245,245,240,.18);transition:color .25s}
.scrub span.lit{color:var(--text)}
html:not(.js) .scrub span{color:var(--text)}
/* الأرقام: كروت بعدّاد، شريط بيتملي، وإضاءة بتمشي مع الماوس */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:44px 0 0}
.stat{
  --p:0;position:relative;overflow:hidden;cursor:default;
  display:flex;flex-direction:column;gap:4px;padding:22px 22px 26px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.stat::before{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;pointer-events:none;
  left:var(--mx,50%);top:var(--my,0%);translate:-50% -50%;
  background:radial-gradient(circle, rgba(212,175,55,.18), transparent 65%);opacity:0;transition:opacity .4s;
}
.stat:hover,.stat:focus-visible{transform:translateY(-6px);border-color:rgba(212,175,55,.55);box-shadow:0 22px 44px -22px rgba(212,175,55,.45)}
.stat:hover::before{opacity:1}
.stat > *{position:relative}
.stat__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;
  background:rgba(212,175,55,.12);transition:background .4s, rotate .5s var(--ease)}
.stat__icon svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.stat:hover .stat__icon{background:var(--gold);rotate:-8deg}
.stat:hover .stat__icon svg{stroke:var(--bg)}
.stat__value{margin:0;display:flex;align-items:baseline;gap:2px;direction:ltr;justify-content:flex-end;
  font-family:var(--display);font-weight:800;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.stat__num{font-size:clamp(40px,4.2vw,58px)}
.stat__plus{font-size:clamp(24px,2.4vw,32px);color:var(--gold);transition:transform .4s var(--ease)}
.stat.done .stat__plus{animation:plusPop .5s var(--ease)}
@keyframes plusPop{40%{transform:scale(1.5) rotate(90deg)}}
.stat.counting .stat__num{color:var(--gold)}
.stat__label{color:var(--muted);font-size:14.5px;line-height:1.5}
.stat__bar{position:absolute;inset:auto 0 0 0;height:3px;background:var(--border)}
.stat__bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--p));transform-origin:right}

/* ================= صندوق العدة (كروت مايلة) ================= */
.kit__cards{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,1.6vw,22px);padding:20px 0 30px}
.kit-card{
  width:min(330px,32%);background:var(--text);color:var(--bg);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.35);transition:transform .6s var(--ease), rotate .6s var(--ease);
  position:relative;
}
.kit-card:nth-child(1){rotate:6deg;translate:0 30px;z-index:1}
.kit-card:nth-child(2){rotate:-2deg;z-index:2}
.kit-card:nth-child(3){rotate:-7deg;translate:0 40px;z-index:1}
.kit-card:hover{rotate:0deg;transform:translateY(-14px) scale(1.03);z-index:3}
.kit-card h3{font-size:17px;padding:16px 22px;font-weight:700}
.kit-card:nth-child(3n+1) h3{background:var(--gold);color:var(--bg)}
.kit-card:nth-child(3n+2) h3{background:var(--surface);color:var(--text)}
.kit-card:nth-child(3n) h3{background:var(--border);color:var(--text)}
.kit-card ul{list-style:none;margin:0;padding:6px 22px 14px}
.kit-card li{padding:11px 0;border-bottom:1px dashed rgba(11,16,32,.15);font-weight:500}
.kit-card li:last-child{border:0}
.js .kit-card{opacity:0;transform:translateY(80px)}
.js .kit.in .kit-card{opacity:1;transform:none;transition:opacity .8s, transform .9s var(--ease), rotate .6s var(--ease)}
.js .kit.in .kit-card:nth-child(2){transition-delay:.12s}.js .kit.in .kit-card:nth-child(3){transition-delay:.24s}
.js .kit.in .kit-card:hover{transform:translateY(-14px) scale(1.03);transition-delay:0s}

/* ================= الخدمات ================= */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.service{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .4s, transform .5s var(--ease);
}
.service::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,0%);translate:-50% -50%;
  background:radial-gradient(circle, rgba(212,175,55,.16), transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none;
}
.service:hover{border-color:rgba(212,175,55,.6);transform:translateY(-6px)}
.service:hover::before{opacity:1}
.service > *{position:relative}
.service__icon{width:58px;height:58px;margin-bottom:22px}
.service__icon *{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.service:hover .service__icon{animation:wiggle .7s var(--ease)}
@keyframes wiggle{30%{rotate:-12deg;scale:1.1}60%{rotate:8deg}}
.service__tag{align-self:flex-start;background:rgba(212,175,55,.14);color:var(--gold);font-weight:700;font-size:13.5px;padding:4px 14px;border-radius:999px;margin-bottom:14px}
.service h3{font-size:clamp(24px,2.5vw,32px);margin-bottom:12px}
.service__desc{color:var(--muted);margin-bottom:22px}
.service ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.service li{position:relative;padding-inline-start:26px}
.service li::before{content:"";position:absolute;inset-inline-start:2px;top:.7em;width:9px;height:9px;background:var(--muted);rotate:45deg;border-radius:2px}
.service .btn{margin-top:auto;align-self:flex-start}

/* ================= خطوات الشغل ================= */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.process::before{
  content:"";position:absolute;top:13px;inset-inline:6px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform 1.6s var(--ease);
}
.js .process.in::before,html:not(.js) .process::before{transform:scaleX(1)}
.step{position:relative;padding-top:52px}
.step::before{
  content:"";position:absolute;top:4px;inset-inline-start:0;width:18px;height:18px;rotate:45deg;border-radius:3px;
  background:var(--bg);border:3px solid var(--gold);transition:background .3s;
}
.step:hover::before{background:var(--gold)}
.step__n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--gold)}
.step h3{font-size:22px;margin:4px 0 8px}
.step p{color:var(--muted);font-size:15.5px}
.js .step{opacity:0;transform:translateY(24px)}
.js .process.in .step{opacity:1;transform:none;transition:opacity .7s, transform .7s var(--ease)}
.js .process.in .step:nth-child(2){transition-delay:.3s}.js .process.in .step:nth-child(3){transition-delay:.6s}.js .process.in .step:nth-child(4){transition-delay:.9s}

/* ================= التواصل ================= */
.contact{
  margin-top:clamp(100px,13vw,170px);position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(56px,8vw,110px) clamp(22px,6vw,80px);
}
.contact__marquee{position:absolute;inset:auto 0 18px 0;direction:ltr;opacity:.18;pointer-events:none}
.contact__marquee .marquee__track{animation-duration:26s}
.contact__marquee span{font-family:var(--display);font-weight:800;font-size:clamp(70px,11vw,150px);white-space:nowrap;padding:0 30px;color:transparent;-webkit-text-stroke:2px var(--text)}
.contact__inner{position:relative;z-index:1}
.contact__title{font-size:clamp(36px,5.6vw,76px);margin-bottom:18px}
.contact__inner > p{color:var(--muted);font-size:18px;margin-bottom:34px}
.contact__actions{display:flex;flex-wrap:wrap;gap:12px}
.contact__actions .btn{min-height:60px;font-size:17px}
.btn__num{direction:ltr;unicode-bidi:isolate}
.btn--wa{min-height:68px!important;padding-block:12px;padding-inline:24px 30px;gap:14px}
.btn--wa svg{width:26px;height:26px}
.btn__stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1.1}
.btn__stack small{font-weight:500;font-size:14px;opacity:.75}
.btn svg{width:22px;height:22px;fill:currentColor;flex:none}
.contact .btn--line{border-color:rgba(245,245,240,.45)}

/* ================= الفوتر ================= */
.foot{padding:48px 0 30px;overflow:hidden}
.foot__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot__social{display:flex;gap:12px;flex-wrap:wrap}
.foot__social a{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  border:1px solid var(--border);border-radius:999px;padding:10px 20px 10px 14px;transition:border-color .3s, color .3s;
}
.foot__social a:hover{border-color:var(--gold);color:var(--gold)}
.foot__social svg{width:20px;height:20px;fill:currentColor}
.foot__top{text-decoration:none;color:var(--muted);font-weight:500}
.foot__top:hover{color:var(--gold)}
.foot__big{
  font-family:var(--display);font-weight:800;text-align:center;line-height:1;
  font-size:clamp(80px,19vw,280px);margin:36px 0 10px;color:transparent;-webkit-text-stroke:1.5px rgba(140,150,168,.35);
  transition:color .6s;
}
.foot__big:hover{color:var(--surface)}
.foot__copy{text-align:center;color:var(--muted);font-size:14px}

/* زرار واتساب العائم (موبايل) */
.wa-float{
  position:fixed;bottom:18px;inset-inline-end:18px;z-index:80;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.wa-float svg{width:30px;height:30px;fill:#fff}
@media (min-width: 901px){ .wa-float{display:none} }

/* ================= الموبايل ================= */
@media (max-width: 900px){
  .hero__layout{grid-template-columns:1fr}
  .hero__media{order:-1;width:min(300px,78%)}
  .hero{padding-top:100px}
  .kit__cards{flex-direction:column;align-items:center;gap:0}
  .kit-card{width:min(360px,92%);margin:-6px 0}
  .kit-card:nth-child(1){rotate:3deg}.kit-card:nth-child(3){rotate:-3deg}
  .kit-card:nth-child(1){translate:0 0}
  .kit-card:nth-child(3){translate:0 0}
  .process{grid-template-columns:1fr 1fr;row-gap:36px}
  .services{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .process::before{display:none}
}
@media (max-width: 640px){
  body{font-size:16px}
  .nav__cta{display:none}
  .s1,.s2,.s3,.s4,.s5{display:none}
  .s1{top:12%;right:4%}.s2{top:15%;left:6%}.s6{top:9%}
  .hero{padding-top:110px}
  .works,.services{grid-template-columns:1fr}
  .work:nth-child(even){margin-top:0}
  .clients{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0}
  .clients__label{text-align:center;padding:0}
  .contact__actions .btn{width:100%}
  .foot__row{justify-content:center}
  .foot{padding-bottom:96px}
  .hero__chip{inset-inline-end:-6px;bottom:34px}
  .hero__chip b{font-size:22px}
}
@media (max-width: 460px){ .process{grid-template-columns:1fr} }

/* ================= المشغّل العائم ================= */
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.lb[hidden]{display:none}
.lb__backdrop{position:absolute;inset:0;background:rgba(11,16,32,.62);backdrop-filter:blur(16px) saturate(.8);-webkit-backdrop-filter:blur(16px) saturate(.8);opacity:0;transition:opacity .35s}
.lb__box{position:relative;width:min(100%, calc(78vh * 16 / 9), 1180px);opacity:0;transform:translateY(24px) scale(.94);transition:opacity .35s, transform .5s var(--ease)}
.lb--v .lb__box{width:min(100%, calc(80vh * 9 / 16), 460px)}
.lb.open .lb__backdrop{opacity:1}
.lb.open .lb__box{opacity:1;transform:none}
.lb__frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(212,175,55,.35)}
.lb--v .lb__frame{aspect-ratio:9/16}
.lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb__title{margin-top:14px;text-align:center;font-family:var(--display);font-weight:700;font-size:17px;color:var(--text)}
.lb__close{position:absolute;top:-56px;inset-inline-start:0;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(245,245,240,.1);border:1px solid rgba(245,245,240,.25);display:grid;place-items:center;transition:background .3s, transform .4s var(--ease)}
.lb__close svg{width:18px;height:18px;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;fill:none}
.lb__close:hover{background:var(--gold);transform:rotate(90deg)}
.lb__close:hover svg{stroke:var(--bg)}
.lb-lock,.lb-lock body{overflow:hidden}
@media (max-height:520px){ .lb__close{top:8px;inset-inline-start:8px;z-index:2} .lb__title{display:none} }

/* زرار عرض المزيد */
.work.is-more{display:none}
.more{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.more[hidden]{display:none}
.more__btn small{font:700 13px/1 var(--body);color:var(--gold);background:rgba(212,175,55,.12);padding:5px 9px;border-radius:999px}
.more__btn:hover{border-color:var(--gold)}

/* ================= لمسات الموشن ================= */
/* الكيرسر */
.has-cur,.has-cur *{cursor:none!important}
.has-cur iframe{cursor:auto!important}
.cur{position:fixed;inset:0;pointer-events:none;z-index:1000}
.cur__dot,.cur__ring{position:fixed;left:0;top:0;opacity:0;transition:opacity .3s}
.cur.on .cur__dot,.cur.on .cur__ring{opacity:1}
.cur__dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold)}
.cur__ring{width:0;height:0;will-change:transform}
.cur__ring b{position:absolute;width:36px;height:36px;left:-18px;top:-18px;border:1.5px solid rgba(212,175,55,.75);border-radius:50%;
  transition:width .4s var(--ease),height .4s var(--ease),left .4s var(--ease),top .4s var(--ease),border-radius .4s var(--ease),transform .5s var(--ease),background-color .3s,scale .2s}
.cur.link .cur__ring b{width:44px;height:44px;left:-22px;top:-22px;border-radius:7px;transform:rotate(45deg);background:rgba(212,175,55,.14);border-color:var(--gold)}
.cur.down .cur__ring b{scale:.72}
.cur__spark{position:fixed;width:7px;height:7px;background:var(--gold);border-radius:1px}

/* شريط التايم لاين */
.tl{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none;--p:0}
.tl::before{content:"";position:absolute;inset:0;background:rgba(245,245,240,.07)}
.tl__bar{position:absolute;inset:0;background:var(--gold);transform-origin:100% 50%;transform:scaleX(var(--p))}
.tl__head,.tl__key{position:absolute;top:5px;width:8px;height:8px;margin:-4px -4px 0 0;transform:rotate(45deg)}
.tl__head{right:calc(var(--p) * 100%);background:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.8)}
.tl__key{right:calc(var(--at,0) * 100%);width:6px;height:6px;margin:-3px -3px 0 0;background:var(--bg);border:1.5px solid rgba(140,150,168,.7);transition:background-color .3s,border-color .3s}
.tl__key.on{background:var(--gold);border-color:var(--gold)}

/* العناوين كلمة كلمة */
.kinetic .kw{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .06em .34em;margin:-.14em -.06em -.34em}
.js .kinetic.reveal{opacity:1;filter:none;transform:none}
.js .kinetic .kw>span{display:inline-block;transform:translateY(118%) rotate(5deg);transform-origin:100% 100%;transition:transform 1s var(--ease) var(--d,0ms)}
.js .kinetic.in .kw>span{transform:none}

/* الشوريل: بيفتح زي شاشة بتشتغل */
.js .reel-open{clip-path:inset(49.5% 50% 49.5% 50% round 4px)}
.js .reel-open.in{animation:tvOn 1.4s cubic-bezier(.77,0,.18,1) both}
.js .reel-open.in .player__cover{animation:tvFade .9s ease .75s backwards}
@keyframes tvOn{
  0%{clip-path:inset(49.6% 50% 49.6% 50% round 4px);background-color:var(--gold)}
  40%{clip-path:inset(49.6% 0 49.6% 0 round 4px);background-color:var(--gold)}
  60%{background-color:var(--surface)}
  100%{clip-path:inset(0 0 0 0 round 20px);background-color:var(--surface)}}
@keyframes tvFade{from{opacity:0}}

/* الأعمال: الكارت بيطلع لفوق بنعومة والفيديو بينكشف من اليمين بخط ذهبي رفيع */
.work--wipe{position:relative}
.work--wipe::before{content:"";position:absolute;top:8%;bottom:8%;left:0;width:2px;z-index:5;border-radius:2px;pointer-events:none;
  background:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.7);opacity:0}
.js .work--wipe.reveal{opacity:0;filter:none;transform:translateY(36px) scale(.97)}
.js .work--wipe.reveal.in{opacity:1;transform:none;transition:opacity .5s ease var(--sd,0ms), transform .8s var(--ease) var(--sd,0ms)}
.js .work--wipe.reveal:not(.in) .player{clip-path:inset(0 0 0 100% round var(--r-md))}
.js .work--wipe.in .player{animation:wipeClip .75s cubic-bezier(.65,0,.25,1) var(--sd,0ms) backwards}
.js .work--wipe.in::before{animation:wipeLine .75s cubic-bezier(.65,0,.25,1) var(--sd,0ms)}
.js .work--wipe.in .player__thumb{animation:settle 1s var(--ease) var(--sd,0ms) backwards}
.js .work.in .work__title{animation:upIn .55s var(--ease) calc(var(--sd,0ms) + .45s) backwards}
.js .work.in .work__desc{animation:upIn .55s var(--ease) calc(var(--sd,0ms) + .53s) backwards}
@keyframes wipeClip{from{clip-path:inset(0 0 0 100% round var(--r-md))}to{clip-path:inset(0 0 0 0 round var(--r-md))}}
@keyframes wipeLine{0%{opacity:1;left:100%}85%{opacity:1}100%{opacity:0;left:0}}
@keyframes settle{from{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes upIn{from{opacity:0;transform:translateY(14px)}}

/* الريلز: بتطلع زي موبايلات بتتحط على الترابيزة، وبعدين لمعة إزاز */
.reels__grid{perspective:1400px}
.work--pop{position:relative}
.work--pop::after{content:"";position:absolute;inset:0;z-index:5;border-radius:var(--r-md);pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.38) 48%,rgba(255,255,255,.08) 54%,transparent 62%) 0 0/250% 100% no-repeat}
.js .work--pop.reveal{opacity:0;filter:none;transform-origin:50% 100%;
  transform:translateY(150px) rotateX(32deg) rotateZ(var(--r,-7deg)) scale(.82)}
.js .work--pop.reveal.in{opacity:1;filter:none;transform:none;
  transition:opacity .6s var(--sd,0ms), transform 1.35s cubic-bezier(.2,1.35,.35,1) var(--sd,0ms)}
.js .work--pop.in::after{animation:glass 1.1s ease-in-out calc(var(--sd,0ms) + .75s)}
@keyframes glass{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}

@media (prefers-reduced-motion: reduce){
  .js .reel-open{clip-path:none!important}
  .js .kinetic .kw>span{transform:none!important}
  .js .work--wipe .player{clip-path:none!important}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .kit-card,.js .step,.js .w__i,.js .hero__frame img,.js .hero__corners i,.js .hero__chip,.js .status,.js .hero__role,.js .hero__intro,.js .hero__actions,.js .shapes{opacity:1!important;filter:none!important;transform:none!important}
  .s3 path{stroke-dashoffset:0}
  .js .hero__frame{clip-path:none!important}
  .reel__frame{transform:none}
  .scrub span{color:var(--text)}
}