/* --- کلیات صفحه --- */
body {
    /* تصویر پس‌زمینه برای موبایل */
    background-image: url('flag-mobile.jpg');
    
    background-color: #1a1a1a;
    /* برای افکت زوم، سایز اولیه کمی بزرگتر است */
    background-size: 150%; 
    background-position: center;
    background-repeat: no-repeat;
    
    height: 100vh;
    margin: 0;
    overflow: hidden;

    /* ❗️اعمال انیمیشن جدید به پس‌زمینه */
    animation: kenburns 40s ease-out infinite alternate;
}

/* ----------------------------------------------------------------- */

/* --- تعریف انیمیشن Ken Burns --- */
@keyframes kenburns {
    /* در انتهای انیمیشن، تصویر به سایز اصلی خود برگشته و کمی جابجا می‌شود */
    100% {
        background-size: 100%;
        background-position: center left;
    }
}

/* ----------------------------------------------------------------- */

/* --- مدیا کوئری برای دسکتاپ --- */
@media (min-width: 768px) {
    body {
        /* تصویر پس‌زمینه برای دسکتاپ */
        background-image: url('flag-desktop.jpg');
    }
}