/* استدعاء خط ثمانية الأصلي من المجلد المحلي الخاص بك */
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('fonts/thmanyahsans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('fonts/thmanyahsans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('fonts/thmanyahsans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* الأنماط العامة للموقع */
body {
    font-family: 'Thmanyah Sans', sans-serif;
    letter-spacing: -0.03em;
}

/* 🎯 تحديث الخلفية الفاخرة لتتناسب مع الكمبيوتر والجوال بدقة عالية */
.premium-bg {
    background-image: url('avatar.png');
    background-repeat: no-repeat;
    background-position: center center; /* لجعل الأفاتار يتوسط الشاشة دائماً */
    background-size: cover;             /* يغطي المساحة كاملة بدون تمطيط للأبعاد */
    background-attachment: fixed;       /* تثبيت سينمائي على الشاشات الكبيرة */
    filter: grayscale(100%) contrast(130%);
    transition: all 0.3s ease;
}

/* هالّة الضوء السينمائية المطورة التي تتبع الماوس */
#mouse-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0) 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2;
    mix-blend-mode: screen;
}

/* توهج أطراف الكروت تفاعلياً عند حرك الفأرة */
.glow-card {
    position: relative;
    overflow: hidden;
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(300px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(245, 158, 11, 0.15), transparent 80%);
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* تحسين انتقال الأزرار الكبرى لتبدو مرنة وناعمة جداً */
a[href*="tiktok"] {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* تأثير التوهج البرتقالي الفاخر للأزرار عند تحويم الماوس والارتفاع بنعومة */
a[href*="video"]:hover, a[href*="tiktok"]:hover {
    box-shadow: 0 10px 40px -4px rgba(245, 158, 11, 0.35);
    transform: translateY(-2px);
}

/* 📱 كود ذكي وخاص بشاشات الجوال لحل مشكلة الخلفية نهائياً */
@media (max-width: 768px) {
    .premium-bg {
        background-attachment: scroll !important; /* إلغاء التثبيت لمنع تشنج متصفحات الجوال */
        background-size: contain !important;     /* جعل الصورة تظهر بالكامل داخل أبعاد الجوال */
        opacity: 0.02 !important;                /* تقليل الشفافية قليلاً لراحة العين وقراءة النصوص */
        background-position: center 25% !important; /* رفع الأفاتار قليلاً ليظهر بوضوح في الأعلى */
    }
    
    #mouse-glow {
        display: none !important; /* إخفاء هالّة الماوس على الجوال لأنه لا يوجد ماوس وحفاظاً على الأداء */
    }
}