{* انیمیشن درخشش پرچم *}
@keyframes flagPulse {
    0% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(255,215,0,0.6)); }
    100% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
}

{* انیمیشن سوسو زدن شعله *}
@keyframes fireFlicker {
    0% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.4; transform: scale(1); }
}

{* انیمیشن ورود پرچم *}
@keyframes flagEntry {
    0% { opacity: 0; transform: scale(0.5) rotate(-15deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
{* انیمیشن باد - پرچم مثل اینکه باد می‌وزد *}
@keyframes windWave {
    0% { 
        transform: perspective(400px) rotateY(0deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(255,215,0,0.2));
    }
    15% { 
        transform: perspective(400px) rotateY(-8deg) scale(1.02);
        filter: drop-shadow(0 0 15px rgba(255,215,0,0.4));
    }
    30% { 
        transform: perspective(400px) rotateY(5deg) scale(0.98);
        filter: drop-shadow(0 0 10px rgba(255,215,0,0.3));
    }
    50% { 
        transform: perspective(400px) rotateY(-5deg) scale(1.01);
        filter: drop-shadow(0 0 20px rgba(255,215,0,0.5));
    }
    70% { 
        transform: perspective(400px) rotateY(3deg) scale(0.99);
        filter: drop-shadow(0 0 12px rgba(255,215,0,0.3));
    }
    85% { 
        transform: perspective(400px) rotateY(-6deg) scale(1.02);
        filter: drop-shadow(0 0 18px rgba(255,215,0,0.4));
    }
    100% { 
        transform: perspective(400px) rotateY(0deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(255,215,0,0.2));
    }
}

{* انیمیشن رقص شعله *}
@keyframes fireDance {
    0% { 
        transform: scale(1) rotate(0deg) translateY(0px);
        opacity: 0.6;
    }
    25% { 
        transform: scale(1.3) rotate(15deg) translateY(-3px);
        opacity: 1;
    }
    50% { 
        transform: scale(0.9) rotate(-10deg) translateY(2px);
        opacity: 0.8;
    }
    75% { 
        transform: scale(1.2) rotate(10deg) translateY(-2px);
        opacity: 1;
    }
    100% { 
        transform: scale(1) rotate(0deg) translateY(0px);
        opacity: 0.6;
    }
}

{* انیمیشن چشمک زدن نقاط درخشان *}
@keyframes sparkle {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.3;
    }
    50% { 
        transform: scale(1.8);
        opacity: 0.8;
    }
}

{* انیمیشن ورود پرچم (هنگام لود صفحه) *}
@keyframes flagEntry {
    0% { 
        opacity: 0; 
        transform: scale(0.3) rotate(-20deg) perspective(400px) rotateY(30deg);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(0deg) perspective(400px) rotateY(0deg);
    }
}

{* اعمال انیمیشن ورود به پرچم *}
.flag-icon {
    animation: flagEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, windWave 3s ease-in-out 0.8s infinite;
}

{* انیمیشن باد - پرچم مثل پرچم واقعی تکان می‌خورد *}
@keyframes flagWave {
    0% { 
        transform: perspective(500px) rotateY(0deg) skewX(0deg);
    }
    10% { 
        transform: perspective(500px) rotateY(-8deg) skewX(2deg);
    }
    20% { 
        transform: perspective(500px) rotateY(5deg) skewX(-1deg);
    }
    30% { 
        transform: perspective(500px) rotateY(-12deg) skewX(3deg);
    }
    40% { 
        transform: perspective(500px) rotateY(3deg) skewX(-2deg);
    }
    50% { 
        transform: perspective(500px) rotateY(-6deg) skewX(1deg);
    }
    60% { 
        transform: perspective(500px) rotateY(8deg) skewX(-3deg);
    }
    70% { 
        transform: perspective(500px) rotateY(-4deg) skewX(2deg);
    }
    80% { 
        transform: perspective(500px) rotateY(6deg) skewX(-1deg);
    }
    90% { 
        transform: perspective(500px) rotateY(-10deg) skewX(2deg);
    }
    100% { 
        transform: perspective(500px) rotateY(0deg) skewX(0deg);
    }
}

{* انیمیشن سوسو زدن شعله *}
@keyframes fireFlicker {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    50% { 
        transform: scale(0.9) rotate(-5deg);
        opacity: 0.8;
    }
    75% { 
        transform: scale(1.1) rotate(8deg);
        opacity: 1;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}