/* mx-anim.css — انیمیشن‌های برند (کامنت‌های کیارش) */
@media (prefers-reduced-motion: no-preference){
@keyframes mxSweep{0%{inset-inline-start:-45%;}100%{inset-inline-start:145%;}}
@keyframes mxBreath{0%,100%{box-shadow:0 8px 22px rgba(74,169,167,.32);}50%{box-shadow:0 10px 30px rgba(74,169,167,.55);}}
@keyframes mxPopIn{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
@keyframes mxFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes mxJelly{0%{transform:scale(.85,1.1);}30%{transform:scale(1.08,.92);}55%{transform:scale(.97,1.03);}75%{transform:scale(1.02,.98);}100%{transform:scale(1);}}
@keyframes mxRing{0%{transform:scale(.7);opacity:.75;}100%{transform:scale(1.7);opacity:0;}}
@keyframes mxWiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-9deg);}60%{transform:rotate(7deg);}}
@keyframes mxShakeX{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}
@keyframes mxHeart{0%,40%,100%{transform:scale(1);}10%{transform:scale(1.25);}25%{transform:scale(1.08);}}
@keyframes mxNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(-5px);}}
@keyframes mxFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes mxGlow{0%,100%{box-shadow:0 0 0 0 rgba(214,80,66,0);}50%{box-shadow:0 0 0 6px rgba(214,80,66,.14);}}
/* دکمه‌های اکشن: جاروی نور + پرس */
.actions .btn.primary,.step-next .btn,.auth-btn,.pl-btn,.pn-btn.-primary,.copy-all,.check-sub{position:relative;overflow:hidden;}
.actions .btn.primary::after,.step-next .btn::after,.auth-btn::after,.pl-btn::after,.pn-btn.-primary::after,.copy-all::after,.check-sub::after{content:"";position:absolute;top:0;bottom:0;width:38%;inset-inline-start:-45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);pointer-events:none;}
.actions .btn.primary:hover::after,.step-next .btn:hover::after,.auth-btn:hover:not([disabled])::after,.pl-btn:hover::after,.pn-btn.-primary:hover::after,.copy-all:hover::after,.check-sub:hover::after{animation:mxSweep .8s ease;}
.actions .btn.primary::after{animation:mxSweep 4.6s 1.2s ease infinite;}
.actions .btn.primary,.pl-btn{animation:mxBreath 3.2s ease-in-out infinite;}
.actions .btn.primary:active,.step-next .btn:active,.auth-btn:active,.pl-btn:active,.pn-btn:active,.copy-all:active,.tabbar button:active,.pn-tab:active{transform:scale(.965);}
/* فلش «مرحله بعد» */
.step-next .btn i{animation:mxNudge 1.5s ease-in-out infinite;}
/* تب‌بار آموزش + تب‌های پنل */
.tabbar button{position:relative;transition:transform .18s;}
.tabbar button:hover{transform:translateY(-2px);}
.tabbar button::after{content:"";position:absolute;inset-inline:18%;bottom:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--teal-d));transform:scaleX(0);transition:transform .28s cubic-bezier(.2,.7,.3,1.4);}
.tabbar button[aria-selected="true"]{animation:mxJelly .45s ease;}
.tabbar button[aria-selected="true"]::after{transform:scaleX(1);}
.pn-tab[aria-selected="true"]{animation:mxJelly .45s ease;}
/* آیکون‌های دسترسی سریع + کارت‌های خدمات */
.qa-card .ic,.auth-head .ic{will-change:transform;}
.qa-card:hover .ic{transform:scale(1.13) rotate(-4deg);}
.qa-card:hover .ic i{animation:mxWiggle .55s ease;}
.auth-head .ic{animation:mxPopIn .55s cubic-bezier(.2,.7,.3,1.3) both;}
.auth-head .ic i{animation:mxFloat 3.2s 1s ease-in-out infinite;}
/* آیکون نتیجه پرداخت */
.result-icon{position:relative;}
.result-icon.-ok{animation:mxPopIn .6s cubic-bezier(.2,.7,.3,1.35) both;}
.result-icon.-ok::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--emerald);animation:mxRing 1.1s .35s ease-out 2;}
.result-icon.-bad{animation:mxShakeX .55s .25s ease both;}
.result-icon.-bad::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--coral);animation:mxRing 1.3s .5s ease-out 2;}
/* بج وضعیت پنل */
.pn-badge{animation:mxPopIn .5s cubic-bezier(.2,.7,.3,1.3) both;}
.pn-badge.-ok i{animation:mxHeart 2.8s 1.2s ease infinite;}
.pn-badge.-critical,.pn-badge.-expired{animation:mxPopIn .5s both,mxGlow 2.6s 1.2s ease infinite;}
/* ردیف سرور + دکمه‌های پنل */
.pn-server{transition:border-color .22s,box-shadow .22s,transform .22s;}
.pn-server:hover{border-color:var(--teal);box-shadow:var(--sh-h);transform:translateY(-2px);}
.pn-btn:hover i{animation:mxWiggle .5s ease;}
.dv-cut:hover{animation:mxShakeX .5s ease;}
/* ردیف دانلود اپ‌ها: ورود پلکانی + لیفت */
.pn-dl .dl-row .pn-btn{animation:mxFadeUp .45s ease backwards;transition:transform .2s,border-color .2s,box-shadow .2s;}
.pn-dl .dl-row .pn-btn:nth-child(1){animation-delay:.05s;}
.pn-dl .dl-row .pn-btn:nth-child(2){animation-delay:.11s;}
.pn-dl .dl-row .pn-btn:nth-child(3){animation-delay:.17s;}
.pn-dl .dl-row .pn-btn:nth-child(4){animation-delay:.23s;}
.pn-dl .dl-row .pn-btn:nth-child(5){animation-delay:.29s;}
.pn-dl .dl-row .pn-btn:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--sh-h);}
/* ۴۰۴ */
.nf-code{animation:mxJelly .8s .15s cubic-bezier(.2,.7,.3,1.3) both;}
.nf-code img{animation:mxFloat 3.4s 1s ease-in-out infinite;transform-origin:50% 60%;}
.nf-code:hover img{animation:mxWiggle .6s ease;}
/* سوییچر زبان: چرخش کره + پاپ */
.mx-lang-btn svg{transition:transform .55s cubic-bezier(.2,.7,.3,1.2);}
.mx-lang-btn:hover svg{transform:rotate(200deg) scale(1.15);}
.mx-lang-btn:hover{transform:translateY(-2px);}
.mx-lang-btn{transition:transform .2s;}
/* تاگل تم: سویینگ آیکون خورشید/ماه */
.theme-toggle i{transition:transform .5s cubic-bezier(.2,.7,.3,1.3);}
.theme-toggle:hover i{transform:rotate(220deg) scale(1.18);}
.theme-toggle:active i{transform:rotate(320deg) scale(.9);}
/* لینک‌های فوتر: لیفت + ویگل آیکون */
.sfoot-links a{transition:transform .18s,color .18s,background .18s;border-radius:9px;}
.sfoot-links a:hover{transform:translateY(-2px);color:var(--teal-d);background:var(--teal-soft,rgba(74,169,167,.12));}
.sfoot-links a:hover i{animation:mxWiggle .5s ease;}
/* لوگوی ورود پنل */
.pl-mark{position:relative;animation:mxPopIn .55s cubic-bezier(.2,.7,.3,1.3) both;}
.pl-mark::after{content:"";position:absolute;inset:0;border-radius:16px;border:2px solid var(--teal);animation:mxRing 2.6s 1s ease-out infinite;}
.pl-mark img{animation:mxFloat 3.2s 1.4s ease-in-out infinite;}
}