/* =====================================================
   SoroDev — animations.css
   انیمیشن‌ها: Scroll Reveal، Floating، Loader، ورود Hero
   نکته: کلاس‌های JS-driven (.reveal.in-view / .loader.loaded / ...)
   در script.js toggle می‌شوند.
===================================================== */

/* -----------------------------------------------------
   احترام به کاربرانی که انیمیشن نمی‌خواهند
----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------
   1) Scroll Reveal
   وضعیت اولیه با data-reveal ست می‌شود؛
   JS با IntersectionObserver کلاس in-view را اضافه می‌کند
----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* تاخیر پلکانی برای گروه‌هایی مثل کارت‌های آمار / پروژه / مهارت */
.about-stats [data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.about-stats [data-reveal]:nth-child(2) { transition-delay: 0.15s; }
.about-stats [data-reveal]:nth-child(3) { transition-delay: 0.25s; }

.projects-grid [data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.projects-grid [data-reveal]:nth-child(2) { transition-delay: 0.15s; }

.skill-item[data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.skill-item[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.skill-item[data-reveal]:nth-child(3) { transition-delay: 0.15s; }
.skill-item[data-reveal]:nth-child(4) { transition-delay: 0.2s; }

.timeline-item[data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.timeline-item[data-reveal]:nth-child(2) { transition-delay: 0.2s; }
.timeline-item[data-reveal]:nth-child(3) { transition-delay: 0.35s; }

/* -----------------------------------------------------
   2) Hero — ورود اولیه (بدون نیاز به اسکرول)
   همزمان با پایان لودر پخش می‌شود (JS کلاس page-ready را اضافه می‌کند)
----------------------------------------------------- */
.hero-content,
.hero-visual {
  opacity: 0;
  transform: translateY(24px);
}

body.page-ready .hero-content {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

body.page-ready .hero-visual {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------
   3) شناور بودن (Floating) تصویر پروفایل
   دامنه‌ی حرکت کم و آرام — حرفه‌ای، نه نمایشی
----------------------------------------------------- */
.hero-avatar-wrap {
  animation: floatY 5s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero-glow {
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.08); }
}

/* -----------------------------------------------------
   4) اسکرول‌ایندیکیتور هیرو (فقط translateY — سازگار با RTL)
----------------------------------------------------- */
.scroll-indicator {
  animation: bounceDown 2.2s ease-in-out infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* -----------------------------------------------------
   5) Loader — نبض ملایم لوگو حین بارگذاری
----------------------------------------------------- */
.loader-logo {
  animation: logoPulse 1.6s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* -----------------------------------------------------
   6) گرادیان پس‌زمینه‌ی برند — با transform (GPU-friendly)
   قبلاً background-position انیمیت می‌شد که در کل لایه
   Repaint ایجاد می‌کرد؛ حالا فقط transform سبک است.
----------------------------------------------------- */
.hero::before {
  animation: auraShift 14s ease-in-out infinite alternate;
}

@keyframes auraShift {
  0%   { transform: translate(-1.5%, -1%); }
  100% { transform: translate(1.5%, 1%); }
}

/* -----------------------------------------------------
   7) Badge هیرو — چرخش ملایم ایموجی راکت
----------------------------------------------------- */
.badge-emoji {
  display: inline-block;
  animation: rocketWiggle 2.4s ease-in-out infinite;
}

@keyframes rocketWiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-8deg) translateY(-2px); }
  75%      { transform: rotate(8deg) translateY(-2px); }
}