/* حرکت بخش اول صفحه‌ی اصلی (hero): ورود کلمه‌به‌کلمه‌ی عنوان، ورود پلکانی اجزا، براق شدن دکمه، آیکون‌های متحرک */

/* عنوان تا تقسیم‌شدن به کلمه‌ها (JS) دیده نمی‌شود تا پرش و چشمک نداشته باشیم.
   اگر JS اجرا نشد، بعد از ۱.۲ ثانیه خودش نمایان می‌شود. */
.hero h1{opacity:0;animation:h1show .01s 1.2s forwards}
.hero h1:has(.w){opacity:1;animation:none}
@keyframes h1show{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero h1{opacity:1}}

.hero h1 .w{display:inline-block;animation:wIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--i) * .1s)}
@keyframes wIn{from{opacity:0;transform:translateY(30px) scale(.94);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}

/* کلمه‌ی آخر با گرادیان برند و درخشش آرام */
.hero h1 .w:last-child{background:linear-gradient(90deg,var(--brand-dark,#0e7f74),var(--brand,#1fb5a4),#7fe3d6,var(--brand,#1fb5a4),var(--brand-dark,#0e7f74));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:wIn .9s cubic-bezier(.2,.8,.2,1) both,shimmer 7s linear 1.4s infinite;animation-delay:calc(.12s + var(--i) * .1s),1.4s}
@keyframes shimmer{to{background-position:-300% 0}}

/* پاراگراف و دکمه‌ها: بالا آمدن نرم (fill backwards تا بعداً transform دکمه‌ها آزاد باشد) */
.hero > div > p{animation:fUp .85s cubic-bezier(.2,.8,.2,1) .62s backwards}
.hero .cta .btn{animation:fUp .8s cubic-bezier(.2,.8,.2,1) backwards}
.hero .cta .btn:nth-child(1){animation-delay:.8s}
.hero .cta .btn:nth-child(2){animation-delay:.92s}
@keyframes fUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* دکمه‌ها: دنبال کردن ملایم نشانگر + براق شدن دکمه‌ی اصلی */
.hero .cta .btn{transform:translate(var(--mx,0px),var(--my,0px));transition:transform .22s ease-out,background .2s,box-shadow .2s,color .2s}
.hero .cta .btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
.hero .cta .btn:not(.ghost){position:relative;overflow:hidden}
.hero .cta .btn:not(.ghost)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(130%);animation:shine 4.5s ease-in-out 2.2s infinite}
@keyframes shine{0%{transform:translateX(130%)}35%,100%{transform:translateX(-130%)}}

/* ردیف آیکون‌ها: ورود پلکانی کاشی‌ها و «کشیده شدن» خطوط اتصال */
.pipe > .pn{animation:pnIn .75s cubic-bezier(.34,1.56,.64,1) backwards}
.pipe > .ln{transform-origin:right center;animation:lnIn .6s ease backwards}
.pipe > :nth-child(1){animation-delay:1.05s}.pipe > :nth-child(2){animation-delay:1.25s}
.pipe > :nth-child(3){animation-delay:1.3s}.pipe > :nth-child(4){animation-delay:1.5s}
.pipe > :nth-child(5){animation-delay:1.55s}.pipe > :nth-child(6){animation-delay:1.75s}
.pipe > :nth-child(7){animation-delay:1.8s}
@keyframes pnIn{from{opacity:0;transform:translateY(20px) scale(.55)}to{opacity:1;transform:none}}
@keyframes lnIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* کارت زنده: ورود از کنار و کج شدن سه‌بعدی با نشانگر (JS) */
.hero{perspective:1300px}
.live{animation:float 6s ease-in-out infinite,liveIn 1s cubic-bezier(.2,.8,.2,1) .35s backwards;will-change:rotate}
@keyframes liveIn{from{opacity:0;translate:-40px 20px;scale:.94}to{opacity:1;translate:0 0;scale:1}}