/* header-anim.css — انیمیشن منوی هدر دسکتاپ
   • موس روی هر آیتم: خط زیرش میاد و با موس بین آیتم‌ها سر می‌خوره
   • خود آیتم با یه فنر نرم کمی بزرگ می‌شه */
@media (min-width: 769px) {
    .site-header .main-nav { position: relative; align-items: center; }

    .site-header .main-nav > a {
        position: relative;
        display: inline-block;
        padding: 6px 2px;
        transform-origin: center;
        transition: color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), text-shadow .3s ease;
        will-change: transform;
    }
    .site-header .main-nav > a:hover,
    .site-header .main-nav > a:focus-visible {
        color: var(--accent);
        transform: scale(1.12);
        outline: none;
    }
    [data-theme="dark"] .site-header .main-nav > a:hover,
    [data-theme="dark"] .site-header .main-nav > a:focus-visible { text-shadow: 0 0 14px rgba(47, 168, 255, .55); }
    .site-header .main-nav > a:active { transform: scale(1.04); }

    /* خطِ متحرک زیر آیتم‌ها (با JS موقعیتش عوض می‌شه) */
    .site-header .main-nav__line {
        position: absolute;
        left: 0; bottom: -3px;
        height: 3px; width: 0;
        border-radius: 3px;
        background: linear-gradient(90deg, #5cc9ff, #2f6bff 50%, #8b5cf6);
        box-shadow: 0 0 10px rgba(47, 107, 255, .55);
        opacity: 0;
        transform: translateX(0);
        transition: transform .38s cubic-bezier(.65, 0, .25, 1), width .38s cubic-bezier(.65, 0, .25, 1), opacity .25s ease;
        pointer-events: none;
    }
    .site-header .main-nav__line.on { opacity: 1; }
    .site-header .main-nav__line.no-anim { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .main-nav > a, .site-header .main-nav__line { transition: none !important; }
    .site-header .main-nav > a:hover { transform: none; }
}

/* ---- اضافه‌شده: صفحه‌ی فعال همیشه خط زیرش رو داره ---- */
@media (min-width: 769px) {
    .site-header .main-nav > a.is-active { color: var(--accent); }
    .site-header .main-nav__line { height: 3px; bottom: -4px; }
}