/* ==========================================================================
   تعریف فونت‌های سراسری با ۵ ضخامت متفاوت
   ========================================================================== */

/* ۱. ضخامت Light (300) */
@font-face {
    font-family: 'Lyon Arabic Display';
    src: url("../fonts/Lyon Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ۲. ضخامت Regular (400) */
@font-face {
    font-family: 'Lyon Arabic Display';
    src: url("../fonts/Lyon Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ۳. ضخامت Medium (500) */
@font-face {
    font-family: 'Lyon Arabic Display';
    src: url("../fonts/Lyon Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ۴. ضخامت Bold (700) */
@font-face {
    font-family: 'Lyon Arabic Display';
    src: url("../fonts/Lyon Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ۵. ضخامت Black (900) */
@font-face {
    font-family: 'Lyon Arabic Display';
    src: url("../fonts/Lyon Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   تنظیمات عمومی سایت
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    background-color: #ffffff;
    font-family: 'Lyon Arabic Display', 'Tahoma', sans-serif;
    direction: rtl;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* استایل مشترک لینک‌های ناوبری (A1 تا A6) */
.menu-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-family: 'Lyon Arabic Display', sans-serif;
    /* استفاده از vw برای اندازه فونت جهت بزرگ و کوچک شدن متناسب با نمایشگر */
    font-size: 1.25vw; 
    font-weight: 900; /* ضخامت بلک */
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease;
    z-index: 10;
    background: transparent;
    border: none;
}

/* موشن ملایم بزرگ‌نمایی در زمان هاور روی منوها */
.menu-item:hover {
    transform: scale(1.08); /* ۸ درصد بزرگتر شدن هماهنگ با طرح */
    color: #333333;
}

/* کلاس عمومی برای آیکون‌های گالری */
.gallery-item {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    /* این خاصیت باعث می‌شود وقتی بزرگ شد، روی بقیه نپرد */
    transform-origin: center; 
}

/* جلوگیری از کوچک شدن مجدد بعد از خروج موس */
.gallery-item:hover {
    transform: scale(1.2);
}