/* YBWeb Motion & Interaction Upgrade — performance-first */
:root{--mx:50%;--my:50%;--motion-ease:cubic-bezier(.22,.8,.24,1)}
html{scroll-behavior:smooth}body{overflow-x:hidden}
/* connected section atmosphere */
main{position:relative;isolation:isolate}main:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(700px 420px at 12% 22%,rgba(38,169,255,.055),transparent 70%),radial-gradient(620px 400px at 88% 58%,rgba(83,99,255,.05),transparent 72%)}
section{position:relative}.motion-section:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(105,190,255,.11),transparent);pointer-events:none}
/* reveal primitives */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s var(--motion-ease),transform .85s var(--motion-ease);transition-delay:var(--delay,0ms);will-change:transform,opacity}
[data-reveal="left"]{transform:translate3d(-30px,0,0)}[data-reveal="right"]{transform:translate3d(30px,0,0)}[data-reveal="scale"]{transform:scale(.965)}[data-reveal].is-in{opacity:1;transform:none}
/* hero */
.hero-content .badge,.hero-content .lead,.hero-content .actions,.hero-content .trust{opacity:0;transform:translateY(18px);animation:ybHeroIn .7s var(--motion-ease) forwards}.hero-content .badge{animation-delay:.05s}.hero-content .lead{animation-delay:.55s}.hero-content .actions{animation-delay:.68s}.hero-content .trust{animation-delay:.82s}
.hero h1 .yb-word{display:inline-block;opacity:0;transform:translateY(.6em) rotateX(-18deg);filter:blur(5px);animation:ybWord .65s var(--motion-ease) forwards;animation-delay:calc(120ms + var(--wi)*42ms);transform-origin:50% 100%}.hero h1 br{display:block}
.hero:after{transform:translate3d(calc(var(--hero-x,0px)*.3),calc(var(--hero-y,0px)*.3),0);transition:transform .25s ease-out}.hero:before{transform:scale(1.035) translate3d(calc(var(--hero-x,0px)*-.12),calc(var(--hero-y,0px)*-.12),0);transition:transform .35s ease-out}
@keyframes ybWord{to{opacity:1;transform:none;filter:none}}@keyframes ybHeroIn{to{opacity:1;transform:none}}
/* buttons + nav */
.btn{position:relative;overflow:hidden;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .22s ease,box-shadow .25s ease,border-color .25s ease}.btn:after,.request-float:after{content:"";position:absolute;inset:-70%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 49%,transparent 60%);transform:translateX(-55%);transition:transform .65s var(--motion-ease);pointer-events:none}.btn:hover:after,.request-float:hover:after{transform:translateX(55%)}
.navlinks a,.lang a{position:relative;transition:color .22s ease,transform .22s ease}.navlinks a:after{content:"";position:absolute;left:10%;right:10%;bottom:-7px;height:2px;border-radius:2px;background:#54c7ff;transform:scaleX(0);transition:transform .28s var(--motion-ease)}.navlinks a:hover{transform:translateY(-2px)}.navlinks a:hover:after{transform:scaleX(1)}.lang a:hover{transform:translateY(-1px)}
/* service cards: light tracking + subtle tilt */
#services .card{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease}
#services .card:before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--card-x,50%) var(--card-y,50%),rgba(74,190,255,.15),transparent 55%);opacity:0;transition:opacity .25s ease;pointer-events:none}#services .card:hover:before{opacity:1}#services .card>*{position:relative;z-index:1}#services .service-icon{transition:transform .35s var(--motion-ease),box-shadow .35s ease}#services .card:hover .service-icon{transform:translateY(-5px) rotate(-3deg) scale(1.06);box-shadow:0 10px 28px rgba(40,175,255,.14)}#services .more{display:inline-block;transition:transform .25s ease,color .25s ease}#services .card:hover .more{transform:translateX(4px)}.rtl #services .card:hover .more{transform:translateX(-4px)}
/* premium compact case study */
.portfolio-case{padding:44px 0!important}.case-compact{position:relative!important}.case-compact:before{content:"";position:absolute;width:340px;height:340px;right:-150px;top:-170px;background:radial-gradient(circle,rgba(45,176,255,.12),transparent 68%);pointer-events:none;animation:caseGlow 8s ease-in-out infinite alternate}@keyframes caseGlow{to{transform:translate(-80px,90px) scale(1.15)}}
.case-showcase{perspective:1000px}.case-row{align-items:center}.case-shot{background:rgba(3,12,25,.38)!important;transition:transform .45s var(--motion-ease),box-shadow .45s ease,border-color .35s ease!important}.case-shot:hover{transform:translateY(-6px) scale(1.012)!important;border-color:rgba(88,201,255,.35)!important}.case-shot img{transition:transform .7s var(--motion-ease),filter .4s ease!important}.case-shot:hover img{transform:scale(1.035)!important;filter:saturate(1.05)}
/* Website row = landscape; social row = portrait, no ugly black side gaps */
.case-row:first-child .case-shot{height:auto!important;aspect-ratio:2.08/1}.case-row:first-child .case-shot img{object-fit:cover!important}
.case-row:nth-child(2){grid-template-columns:repeat(2,minmax(0,210px))!important;justify-content:center;gap:20px!important}.case-row:nth-child(2) .case-shot{height:auto!important;aspect-ratio:9/14;background:transparent!important}.case-row:nth-child(2) .case-shot img{object-fit:cover!important;object-position:top center!important}.case-row:nth-child(2) .case-shot:first-child{aspect-ratio:540/789}.case-row:nth-child(2) .case-shot:last-child{aspect-ratio:650/1157}
.case-lightbox.open img{animation:ybLightbox .38s var(--motion-ease)}@keyframes ybLightbox{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
/* pricing */
.pricing .price,.price{transition:transform .35s var(--motion-ease),box-shadow .35s ease,border-color .35s ease;position:relative;overflow:hidden}.pricing .price:before,.price:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--card-x,50%) var(--card-y,50%),rgba(72,190,255,.11),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}.pricing .price:hover:before,.price:hover:before{opacity:1}.pricing .price:hover,.price:hover{transform:translateY(-8px);border-color:rgba(80,198,255,.35);box-shadow:0 26px 55px rgba(0,0,0,.24)}.price.featured{transform:translateY(-5px)}.price.featured:after{content:"Recommended";position:absolute;top:14px;right:-34px;transform:rotate(38deg);padding:5px 42px;background:linear-gradient(90deg,#4f6cff,#35c2ff);color:#061225;font-size:10px;font-weight:900;letter-spacing:.04em}.rtl .price.featured:after{content:"الأكثر طلباً"}
/* stats */
[data-counter]{font-variant-numeric:tabular-nums}
@media (max-width:900px){[data-reveal="left"],[data-reveal="right"]{transform:translate3d(0,20px,0)}.case-row:nth-child(2){grid-template-columns:repeat(2,minmax(0,190px))!important}.hero:before,.hero:after{transform:none!important}}
@media (max-width:600px){.portfolio-case{padding:30px 0!important}.case-row:first-child{grid-template-columns:1fr!important}.case-row:first-child .case-shot{aspect-ratio:2.08/1}.case-row:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.case-shot:hover{transform:none!important}.price.featured{transform:none}.hero h1 .yb-word{animation-delay:calc(80ms + var(--wi)*28ms)}#services .card{transform:none!important}.motion-section:after{left:4%;right:4%}}
@media (hover:none),(pointer:coarse){#services .card:before,.pricing .price:before,.price:before{display:none}.btn,.request-float,.wa{--mag-x:0!important;--mag-y:0!important}.case-shot:hover img{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.hero h1 .yb-word,.hero-content .badge,.hero-content .lead,.hero-content .actions,.hero-content .trust,[data-reveal]{opacity:1!important;transform:none!important;filter:none!important}.case-compact:before{display:none}}

/* Keep floating actions pinned to viewport after motion upgrade */
.request-float,.wa{position:fixed!important;overflow:hidden;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .22s ease,box-shadow .25s ease,border-color .25s ease}
.request-float{right:20px!important;left:auto!important;bottom:90px!important}.wa{right:20px!important;left:auto!important;bottom:20px!important}.rtl .request-float{right:auto!important;left:20px!important}.rtl .wa{right:auto!important;left:20px!important}@media(max-width:560px){.request-float{bottom:88px!important;max-width:calc(100vw - 40px)}.wa{bottom:20px!important}}