/* ═══════════════════════════════════════════════════════════
   MICRO.CSS — Micro-interactions
   MICRO.CSS — تعاملات ریز
   
   فهرست / Table of Contents:
   01. Magnetic Buttons  — دکمه‌های مغناطیسی
   02. Card Hover        — کارت‌ها
   03. Link Letter       — فاصله حروف روی hover
   04. Button Press      — فشردن دکمه
   05. Scroll Progress   — نوار بالای صفحه
   06. Link Underline    — خط زیر لینک‌ها
   07. Image Hover       — زوم نرم عکس‌ها
   08. Reduced Motion    — احترام به کاربر
   09. Mobile            — موبایل
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   01. MAGNETIC BUTTONS — دکمه‌های مغناطیسی
   ─────────────────────────────────────────────────────────── */

.btn-send,
.hero-scroll,
.contact-links a,
.footer-social a,
.nav-links a,
.email-copy,
.email-link {
  transition:
    transform 0.4s cubic-bezier(.2, .8, .2, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    letter-spacing 0.35s ease;
}


/* ───────────────────────────────────────────────────────────
   02. CARD HOVER — کارت‌ها
   ─────────────────────────────────────────────────────────── */

/* ═══ کارت‌های More Work — خط آبی از چپ ═══ */
.work-list a {
  position: relative;
}

.work-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(.2, .8, .2, 1);
  z-index: 4;
}

.work-list a:hover::after {
  width: 100%;
}

/* ═══ کارت‌های پروژه اصلی — خط آبی از چپ ═══ */
#featuredProjects .project-card {
  position: relative;
}

#featuredProjects .project-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(.2, .8, .2, 1);
  z-index: 3;
  pointer-events: none;
}

#featuredProjects .project-card:hover::after {
  width: 100%;
}

/* ═══ فیلتر — انیمیشن سریع ═══ */
.filter-btn {
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    background-color 0.4s ease,
    transform 0.4s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.4s ease;
}


/* ───────────────────────────────────────────────────────────
   03. LINK LETTER-SPACING — فاصله حروف روی hover
   ─────────────────────────────────────────────────────────── */

.nav-links a,
.footer-social a,
.footer-top,
.back-link {
  transition:
    color 0.35s ease,
    letter-spacing 0.4s cubic-bezier(.2, .8, .2, 1);
}

.nav-links a:hover,
.footer-social a:hover,
.footer-top:hover,
.back-link:hover {
  letter-spacing: 0.18em;
}


/* ───────────────────────────────────────────────────────────
   04. BUTTON PRESS — فشردن دکمه
   ─────────────────────────────────────────────────────────── */

.btn-send:active,
.hero-scroll:active,
.email-copy:active,
.theme-toggle:active,
.lang-toggle:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* ═══ Ripple Effect ═══ */
.btn-send,
.hero-scroll {
  position: relative;
  overflow: hidden;
}

.btn-send::before,
.hero-scroll::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease,
    opacity 0.6s ease;
  pointer-events: none;
  opacity: 0;
}

.btn-send:active::before,
.hero-scroll:active::before {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0s, height 0s, opacity 0s;
}

.btn-send:not(:active)::before,
.hero-scroll:not(:active)::before {
  width: 0;
  height: 0;
  opacity: 0;
  transition:
    width 0.6s ease,
    height 0.6s ease,
    opacity 0.6s ease;
}


/* ───────────────────────────────────────────────────────────
   05. SCROLL PROGRESS — نوار بالای صفحه
   ─────────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ───────────────────────────────────────────────────────────
   06. LINK UNDERLINE — خط زیر لینک‌ها
   ─────────────────────────────────────────────────────────── */

.nav-links a,
.footer-social a {
  position: relative;
}

.nav-links a::after,
.footer-social a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(.2, .8, .2, 1);
}

.nav-links a:hover::after,
.footer-social a:hover::after {
  width: 100%;
}


/* ───────────────────────────────────────────────────────────
   07. IMAGE HOVER — زوم نرم عکس‌ها
   ─────────────────────────────────────────────────────────── */

.project-media img,
.work-cover,
.gallery-item img,
.sub-project-media,
.about-image img {
  transition: transform 0.9s cubic-bezier(.2, .8, .2, 1);
}


/* ───────────────────────────────────────────────────────────
   08. REDUCED MOTION
   ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn-send,
  .hero-scroll,
  .nav-links a,
  .footer-social a,
  .work-list a::after,
  #featuredProjects .project-card::after,
  .scroll-progress {
    transition: none !important;
    animation: none !important;
  }
}


/* ───────────────────────────────────────────────────────────
   09. MOBILE — غیرفعال
   ─────────────────────────────────────────────────────────── */

@media (hover: none), (max-width: 900px) {
  .nav-links a:hover,
  .footer-social a:hover,
  .footer-top:hover,
  .back-link:hover {
    letter-spacing: 0.08em;
  }
}