/*
  لایه‌ی حرکت و انیمیشن قالب تکنیک برتر.

  سه قاعده‌ای که همه‌جای این فایل رعایت شده:
  ۱. فقط transform و opacity انیمیت می‌شوند تا روی موبایل هم ۶۰ فریم بماند.
  ۲. افکت‌های hover داخل @media (hover:hover) هستند؛ موبایل به‌جای آن
     بازخورد لمسی (:active) می‌گیرد، چون روی تاچ hover گیر می‌کند.
  ۳. اگر کاربر در سیستم‌عاملش «کاهش حرکت» را روشن کرده باشد، همه‌چیز خاموش
     می‌شود. این هم برای دسترس‌پذیری لازم است هم برای کسانی که سرگیجه می‌گیرند.
*/

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      620ms;
}

/* ===================================================================
   ۱. ورود بخش‌ها هنگام اسکرول
   =================================================================== */

/*
  ورود با animation انجام می‌شود نه transition. دلیلش: بعضی از همین
  عنصرها (مثل کارت خبر) برای hover خودشان transition تعریف می‌کنند و چون
  هم‌سطحِ specificity هستند، هر کدام که در فایل پایین‌تر باشد آن یکی را
  خنثی می‌کند. animation کانال جداگانه‌ای دارد و این تداخل پیش نمی‌آید.
*/
.reveal { opacity: 0; }

.reveal.in {
  opacity: 1;
  animation: tb-rise var(--dur-slow) var(--ease-out-soft) backwards;
}

/* جهت‌های دیگر ورود */
.reveal[data-anim='right'].in { animation-name: tb-in-right; }
.reveal[data-anim='left'].in  { animation-name: tb-in-left; }
.reveal[data-anim='zoom'].in  { animation-name: tb-in-zoom; }

@keyframes tb-in-right {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tb-in-left {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tb-in-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/*
  ورود پلکانی فرزندان: به هر فرزند با JS شماره داده می‌شود و تأخیرش از
  همان شماره حساب می‌شود. سقف ۱۲ گذاشته‌ام تا فهرست‌های بلند، انتهایشان
  دیر ظاهر نشود.

  عمداً از animation استفاده شده و نه transition: کارت‌ها پایین‌تر برای
  hover خودشان transition تعریف می‌کنند و چون هم‌سطحِ specificity هستند،
  آن تعریف، تأخیر و مدت ورود را از بین می‌برد. animation کانال جداگانه‌ای
  است و این تداخل را ندارد.
*/
.stagger > * { opacity: 0; }

.stagger.in > * {
  animation: tb-rise var(--dur-slow) var(--ease-out-soft) backwards;
  animation-delay: calc(var(--i, 0) * 65ms);
  opacity: 1;
}

/* ===================================================================
   ۲. دکمه‌ها
   =================================================================== */

/* .tb-btn دکمه‌های افزونه‌ی فرم است و همان رفتار را می‌گیرد. */
.btn,
.tb-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) ease,
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease;
}

/* موج کلیک (ripple) — نقطه‌ی کلیک از JS تعیین می‌شود */
.tb-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.45;
  background: currentColor;
  pointer-events: none;
  animation: tb-ripple var(--dur-slow) var(--ease-out-soft) forwards;
}
@keyframes tb-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(53, 224, 161, 0.65);
  }
  .btn-ghost:hover { transform: translateY(-2px); }
}

/* روی موبایل، بازخورد لمس جای hover را می‌گیرد */
.btn:active,
.tb-btn:active { transform: scale(0.97); }

/* فلش داخل دکمه‌ها و لینک‌ها */
.btn svg,
.post-card-more svg { transition: transform var(--dur-base) var(--ease-out-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(-4px); }
}

/* ===================================================================
   ۳. هدر
   =================================================================== */

.site-header {
  transition:
    background-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease,
    backdrop-filter var(--dur-base) ease;
}
/* بعد از اسکرول، هدر جمع‌وجور و مات می‌شود */
.site-header.is-stuck {
  background: rgba(14, 19, 26, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/* خط زیر آیتم‌های منو، از وسط باز می‌شود */
.site-nav a {
  position: relative;
  transition: color var(--dur-base) ease;
}
.site-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--mint);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out-soft);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover::after { transform: scaleX(1); }
}
.site-nav a:focus-visible::after { transform: scaleX(1); }

/* ===================================================================
   ۴. کارت‌ها (خدمات، بلاگ، مراحل)
   =================================================================== */

.service-card,
.step,
.why-item,
.badge {
  transition:
    transform var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease,
    background-color var(--dur-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .step:hover,
  .why-item:hover {
    transform: translateY(-6px);
    border-color: var(--mint-dim);
    box-shadow: 0 26px 44px -28px rgba(0, 0, 0, 0.85);
  }
  .badge:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--mint-dim);
  }
}

.service-card:active,
.step:active,
.badge:active { transform: scale(0.98); }

/* شماره‌ی مرحله در بخش «نحوه کار» موقع hover می‌چرخد و برجسته می‌شود */
.step .step-num {
  transition:
    transform var(--dur-base) var(--ease-spring),
    background-color var(--dur-base) ease,
    color var(--dur-base) ease;
}
@media (hover: hover) and (pointer: fine) {
  .step:hover .step-num {
    transform: scale(1.15) rotate(-8deg);
    background: var(--mint);
    color: #08201a;
  }
}

/* آیکون داخل کارت خدمات، موقع hover یک تکان کوچک می‌خورد */
.service-card .icon,
.service-card svg { transition: transform var(--dur-base) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .icon,
  .service-card:hover svg { transform: scale(1.12) rotate(-6deg); }
}

/* درخشش نرم روی کارت خبر، از سمت راست به چپ (چون سایت راست‌چین است) */
@media (hover: hover) and (pointer: fine) {
  .post-card .post-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(-75deg, transparent 30%, rgba(255, 255, 255, 0.13) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 900ms var(--ease-out-soft);
    pointer-events: none;
  }
  .post-card:hover .post-card-media::after { transform: translateX(120%); }
}

/* ===================================================================
   ۵. هیرو
   =================================================================== */

/* ورود پلکانی اجزای هیرو در بارگذاری صفحه */
.hero-grid > * > * {
  animation: tb-rise var(--dur-slow) var(--ease-out-soft) backwards;
}
.hero-grid > * > *:nth-child(1) { animation-delay: 60ms; }
.hero-grid > * > *:nth-child(2) { animation-delay: 140ms; }
.hero-grid > * > *:nth-child(3) { animation-delay: 220ms; }
.hero-grid > * > *:nth-child(4) { animation-delay: 300ms; }
.hero-grid > * > *:nth-child(5) { animation-delay: 380ms; }

@keyframes tb-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* نشان‌های اعتماد، خیلی آرام بالا و پایین می‌روند */
.trust-badge,
.hero-badge {
  animation: tb-float 5.5s ease-in-out infinite;
}
.trust-badge:nth-child(2n) { animation-delay: -1.8s; }
.trust-badge:nth-child(3n) { animation-delay: -3.4s; }

@keyframes tb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ===================================================================
   ۶. احترام به تنظیم «کاهش حرکت» سیستم‌عامل
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* محتوا باید دیده شود، فقط بدون حرکت */
  .reveal,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}