/**
 * ═══════════════════════════════════════════════════════════════
 *                    🎨 KIARA - COVER STYLES & ANIMATIONS
 * ═══════════════════════════════════════════════════════════════
 * 
 * @version 2.0.9
 * @description استایل‌ها و انیمیشن‌های کاورهای پروفایل کیارا
 * @author Kiara Team
 * @updated 2024
 * @fix Dual Selector Support (برای هر دو ساختار HTML)
 * 
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   📦 BASE COVER CLASSES
   ═══════════════════════════════════════════════════════════════ */

.profile-cover-section {
    position: relative;
    height: 420px;
    width: 100%;
    overflow: hidden;
    margin-top: 70px;
    margin-bottom: 20px;
    --accentA: var(--primary);
    --accentB: var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════
   🆓 FREE COVERS (کاورهای رایگان)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────── Basic ─────────────────── */
.cover-basic,
.profile-cover-section .cover-basic { 
    background: linear-gradient(135deg, #8b8b8b, #a8a8a8, #c0c0c0, #a8a8a8); 
    background-size: 400% 400%; 
    animation: gradientMove 8s ease-in-out infinite;
}

/* ─────────────────── Sunset ─────────────────── */
.cover-sunset,
.profile-cover-section .cover-sunset { 
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b9d, #c44569); 
    background-size: 400% 400%; 
    animation: gradientMove 8s ease-in-out infinite;
}

/* ─────────────────── Ocean ─────────────────── */
.cover-ocean,
.profile-cover-section .cover-ocean { 
    background: linear-gradient(135deg, #00b4db, #0083b0, #00c9ff, #0083b0); 
    background-size: 400% 400%; 
    animation: gradientMove 8s ease-in-out infinite;
}

/* ─────────────────── Forest ─────────────────── */
.cover-forest,
.profile-cover-section .cover-forest { 
    background: linear-gradient(135deg, #56ab2f, #a8e6cf, #56ab2f, #2f8f8f); 
    background-size: 400% 400%; 
    animation: gradientMove 8s ease-in-out infinite;
}

/* ─────────────────── Galaxy ─────────────────── */
.cover-galaxy,
.profile-cover-section .cover-galaxy { 
    background: linear-gradient(135deg, #2c3e50, #4a148c, #6a1b9a, #8e24aa, #2c3e50);
    background-size: 400% 400%;
    animation: galaxyRotate 12s linear infinite; 
}

/* ─────────────────── Rainbow ─────────────────── */
.cover-rainbow,
.profile-cover-section .cover-rainbow { 
    background: linear-gradient(135deg, #ff0080, #ff8c00, #40e0d0, #ff1493, #7b68ee, #ff0080);
    background-size: 400% 400%;
    animation: rainbowShift 10s ease-in-out infinite; 
}

/* ─────────────────── Aurora ─────────────────── */
.cover-aurora,
.profile-cover-section .cover-aurora { 
    background: linear-gradient(135deg, #00c9ff, #92fe9d, #00f5ff, #00e5ff, #64b5f6);
    background-size: 400% 400%;
    animation: auroraFlow 15s ease-in-out infinite; 
}

/* ─────────────────── Diamond ─────────────────── */
.cover-diamond,
.profile-cover-section .cover-diamond { 
    background: linear-gradient(135deg, #ffd700, #fff8dc, #f0e68c, #ffff00, #ffd700);
    background-size: 400% 400%;
    animation: diamondShine 8s linear infinite; 
}

/* ─────────────────── Platinum ─────────────────── */
.cover-platinum,
.profile-cover-section .cover-platinum { 
    background: linear-gradient(135deg, #e5e4e2, #c0c0c0, #f8f8ff, #dcdcdc, #e5e4e2); 
    background-size: 400% 400%;
    animation: platinumGlow 10s ease-in-out infinite; 
}

/* ─────────────────── Cosmic ─────────────────── */
.cover-cosmic,
.profile-cover-section .cover-cosmic { 
    background: linear-gradient(135deg, #000428, #004e92, #009ffd, #00d2ff, #000428);
    background-size: 400% 400%;
    animation: cosmicPulse 12s ease-in-out infinite; 
    position: relative; 
}

/* ─────────────────── Neon ─────────────────── */
.cover-neon,
.profile-cover-section .cover-neon { 
    background: linear-gradient(135deg, #ff006e, #8338ec, #3a86ff, #ff006e);
    background-size: 400% 400%;
    animation: neonPulse 3s ease-in-out infinite;
    position: relative;
}

/* ─────────────────── Velvet ─────────────────── */
.cover-velvet,
.profile-cover-section .cover-velvet { 
    background: linear-gradient(135deg, #7209b7, #a100f2, #f72585, #b5179e);
    background-size: 400% 400%;
    animation: velvetWave 6s ease-in-out infinite;
}

/* ─────────────────── Mystic ─────────────────── */
.cover-mystic,
.profile-cover-section .cover-mystic { 
    background: linear-gradient(135deg, #4361ee, #4cc9f0, #7209b7, #3a0ca3);
    background-size: 400% 400%;
    animation: mysticFlow 8s ease-in-out infinite;
}

/* ─────────────────── Royal ─────────────────── */
.cover-royal,
.profile-cover-section .cover-royal { 
    background: linear-gradient(135deg, #ffd60a, #ffb700, #003566, #001d3d);
    background-size: 400% 400%;
    animation: royalShine 5s ease-in-out infinite;
}

/* ─────────────────── Pearl ─────────────────── */
.cover-pearl,
.profile-cover-section .cover-pearl { 
    background: linear-gradient(135deg, #e0fbfc, #98c1d9, #ee6c4d, #293241);
    background-size: 400% 400%;
    animation: pearlLuster 7s ease-in-out infinite;
}

/* ─────────────────── Obsidian ─────────────────── */
.cover-obsidian,
.profile-cover-section .cover-obsidian { 
    background: linear-gradient(135deg, #2d3436, #636e72, #2d3436, #636e72);
    background-size: 400% 400%;
    animation: obsidianShift 4s ease-in-out infinite;
}

/* ─────────────────── Rose ─────────────────── */
.cover-rose,
.profile-cover-section .cover-rose { 
    background: linear-gradient(135deg, #ff006e, #fb5607, #ffbe0b, #fb5607);
    background-size: 400% 400%;
    animation: roseBloom 6s ease-in-out infinite;
}

/* ─────────────────── Emerald ─────────────────── */
.cover-emerald,
.profile-cover-section .cover-emerald { 
    background: linear-gradient(135deg, #52b788, #95d5b2, #1b4332, #2d6a4f);
    background-size: 400% 400%;
    animation: emeraldGleam 5s ease-in-out infinite;
}

/* ─────────────────── Amethyst ─────────────────── */
.cover-amethyst,
.profile-cover-section .cover-amethyst { 
    background: linear-gradient(135deg, #c77dff, #e0aaff, #7209b7, #560bad);
    background-size: 400% 400%;
    animation: amethystShimmer 7s ease-in-out infinite;
}

/* ─────────────────── Crimson ─────────────────── */
.cover-crimson,
.profile-cover-section .cover-crimson { 
    background: linear-gradient(135deg, #ff0a54, #ff477e, #ff85a1, #ff477e);
    background-size: 400% 400%;
    animation: crimsonWave 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   🖼️ GALLERY COVERS (کاورهای گالری)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────── Rose Gold ─────────────────── */
.cover-rose-gold,
.profile-cover-section .cover-rose-gold {
    background: linear-gradient(135deg, #ffaf87, #ffd1a0, #ffcc99);
    position: relative;
}
.cover-rose-gold::before,
.profile-cover-section .cover-rose-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,220,180,0.18), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(255,190,150,0.15), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

/* ─────────────────── Cerulean Flow ─────────────────── */
.cover-cerulean-flow,
.profile-cover-section .cover-cerulean-flow {
    background: linear-gradient(135deg, #00a8e8, #007ea7, #00c2ff);
    position: relative;
}
.cover-cerulean-flow::before,
.profile-cover-section .cover-cerulean-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,168,232,0.14), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(0,126,167,0.12), transparent 60%);
    opacity: 0.45;
    pointer-events: none;
}

/* ─────────────────── Graphite Weave ─────────────────── */
.cover-graphite-weave,
.profile-cover-section .cover-graphite-weave {
    background: linear-gradient(135deg, #202224, #2a2c2f, #3a3d40);
    position: relative;
}
.cover-graphite-weave::before,
.profile-cover-section .cover-graphite-weave::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 22px),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 22px);
    opacity: 0.3;
    pointer-events: none;
}

/* ─────────────────── Sandstone ─────────────────── */
.cover-sandstone,
.profile-cover-section .cover-sandstone { 
    background: linear-gradient(135deg, #e3b778, #d4893b, #f2cf97);
    position: relative;
}
.cover-sandstone::before,
.profile-cover-section .cover-sandstone::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(242,207,151,0.18), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(212,137,59,0.14), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

/* ─────────────────── Violet Blur ─────────────────── */
.cover-violet-blur,
.profile-cover-section .cover-violet-blur {
    background: linear-gradient(135deg, #5b2d92, #7b2cbf, #c77dff);
    position: relative;
}
.cover-violet-blur::before,
.profile-cover-section .cover-violet-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(199,125,255,0.18), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(123,44,191,0.14), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

/* ─────────────────── Lime Glow ─────────────────── */
.cover-lime-glow,
.profile-cover-section .cover-lime-glow {
    background: linear-gradient(135deg, #66d17a, #38b35f, #9be79c);
    position: relative;
}
.cover-lime-glow::before,
.profile-cover-section .cover-lime-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(155,231,156,0.18), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(56,179,95,0.14), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

/* ─────────────────── Vintage Emerald (سبز قدیمی) ─────────────────── */
.cover-vintage-emerald,
.profile-cover-section .cover-vintage-emerald {
    background: linear-gradient(135deg, #0a6e4a, #1a9f6c, #2dd4a0, #18a872);
    background-size: 300% 300%;
    position: relative;
    overflow: hidden;
    animation: vintageEmeraldBase 10s ease-in-out infinite;
}

.cover-vintage-emerald::before,
.profile-cover-section .cover-vintage-emerald::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(45, 212, 160, 0.35), transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(26, 159, 108, 0.30), transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.15), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(24, 168, 114, 0.25), transparent 40%);
    mix-blend-mode: screen;
    filter: blur(1.5px);
    animation: crystalShimmer 8s ease-in-out infinite alternate;
}

.cover-vintage-emerald::after,
.profile-cover-section .cover-vintage-emerald::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%) rotate(0deg);
    background:
        conic-gradient(
            from 0deg at 50% 50%, 
            rgba(45, 212, 160, 0) 0deg,
            rgba(45, 212, 160, 0.45) 25deg,
            rgba(45, 212, 160, 0) 60deg,
            rgba(24, 168, 114, 0) 120deg,
            rgba(24, 168, 114, 0.35) 160deg,
            rgba(24, 168, 114, 0) 200deg,
            rgba(10, 110, 74, 0.25) 280deg,
            rgba(10, 110, 74, 0) 360deg
        ),
        radial-gradient(
            ellipse at 50% 50%, 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(45, 212, 160, 0.12) 35%, 
            transparent 65%
        );
    mix-blend-mode: overlay;
    opacity: 0.7;
    animation: emeraldRotate 18s linear infinite, emeraldPulse 6s ease-in-out infinite alternate;
}

/* ─────────────────── Geometric Chaos (هرج‌ومرج هندسی) ─────────────────── */
.cover-geometric-chaos,
.profile-cover-section .cover-geometric-chaos {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    position: relative;
    overflow: hidden;
    animation: geoBase 8s ease-in-out infinite;
}

.cover-geometric-chaos::before,
.profile-cover-section .cover-geometric-chaos::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
    background-size: 50px 50px;
    animation: geoMove 4s linear infinite;
}

.cover-geometric-chaos::after,
.profile-cover-section .cover-geometric-chaos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px,
            transparent 25px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px,
            transparent 25px
        );
    opacity: 0.6;
    animation: geoFade 3s ease-in-out infinite alternate;
}

/* ─────────────────── Oil Slick (لکه نفتی) ─────────────────── */
.cover-oil-slick,
.profile-cover-section .cover-oil-slick {
    background: #000;
    position: relative;
    overflow: hidden;
}

.cover-oil-slick::before,
.profile-cover-section .cover-oil-slick::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        rgba(255, 0, 150, 0.4),
        rgba(0, 204, 255, 0.4),
        rgba(255, 255, 0, 0.4),
        rgba(0, 255, 100, 0.3),
        rgba(255, 0, 150, 0.4)
    );
    background-size: 400% 400%;
    animation: oilShift 8s ease infinite;
    filter: blur(30px);
    mix-blend-mode: screen;
}

.cover-oil-slick::after,
.profile-cover-section .cover-oil-slick::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 20, 147, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 191, 255, 0.25) 0%, transparent 45%);
    animation: oilWaves 12s ease-in-out infinite;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   💎 PREMIUM COVERS (کاورهای پریمیوم)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────── Phoenix ─────────────────── */
.cover-phoenix,
.profile-cover-section .cover-phoenix {
    background: linear-gradient(135deg, #ff512f, #f09819, #ff512f);
    background-size: 400% 400%;
    animation: phoenixFlare 6s ease-in-out infinite;
    position: relative;
}
.cover-phoenix::before,
.profile-cover-section .cover-phoenix::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.12), transparent 50%),
        radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.08), transparent 50%);
    mix-blend-mode: screen;
    animation: phoenixGlow 5s ease-in-out infinite alternate;
}
.cover-phoenix::after,
.profile-cover-section .cover-phoenix::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 160%;
    height: 80%;
    background:
        conic-gradient(from 180deg at 50% 50%, rgba(255,140,0,0.0), rgba(255,140,0,0.35), rgba(255,69,0,0.0)),
        radial-gradient(ellipse at 60% 50%, rgba(255,200,100,0.25), transparent 55%);
    mix-blend-mode: screen;
    opacity: 0.6;
    transform: rotate(-8deg);
    animation: flameWaves 8s ease-in-out infinite;
}

/* ─────────────────── Ice ─────────────────── */
.cover-ice,
.profile-cover-section .cover-ice {
    background: linear-gradient(135deg, #a8e6ff, #e0f7ff, #c9efff);
    background-size: 400% 400%;
    animation: iceDrift 10s ease-in-out infinite;
    position: relative;
}
.cover-ice::before,
.profile-cover-section .cover-ice::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.25), transparent 50%);
    filter: blur(2px);
    animation: iceSparkle 8s ease-in-out infinite alternate;
}
.cover-ice::after,
.profile-cover-section .cover-ice::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 140%;
    height: 60%;
    background:
        repeating-linear-gradient(120deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 18px),
        radial-gradient(ellipse at 30% 30%, rgba(200,240,255,0.35), transparent 55%);
    opacity: 0.5;
    filter: blur(0.5px);
    transform: rotate(8deg);
    animation: iceShards 10s ease-in-out infinite;
}

/* ─────────────────── Quantum ─────────────────── */
.cover-quantum,
.profile-cover-section .cover-quantum {
    background: linear-gradient(135deg, #00f5ff, #7d5fff, #00f5ff);
    background-size: 400% 400%;
    animation: quantumPulse 4s ease-in-out infinite;
    position: relative;
}
.cover-quantum::before,
.profile-cover-section .cover-quantum::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 75%, rgba(0,245,255,0.15), transparent 55%),
        radial-gradient(circle at 75% 25%, rgba(125,95,255,0.15), transparent 55%);
    animation: quantumGlow 6s ease-in-out infinite;
}
.cover-quantum::after,
.profile-cover-section .cover-quantum::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(50,50,80,0.18), transparent 60%),
        conic-gradient(from 0deg at 50% 50%, rgba(0,245,255,0) 0deg, rgba(0,245,255,0.40) 30deg, rgba(0,245,255,0) 80deg, rgba(125,95,255,0.30) 160deg, rgba(125,95,255,0) 360deg);
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: rotateOrbit 18s linear infinite;
}

/* ─────────────────── Sakura ─────────────────── */
.cover-sakura,
.profile-cover-section .cover-sakura {
    background: linear-gradient(135deg, #ffafcc, #ffc8dd, #ffafcc);
    background-size: 400% 400%;
    animation: sakuraFlow 10s ease-in-out infinite;
    position: relative;
}
.cover-sakura::before,
.profile-cover-section .cover-sakura::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.1), transparent 50%);
    animation: sakuraBloom 12s ease-in-out infinite;
}
.cover-sakura::after,
.profile-cover-section .cover-sakura::after {
    content: '';
    position: absolute;
    top: -5%;
    right: -10%;
    width: 140%;
    height: 70%;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(255, 220, 230, 0.5), transparent 60%),
        repeating-linear-gradient(30deg, rgba(255, 190, 210, 0.25) 0 8px, transparent 8px 18px);
    opacity: 0.5;
    transform: rotate(-12deg);
    animation: petalsDrift 12s ease-in-out infinite;
}

/* ─────────────────── Kiara Gold ─────────────────── */
.cover-kiara-gold,
.profile-cover-section .cover-kiara-gold {
    background: linear-gradient(135deg, #ffd700, #ffb700, #ffd700);
    background-size: 400% 400%;
    animation: kiaraShine 7s ease-in-out infinite;
    position: relative;
}
.cover-kiara-gold::before,
.profile-cover-section .cover-kiara-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.12), transparent 60%);
    filter: blur(1px);
    animation: kiaraPulse 6s ease-in-out infinite alternate;
}
.cover-kiara-gold::after,
.profile-cover-section .cover-kiara-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 90deg at 50% 50%, rgba(255,215,0,0.0), rgba(255,215,0,0.35), rgba(255,180,0,0.0)),
        radial-gradient(ellipse at 50% 60%, rgba(255,240,180,0.3), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.6;
    animation: goldAura 8s ease-in-out infinite;
}

/* ─────────────────── Shadow ─────────────────── */
.cover-shadow,
.profile-cover-section .cover-shadow {
    background: linear-gradient(135deg, #0f0f0f, #202020, #0f0f0f);
    background-size: 400% 400%;
    animation: shadowBreath 12s ease-in-out infinite;
    position: relative;
}
.cover-shadow::before,
.profile-cover-section .cover-shadow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.05), transparent 55%);
    animation: shadowGlow 10s ease-in-out infinite alternate;
}
.cover-shadow::after,
.profile-cover-section .cover-shadow::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, transparent 10px 22px),
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.35), transparent 60%);
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: shadowMesh 14s linear infinite;
}

/* ─────────────────── Orbit ─────────────────── */
.cover-orbit,
.profile-cover-section .cover-orbit {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    background-size: 400% 400%;
    position: relative;
    animation: orbitHue 12s ease-in-out infinite;
}
.cover-orbit::before,
.profile-cover-section .cover-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.12), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.10), transparent 55%),
        radial-gradient(circle at 40% 60%, rgba(255,255,255,0.08), transparent 55%);
    mix-blend-mode: screen;
    animation: twinkle 8s ease-in-out infinite;
}
.cover-orbit::after,
.profile-cover-section .cover-orbit::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,230,160,0.14), rgba(255,230,160,0.06) 40%, transparent 60%),
        conic-gradient(from 0deg at 50% 50%, rgba(255,201,60,0) 0deg, rgba(255,201,60,0.42) 22deg, rgba(255,201,60,0) 60deg, rgba(255,201,60,0.28) 120deg, rgba(255,201,60,0) 180deg, rgba(255,201,60,0.38) 270deg, rgba(255,201,60,0) 360deg);
    mix-blend-mode: screen;
    opacity: 0.45;
    animation: rotateOrbit 20s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   🎬 ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ─────── Free Covers Animations ─────── */

@keyframes gradientMove { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes galaxyRotate { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 400% 50%; } 
}

@keyframes rainbowShift { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes auroraFlow { 
    0%, 100% { background-position: 0% 0%; } 
    25% { background-position: 100% 100%; } 
    50% { background-position: 0% 100%; } 
    75% { background-position: 100% 0%; } 
}

@keyframes diamondShine { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes platinumGlow { 
    0%, 100% { filter: brightness(1) contrast(1); } 
    50% { filter: brightness(1.1) contrast(1.05); } 
}

@keyframes cosmicPulse { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes neonPulse { 
    0%, 100% { filter: brightness(1) contrast(1); } 
    50% { filter: brightness(1.2) contrast(1.1); } 
}

@keyframes velvetWave { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes mysticFlow {
    0%, 100% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

@keyframes royalShine { 
    0%, 100% { filter: brightness(1); } 
    50% { filter: brightness(1.3); } 
}

@keyframes pearlLuster { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes obsidianShift { 
    0%, 100% { filter: brightness(0.8); } 
    50% { filter: brightness(1.2); } 
}

@keyframes roseBloom { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes emeraldGleam { 
    0%, 100% { filter: brightness(1) saturate(1); } 
    50% { filter: brightness(1.2) saturate(1.2); } 
}

@keyframes amethystShimmer { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes crimsonWave { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

/* ─────── Gallery Covers Animations ─────── */

@keyframes vintageEmeraldBase {
    0%, 100% { 
        background-position: 0% 50%; 
        filter: brightness(1) saturate(1.1);
    }
    25% { 
        background-position: 50% 75%; 
        filter: brightness(1.05) saturate(1.15);
    }
    50% { 
        background-position: 100% 50%; 
        filter: brightness(1.1) saturate(1.2);
    }
    75% { 
        background-position: 50% 25%; 
        filter: brightness(1.05) saturate(1.15);
    }
}

@keyframes crystalShimmer {
    0% { 
        opacity: 0.4; 
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 0.75; 
        transform: scale(1.05) rotate(5deg);
    }
    100% { 
        opacity: 0.5; 
        transform: scale(1.02) rotate(-3deg);
    }
}

@keyframes emeraldRotate {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

@keyframes emeraldPulse {
    0% { 
        opacity: 0.5; 
        filter: blur(0px);
    }
    100% { 
        opacity: 0.85; 
        filter: blur(2px);
    }
}

@keyframes geoBase {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

@keyframes geoMove {
    0% { 
        background-position: 0 0, 0 0; 
    }
    100% { 
        background-position: 50px 50px, -50px -50px; 
    }
}

@keyframes geoFade {
    0% { 
        opacity: 0.4; 
    }
    100% { 
        opacity: 0.8; 
    }
}

@keyframes oilShift {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

@keyframes oilWaves {
    0%, 100% { 
        transform: rotate(0deg) scale(1); 
        opacity: 0.6;
    }
    33% { 
        transform: rotate(120deg) scale(1.1); 
        opacity: 0.8;
    }
    66% { 
        transform: rotate(240deg) scale(0.95); 
        opacity: 0.7;
    }
}

/* ─────── Premium Covers Animations ─────── */

@keyframes phoenixFlare { 
    0%, 100% { filter: brightness(1.05); } 
    50% { filter: brightness(1.2); } 
}

@keyframes phoenixGlow { 
    0% { opacity: 0.3; } 
    100% { opacity: 0.7; } 
}

@keyframes flameWaves {
    0%, 100% { transform: rotate(-8deg) translateY(0px); }
    50% { transform: rotate(-4deg) translateY(-6px); }
}

@keyframes iceDrift { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes iceSparkle { 
    0% { opacity: 0.4; } 
    100% { opacity: 0.9; } 
}

@keyframes iceShards {
    0%, 100% { transform: rotate(8deg) translateY(0px); }
    50% { transform: rotate(10deg) translateY(8px); }
}

@keyframes quantumPulse { 
    0%, 100% { filter: brightness(1); } 
    50% { filter: brightness(1.15); } 
}

@keyframes quantumGlow { 
    0%, 100% { opacity: 0.4; } 
    50% { opacity: 0.8; } 
}

@keyframes rotateOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sakuraFlow { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

@keyframes sakuraBloom { 
    0% { opacity: 0.3; } 
    50% { opacity: 0.6; } 
    100% { opacity: 0.4; } 
}

@keyframes petalsDrift {
    0%, 100% { transform: rotate(-12deg) translateY(0px); }
    50% { transform: rotate(-8deg) translateY(6px); }
}

@keyframes kiaraShine { 
    0%, 100% { filter: brightness(1); } 
    50% { filter: brightness(1.25); } 
}

@keyframes kiaraPulse { 
    0% { opacity: 0.3; } 
    100% { opacity: 0.7; } 
}

@keyframes goldAura { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.02); } 
}

@keyframes shadowBreath { 
    0%, 100% { filter: brightness(0.95); } 
    50% { filter: brightness(1.05); } 
}

@keyframes shadowGlow { 
    0% { opacity: 0.12; } 
    100% { opacity: 0.22; } 
}

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

@keyframes orbitHue {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.1) saturate(1.1); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .profile-cover-section { 
        height: 380px; 
        margin-top: 60px;
    }
}

@media (min-width: 768px) {
    .profile-cover-section { 
        height: 450px; 
    }
}

@media (min-width: 1024px) {
    .profile-cover-section { 
        height: 480px; 
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔮 PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* کاهش انیمیشن در حالت کم‌مصرف */
@media (prefers-reduced-motion: reduce) {
    .profile-cover-section,
    .profile-cover-section::before,
    .profile-cover-section::after,
    [class*="cover-"]::before,
    [class*="cover-"]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* بهینه‌سازی GPU */
.profile-cover-section,
.profile-cover-section::before,
.profile-cover-section::after,
[class*="cover-"],
[class*="cover-"]::before,
[class*="cover-"]::after {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   ✅ END OF FILE
   Total Covers: 29 (20 Free + 9 Gallery + 7 Premium)
   ═══════════════════════════════════════════════════════════════ */