/* Fancy Headers Pro - Frontend Styles */

/* Base styles for all fancy headers */
.fancy-header-pro {
    display: inline-block;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    margin: 20px 0;
    border-radius: 8px;
    box-sizing: border-box;
    word-wrap: break-word;
    hyphens: auto;
}

/* Style 1: Simple Gradient Background */
.fancy-header-pro.style-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Style 2: Elegant Gold */
.fancy-header-pro.style-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

/* Style 3: Professional Blue */
.fancy-header-pro.style-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

/* Style 4: Modern Dark */
.fancy-header-pro.style-4 {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Style 5: Sunset Orange */
.fancy-header-pro.style-5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
}

/* Style 6: Ocean Blue */
.fancy-header-pro.style-6 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #2c3e50;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    box-shadow: 0 4px 15px rgba(168, 237, 234, 0.4);
}

/* Style 7: Forest Green */
.fancy-header-pro.style-7 {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(19, 78, 94, 0.4);
}

/* Style 8: Royal Purple */
.fancy-header-pro.style-8 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

/* Style 9: Warm Coffee */
.fancy-header-pro.style-9 {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
    color: #8b4513;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    box-shadow: 0 4px 15px rgba(210, 153, 194, 0.4);
}

/* Style 10: Ice Blue */
.fancy-header-pro.style-10 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
}

/* Style 11: Striped Pattern */
.fancy-header-pro.style-11 {
    background: repeating-linear-gradient(
        45deg,
        #667eea,
        #667eea 10px,
        #764ba2 10px,
        #764ba2 20px
    );
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Style 12: Geometric Border */
.fancy-header-pro.style-12 {
    background: #fff;
    color: #333;
    border: 3px solid;
    border-image: linear-gradient(45deg, #667eea, #764ba2) 1;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Style 13: Neon Glow */
.fancy-header-pro.style-13 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Style 14: Retro Wave */
.fancy-header-pro.style-14 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #4facfe 50%, #00f2fe 75%, #43e97b 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

/* Style 15: Minimalist Border */
.fancy-header-pro.style-15 {
    background: #fff;
    color: #333;
    border-left: 5px solid #667eea;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Style 16: Radial Burst */
.fancy-header-pro.style-16 {
    background: radial-gradient(circle at center, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Style 17: Diamond Pattern */
.fancy-header-pro.style-17 {
    background:
        linear-gradient(135deg, #667eea 25%, transparent 25%),
        linear-gradient(225deg, #667eea 25%, transparent 25%),
        linear-gradient(315deg, #667eea 25%, transparent 25%),
        linear-gradient(45deg, #667eea 25%, #764ba2 25%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Style 18: Elegant Shadow */
.fancy-header-pro.style-18 {
    background: #fff;
    color: #333;
    box-shadow:
        0 4px 15px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
}

/* Style 19: Fire Gradient */
.fancy-header-pro.style-19 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    color: #333;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
}

/* Style 20: Crystal Clear */
.fancy-header-pro.style-20 {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ===== GLASS EFFECTS (Styles 21-30) ===== */

.fancy-header-pro.style-21 {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
}

.fancy-header-pro.style-21::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    border-radius: 15px;
    pointer-events: none;
}

.fancy-header-pro.style-22 {
    background: linear-gradient(135deg, rgba(0,150,255,0.1), rgba(0,200,255,0.05));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0,150,255,0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,150,255,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-23 {
    background: linear-gradient(135deg, rgba(255,20,147,0.1), rgba(255,100,150,0.05));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,20,147,0.3);
    border-radius: 25px;
    box-shadow: 0 8px 32px rgba(255,20,147,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-24 {
    background: linear-gradient(135deg, rgba(50,205,50,0.1), rgba(100,255,100,0.05));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(50,205,50,0.3);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(50,205,50,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-25 {
    background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(255,200,0,0.05));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(255,165,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-26 {
    background: linear-gradient(135deg, rgba(138,43,226,0.1), rgba(186,85,211,0.05));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(138,43,226,0.3);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(138,43,226,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-27 {
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(200,200,200,0.1));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
}

.fancy-header-pro.style-28 {
    background: linear-gradient(135deg, rgba(255,0,0,0.1), rgba(255,100,100,0.05));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,0,0,0.3);
    border-radius: 30px;
    box-shadow: 0 8px 32px rgba(255,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-29 {
    background: linear-gradient(135deg, rgba(0,255,0,0.1), rgba(100,255,100,0.05));
    backdrop-filter: blur(11px);
    border: 1px solid rgba(0,255,0,0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,255,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-30 {
    background: linear-gradient(135deg, rgba(0,0,255,0.1), rgba(100,100,255,0.05));
    backdrop-filter: blur(13px);
    border: 1px solid rgba(0,0,255,0.3);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,255,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ===== CHROME/METAL EFFECTS (Styles 31-40) ===== */

.fancy-header-pro.style-31 {
    background: linear-gradient(135deg, #e8e8e8 0%, #c0c0c0 50%, #a0a0a0 100%);
    border: 2px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.2);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.fancy-header-pro.style-32 {
    background: linear-gradient(135deg, #f8f8f8 0%, #e0e0e0 50%, #c8c8c8 100%);
    border: 1px solid #999;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -2px 0 rgba(0,0,0,0.1);
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-33 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffb347 100%);
    border: 2px solid #daa520;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(218,165,32,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-34 {
    background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 50%, #909090 100%);
    border: 1px solid #666;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.fancy-header-pro.style-35 {
    background: linear-gradient(135deg, #b87333 0%, #a0522d 50%, #8b4513 100%);
    border: 2px solid #654321;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(139,69,19,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.fancy-header-pro.style-36 {
    background: linear-gradient(135deg, #708090 0%, #778899 50%, #2f4f4f 100%);
    border: 1px solid #4a5d5d;
    border-radius: 14px;
    box-shadow: 0 5px 10px rgba(47,79,79,0.3), inset 0 2px 0 rgba(255,255,255,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-37 {
    background: linear-gradient(135deg, #ff6347 0%, #ff7f50 50%, #ff4500 100%);
    border: 2px solid #dc143c;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(255,99,71,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-38 {
    background: linear-gradient(135deg, #4169e1 0%, #0000ff 50%, #00008b 100%);
    border: 1px solid #1e90ff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(65,105,225,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.fancy-header-pro.style-39 {
    background: linear-gradient(135deg, #32cd32 0%, #228b22 50%, #006400 100%);
    border: 2px solid #008000;
    border-radius: 16px;
    box-shadow: 0 5px 10px rgba(50,205,50,0.3), inset 0 2px 0 rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.fancy-header-pro.style-40 {
    background: linear-gradient(135deg, #dda0dd 0%, #ba55d3 50%, #9932cc 100%);
    border: 1px solid #8b008b;
    border-radius: 18px;
    box-shadow: 0 5px 10px rgba(221,160,221,0.3), inset 0 2px 0 rgba(255,255,255,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* ===== BUBBLE EFFECTS (Styles 41-50) ===== */

.fancy-header-pro.style-41 {
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(173,216,230,0.6));
    border: 2px solid rgba(173,216,230,0.8);
    border-radius: 50px;
    box-shadow: 0 8px 16px rgba(173,216,230,0.4), inset 0 2px 0 rgba(255,255,255,0.9);
    position: relative;
}

.fancy-header-pro.style-41::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fancy-header-pro.style-42 {
    background: radial-gradient(circle at 70% 20%, rgba(255,182,193,0.7), rgba(255,105,180,0.5));
    border: 2px solid rgba(255,105,180,0.7);
    border-radius: 45px;
    box-shadow: 0 6px 12px rgba(255,105,180,0.3), inset 0 2px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-43 {
    background: radial-gradient(circle at 20% 80%, rgba(144,238,144,0.8), rgba(50,205,50,0.6));
    border: 2px solid rgba(50,205,50,0.8);
    border-radius: 40px;
    box-shadow: 0 7px 14px rgba(50,205,50,0.4), inset 0 2px 0 rgba(255,255,255,0.9);
    position: relative;
}

.fancy-header-pro.style-43::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    width: 15px;
    height: 15px;
    background: rgba(144,238,144,0.6);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fancy-header-pro.style-44 {
    background: radial-gradient(circle at 80% 30%, rgba(255,218,185,0.7), rgba(255,165,0,0.5));
    border: 2px solid rgba(255,165,0,0.7);
    border-radius: 35px;
    box-shadow: 0 5px 10px rgba(255,165,0,0.3), inset 0 2px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-45 {
    background: radial-gradient(circle at 40% 60%, rgba(186,85,211,0.7), rgba(138,43,226,0.5));
    border: 2px solid rgba(138,43,226,0.7);
    border-radius: 50px;
    box-shadow: 0 8px 16px rgba(138,43,226,0.4), inset 0 2px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-46 {
    background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.9), rgba(220,220,220,0.7));
    border: 2px solid rgba(192,192,192,0.8);
    border-radius: 42px;
    box-shadow: 0 6px 12px rgba(192,192,192,0.3), inset 0 2px 0 rgba(255,255,255,1);
}

.fancy-header-pro.style-47 {
    background: radial-gradient(circle at 25% 75%, rgba(255,99,71,0.7), rgba(220,20,60,0.5));
    border: 2px solid rgba(220,20,60,0.7);
    border-radius: 38px;
    box-shadow: 0 7px 14px rgba(220,20,60,0.4), inset 0 2px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-48 {
    background: radial-gradient(circle at 75% 25%, rgba(30,144,255,0.7), rgba(0,0,255,0.5));
    border: 2px solid rgba(0,0,255,0.7);
    border-radius: 48px;
    box-shadow: 0 8px 16px rgba(0,0,255,0.4), inset 0 2px 0 rgba(255,255,255,0.8);
}

.fancy-header-pro.style-49 {
    background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.8), rgba(255,255,0,0.6));
    border: 2px solid rgba(255,215,0,0.8);
    border-radius: 44px;
    box-shadow: 0 6px 12px rgba(255,215,0,0.4), inset 0 2px 0 rgba(255,255,255,0.9);
}

.fancy-header-pro.style-50 {
    background: radial-gradient(circle at 35% 65%, rgba(255,20,147,0.7), rgba(255,0,255,0.5));
    border: 2px solid rgba(255,0,255,0.7);
    border-radius: 46px;
    box-shadow: 0 7px 14px rgba(255,0,255,0.4), inset 0 2px 0 rgba(255,255,255,0.8);
}

/* ===== COOL/AWESOME EFFECTS (Styles 51-60) ===== */

.fancy-header-pro.style-51 {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

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

.fancy-header-pro.style-52 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(102,126,234,0.4);
    position: relative;
}

.fancy-header-pro.style-52::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 22px;
    z-index: -1;
    filter: blur(4px);
}

.fancy-header-pro.style-53 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
}

.fancy-header-pro.style-54 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    border-radius: 18px;
    box-shadow: 0 6px 12px rgba(255,154,158,0.4);
    position: relative;
}

.fancy-header-pro.style-54::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.fancy-header-pro.style-55 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border-radius: 22px;
    box-shadow: 0 8px 16px rgba(168,237,234,0.3);
    position: relative;
}

.fancy-header-pro.style-55::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(135deg, #fed6e3 0%, #a8edea 100%);
    border-radius: 12px;
    z-index: -1;
    opacity: 0.3;
}

.fancy-header-pro.style-56 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%);
    color: #4a5568;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(168, 237, 234, 0.3);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-57 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(102,126,234,0.4);
    animation: pulse 2s ease-in-out infinite;
}

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

.fancy-header-pro.style-58 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(240,147,251,0.4);
    position: relative;
}

.fancy-header-pro.style-58::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    border-radius: 23px;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.5;
}

.fancy-header-pro.style-59 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(79,172,254,0.4);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.fancy-header-pro.style-60 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ===== TECH EFFECTS (Styles 61-70) ===== */

.fancy-header-pro.style-61 {
    background: linear-gradient(135deg, #000428 0%, #004e92 100%);
    color: #00ff41;
    border: 1px solid #00ff41;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,255,65,0.3);
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px rgba(0,255,65,0.5);
    position: relative;
}

.fancy-header-pro.style-61::before {
    content: '>';
    position: absolute;
    left: 10px;
    color: #00ff41;
    font-weight: bold;
}

.fancy-header-pro.style-62 {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #ffffff;
    border: 1px solid #4a90e2;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(74,144,226,0.4);
    position: relative;
}

.fancy-header-pro.style-62::after {
    content: '[CODE]';
    position: absolute;
    top: -8px;
    right: 10px;
    background: #4a90e2;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}

.fancy-header-pro.style-63 {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
    color: #50fa7b;
    border: 1px solid #6272a4;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(98,114,164,0.3);
    font-family: 'Fira Code', monospace;
    text-shadow: 0 0 5px rgba(80,250,123,0.5);
}

.fancy-header-pro.style-64 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: 1px solid #5a67d8;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(90,103,216,0.4);
    position: relative;
}

.fancy-header-pro.style-64::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px;
    width: 8px;
    height: 8px;
    background: #48bb78;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(72,187,120,0.3);
}

.fancy-header-pro.style-64::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 30px;
    width: 8px;
    height: 8px;
    background: #ed8936;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(237,137,54,0.3);
}

.fancy-header-pro.style-65 {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: #ffffff;
    border: 1px solid #e53e3e;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(229,62,62,0.4);
    position: relative;
}

.fancy-header-pro.style-65::before {
    content: '⚠';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.fancy-header-pro.style-66 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: 1px solid #4299e1;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(66,153,225,0.4);
    position: relative;
}

.fancy-header-pro.style-66::after {
    content: '∞';
    position: absolute;
    bottom: -10px;
    right: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 24px;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fancy-header-pro.style-67 {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    color: #68d391;
    border: 1px solid #4a5568;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(74,85,104,0.4);
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 8px rgba(104,211,145,0.5);
}

.fancy-header-pro.style-68 {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: #f6ad55;
    border: 1px solid #ed8936;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(237,137,54,0.4);
    position: relative;
}

.fancy-header-pro.style-68::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f6ad55, #ed8936, #dd6b20);
}

.fancy-header-pro.style-69 {
    background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%);
    color: #ffffff;
    border: 1px solid #2c5282;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(44,82,130,0.4);
    position: relative;
}

.fancy-header-pro.style-69::after {
    content: 'β';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e53e3e;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.fancy-header-pro.style-70 {
    background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
    color: #ffffff;
    border: 1px solid #2f855a;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(47,133,90,0.4);
    position: relative;
}

.fancy-header-pro.style-70::before {
    content: '✓';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #c6f6d5;
    font-size: 18px;
    font-weight: bold;
}

/* ===== BUSINESS/CORPORATE EFFECTS (Styles 71-80) ===== */

.fancy-header-pro.style-71 {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    color: #2d3748;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.fancy-header-pro.style-72 {
    background: linear-gradient(135deg, #4299e1 0%, #667eea 50%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(66,153,225,0.3);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


.fancy-header-pro.style-73 {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #f7931e 100%);
    color: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fancy-header-pro.style-74 {
    background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%);
    color: #0f172a;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(148,163,184,0.1);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    position: relative;
}

.fancy-header-pro.style-74::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #4299e1, #667eea, #9f7aea);
    border-radius: 0 0 8px 8px;
}

.fancy-header-pro.style-75 {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: #1e293b;
    border: 2px solid #64748b;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(100,116,139,0.15);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-align: center;
}

.fancy-header-pro.style-76 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #374151;
    border: 1px solid #9ca3af;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(156,163,175,0.1);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    position: relative;
}

.fancy-header-pro.style-76::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.1;
}

.fancy-header-pro.style-77 {
    background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%);
    color: #111827;
    border: 1px solid #6b7280;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(107,114,128,0.1);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fancy-header-pro.style-78 {
    background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%);
    color: #1f2937;
    border: 2px solid #374151;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(55,65,81,0.1);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    position: relative;
}

.fancy-header-pro.style-78::after {
    content: '★';
    position: absolute;
    top: -8px;
    right: -8px;
    color: #fbbf24;
    font-size: 16px;
    text-shadow: 0 0 4px rgba(251,191,36,0.5);
}

.fancy-header-pro.style-79 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: white;
    border-radius: 14px;
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.3);
    font-family: 'PT Sans', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-80 {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #7f1d1d 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ===== FLOWER EFFECTS (Styles 81-90) ===== */

/* ===== ELEGANT GRADIENTS (Styles 81-92) ===== */

.fancy-header-pro.style-81 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-82 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.3);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-83 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-84 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(67, 233, 123, 0.3);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-85 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(250, 112, 154, 0.3);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-86 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%);
    color: #2d3748;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(168, 237, 234, 0.3);
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-87 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #4a5568;
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(255, 236, 210, 0.3);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-88 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-89 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.3);
    font-family: 'PT Sans', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-90 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-91 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(250, 112, 154, 0.3);
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-92 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%);
    color: #2d3748;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(168, 237, 234, 0.3);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-93 {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    color: #6b21a8;
    border: 2px solid #a855f7;
    border-radius: 22px;
    box-shadow: 0 8px 16px rgba(168,85,247,0.2);
    font-family: 'Pacifico', cursive;
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(107,33,168,0.3);
}

.fancy-header-pro.style-94 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #4a5568;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(255, 236, 210, 0.3);
    font-family: 'Comfortaa', sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-95 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-96 {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0c4a6e;
    border: 2px solid #0ea5e9;
    border-radius: 26px;
    box-shadow: 0 9px 18px rgba(14,165,233,0.2);
    font-family: 'Satisfy', cursive;
    font-size: 1.3em;
    text-shadow: 0 1px 2px rgba(12,74,110,0.3);
}

.fancy-header-pro.style-97 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.3);
    font-family: 'Maven Pro', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-98 {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #be185d;
    border: 2px solid #ec4899;
    border-radius: 18px;
    box-shadow: 0 6px 12px rgba(236,72,153,0.2);
    font-family: 'Amatic SC', cursive;
    font-size: 1.6em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(190,24,93,0.3);
}

.fancy-header-pro.style-99 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-100 {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 2px solid #3b82f6;
    border-radius: 27px;
    box-shadow: 0 9px 18px rgba(59,130,246,0.2);
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.4em;
    text-shadow: 0 1px 2px rgba(30,64,175,0.3);
}

/* ===== MASCULINE EFFECTS (Styles 101-110) ===== */

.fancy-header-pro.style-101 {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: #f7fafc;
    border: 3px solid #4a5568;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(74,85,104,0.4);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.fancy-header-pro.style-102 {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    color: #ffffff;
    border: 2px solid #718096;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(113,128,150,0.3);
    font-family: 'Bebas Neue', cursive;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    position: relative;
}

.fancy-header-pro.style-102::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4299e1, #667eea);
}

.fancy-header-pro.style-103 {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #f9fafb;
    border: 3px solid #6b7280;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(107,114,128,0.4);
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.fancy-header-pro.style-104 {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: #ffffff;
    border: 2px solid #374151;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(55,65,81,0.5);
    font-family: 'Impact', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    position: relative;
}

.fancy-header-pro.style-104::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.fancy-header-pro.style-105 {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f1f5f9;
    border: 3px solid #475569;
    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(71,85,105,0.5);
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

.fancy-header-pro.style-106 {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #ffffff;
    border: 2px solid #6b7280;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(107,114,128,0.4);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    position: relative;
}

.fancy-header-pro.style-106::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #ef4444, #f97316, #eab308);
    border-radius: 14px;
    z-index: -1;
}

.fancy-header-pro.style-107 {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #f8fafc;
    border: 3px solid #64748b;
    border-radius: 18px;
    box-shadow: 0 10px 20px rgba(100,116,139,0.4);
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.fancy-header-pro.style-108 {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border: 2px solid #334155;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(51,65,85,0.6);
    font-family: 'Black Ops One', cursive;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    position: relative;
}

.fancy-header-pro.style-108::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px rgba(239,68,68,0.3);
}

.fancy-header-pro.style-109 {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #f9fafb;
    border: 3px solid #6b7280;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(107,114,128,0.4);
    font-family: 'Bangers', cursive;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.fancy-header-pro.style-110 {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #ffffff;
    border: 2px solid #4b5563;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(75,85,99,0.5);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    position: relative;
}

.fancy-header-pro.style-110::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #ef4444, #f97316, #eab308, #22c55e);
    border-radius: 16px 0 0 16px;
}

/* ===== MIXED VARIETY (Styles 111-120) ===== */

.fancy-header-pro.style-111 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(250, 112, 154, 0.3);
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-112 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%);
    color: #2d3748;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(168, 237, 234, 0.3);
    font-family: 'Cabin', sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.fancy-header-pro.style-113 {
    background: radial-gradient(circle at 50% 50%, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #ffeaa7 100%);
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    position: relative;
}

.fancy-header-pro.style-113::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
    border-radius: 28px;
    z-index: -1;
    filter: blur(6px);
}

.fancy-header-pro.style-114 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #ffecd2 100%);
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(102,126,234,0.3);
    animation: color-wave 4s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes color-wave {
    0%, 100% { filter: hue-rotate(0deg); }
    25% { filter: hue-rotate(90deg); }
    50% { filter: hue-rotate(180deg); }
    75% { filter: hue-rotate(270deg); }
}

.fancy-header-pro.style-115 {
    background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #4ecdc4 10px, #4ecdc4 20px);
    border-radius: 18px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    position: relative;
}

.fancy-header-pro.style-115::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    border-radius: 18px;
}

.fancy-header-pro.style-116 {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #ffffff;
    border: 2px solid #4a90e2;
    border-radius: 22px;
    box-shadow: 0 10px 20px rgba(30,60,114,0.4);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.fancy-header-pro.style-116::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px;
    width: 12px;
    height: 12px;
    background: #00ff41;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,65,0.8);
}

.fancy-header-pro.style-117 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    border-radius: 16px;
    box-shadow: 0 6px 12px rgba(255,236,210,0.3);
    position: relative;
    overflow: hidden;
}

.fancy-header-pro.style-117::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: light-sweep 4s linear infinite;
}

@keyframes light-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fancy-header-pro.style-118 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fancy-header-pro.style-119 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(255,154,158,0.3);
    position: relative;
    animation: heartbeat 1.5s ease-in-out infinite;
}

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

.fancy-header-pro.style-120 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 30px;
    box-shadow: 0 14px 28px rgba(102,126,234,0.4);
    position: relative;
    overflow: hidden;
}

.fancy-header-pro.style-120::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Full width styles */
.fancy-header-pro.full-width {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===========================================
   ANIMATION EFFECTS
   =========================================== */

/* Base animation setup */
.fancy-header-pro[class*="animate-"] {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* Fade Effects */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation-name: fadeIn;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-up {
    animation-name: fadeInUp;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-down {
    animation-name: fadeInDown;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-left {
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-right {
    animation-name: fadeInRight;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.animate-fade-out {
    animation-name: fadeOut;
}

/* Slide Effects */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animate-slide-in-up {
    animation-name: slideInUp;
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animate-slide-in-down {
    animation-name: slideInDown;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animate-slide-in-left {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animate-slide-in-right {
    animation-name: slideInRight;
}

/* Bounce Effects */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.animate-bounce-in {
    animation-name: bounceIn;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}
.animate-bounce {
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Rotate Effects */
@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
}
.animate-rotate-in {
    animation-name: rotateIn;
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) scale3d(1, 1, 1);
        animation-timing-function: ease-in;
    }
}
.animate-flip {
    animation-name: flip;
    backface-visibility: visible;
}

/* Scale Effects */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
.animate-scale-in {
    animation-name: scaleIn;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
.animate-zoom-in {
    animation-name: zoomIn;
}

/* Special Effects */
@keyframes pulse {
    0% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.animate-pulse {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}
.animate-shake {
    animation-name: shake;
}

@keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.animate-tada {
    animation-name: tada;
}

@keyframes wobble {
    0% {
        transform: translate3d(0, 0, 0);
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
.animate-wobble {
    animation-name: wobble;
}

@keyframes jello {
    0%, 11.1%, 100% {
        transform: translate3d(0, 0, 0);
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}
.animate-jello {
    animation-name: jello;
    transform-origin: center;
}

@keyframes rubberBand {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.animate-rubber-band {
    animation-name: rubberBand;
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
.animate-swing {
    animation-name: swing;
    transform-origin: top center;
}

@keyframes headShake {
    0% {
        transform: translateX(0);
    }
    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        transform: translateX(0);
    }
}
.animate-head-shake {
    animation-name: headShake;
    animation-timing-function: ease-in-out;
}

/* Text Effects */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}
.animate-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2s steps(40, end);
}

@keyframes rainbow {
    0% { color: #ff0000; }
    16.66% { color: #ff8000; }
    33.33% { color: #ffff00; }
    50% { color: #00ff00; }
    66.66% { color: #0080ff; }
    83.33% { color: #8000ff; }
    100% { color: #ff0000; }
}
.animate-rainbow {
    animation: rainbow 3s linear infinite;
}

@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    }
    50% {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
}
.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes shadowPulse {
    0%, 100% {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    50% {
        text-shadow: 4px 4px 8px rgba(0,0,0,0.6);
    }
}
.animate-shadow-pulse {
    animation: shadowPulse 2s ease-in-out infinite alternate;
}

@keyframes neon {
    0%, 100% {
        text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px currentColor;
    }
}
.animate-neon {
    animation: neon 1.5s ease-in-out infinite alternate;
}

/* Enhanced Background Effects */
.animate-fire-bg {
    background: linear-gradient(45deg, #ff4500, #ff6b35);
    animation: fireSmooth 3s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes fireSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ff4500, #ff6b35);
        box-shadow: 0 0 20px rgba(255,69,0,0.6), inset 0 0 25px rgba(255,69,0,0.3);
    }
    25% {
        background: linear-gradient(45deg, #ff6b35, #ff8c00);
        box-shadow: 0 0 25px rgba(255,107,53,0.7), inset 0 0 30px rgba(255,107,53,0.4);
    }
    50% {
        background: linear-gradient(45deg, #ff8c00, #ff4757);
        box-shadow: 0 0 30px rgba(255,140,0,0.8), inset 0 0 35px rgba(255,140,0,0.5);
    }
    75% {
        background: linear-gradient(45deg, #ff4757, #ff6b35);
        box-shadow: 0 0 25px rgba(255,71,87,0.7), inset 0 0 30px rgba(255,71,87,0.4);
    }
}

.animate-ice-bg {
    background: linear-gradient(45deg, #00d4ff, #74b9ff);
    animation: iceSmooth 3.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes iceSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #00d4ff, #74b9ff);
        box-shadow: 0 0 20px rgba(0,212,255,0.6), inset 0 0 25px rgba(0,212,255,0.3);
    }
    25% {
        background: linear-gradient(45deg, #74b9ff, #0984e3);
        box-shadow: 0 0 25px rgba(116,185,255,0.7), inset 0 0 30px rgba(116,185,255,0.4);
    }
    50% {
        background: linear-gradient(45deg, #0984e3, #00cec9);
        box-shadow: 0 0 30px rgba(9,132,227,0.8), inset 0 0 35px rgba(9,132,227,0.5);
    }
    75% {
        background: linear-gradient(45deg, #00cec9, #a29bfe);
        box-shadow: 0 0 25px rgba(0,206,201,0.7), inset 0 0 30px rgba(0,206,201,0.4);
    }
}

.animate-electric-bg {
    background: linear-gradient(45deg, #ffd700, #fd79a8);
    animation: electricSmooth 2.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes electricSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ffd700, #fd79a8);
        box-shadow: 0 0 20px rgba(255,215,0,0.6), inset 0 0 25px rgba(255,215,0,0.3);
    }
    20% {
        background: linear-gradient(45deg, #fd79a8, #fdcb6e);
        box-shadow: 0 0 25px rgba(253,121,168,0.7), inset 0 0 30px rgba(253,121,168,0.4);
    }
    40% {
        background: linear-gradient(45deg, #fdcb6e, #e17055);
        box-shadow: 0 0 30px rgba(253,203,110,0.8), inset 0 0 35px rgba(253,203,110,0.5);
    }
    60% {
        background: linear-gradient(45deg, #e17055, #00cec9);
        box-shadow: 0 0 25px rgba(225,112,85,0.7), inset 0 0 30px rgba(225,112,85,0.4);
    }
    80% {
        background: linear-gradient(45deg, #00cec9, #a29bfe);
        box-shadow: 0 0 22px rgba(0,206,201,0.6), inset 0 0 28px rgba(0,206,201,0.3);
    }
}

.animate-matrix-bg {
    background: linear-gradient(45deg, #000000, #001100, #000000);
    background-size: 400% 400%;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    animation: matrixBg 2s ease-in-out infinite alternate;
    text-shadow: 0 0 5px #00ff00;
}

@keyframes matrixBg {
    0% {
        background-position: 0% 50%;
        box-shadow: inset 0 0 20px rgba(0,255,0,0.3);
    }
    100% {
        background-position: 100% 50%;
        box-shadow: inset 0 0 40px rgba(0,255,0,0.6);
    }
}

/* 20 New Background Animation Effects */

/* Wave Effects */
.animate-ocean-wave {
    background: linear-gradient(45deg, #1e3c72, #2a5298, #3a7bd5, #00d4ff);
    background-size: 400% 400%;
    animation: oceanWave 6s ease-in-out infinite;
    color: white;
    position: relative;
}

@keyframes oceanWave {
    0%, 100% {
        background-position: 0% 50%;
        transform: translateX(0);
    }
    25% {
        background-position: 100% 50%;
        transform: translateX(-5px);
    }
    50% {
        background-position: 50% 100%;
        transform: translateX(5px);
    }
    75% {
        background-position: 100% 0%;
        transform: translateX(-5px);
    }
}

.animate-sunset-wave {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    animation: sunsetSmooth 4s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes sunsetSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ff6b35, #f7931e);
        box-shadow: 0 0 20px rgba(255,107,53,0.6), inset 0 0 25px rgba(255,107,53,0.3);
    }
    25% {
        background: linear-gradient(45deg, #f7931e, #ffb142);
        box-shadow: 0 0 25px rgba(247,147,30,0.7), inset 0 0 30px rgba(247,147,30,0.4);
    }
    50% {
        background: linear-gradient(45deg, #ffb142, #ff8c00);
        box-shadow: 0 0 30px rgba(255,177,66,0.8), inset 0 0 35px rgba(255,177,66,0.5);
    }
    75% {
        background: linear-gradient(45deg, #ff8c00, #ff6b35);
        box-shadow: 0 0 25px rgba(255,140,0,0.7), inset 0 0 30px rgba(255,140,0,0.4);
    }
}

/* Mystic Effects */
.animate-starry-night {
    background: linear-gradient(45deg, #4c1d95, #7c3aed);
    animation: mysticSmooth 4.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes mysticSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #4c1d95, #7c3aed);
        box-shadow: 0 0 20px rgba(76,29,149,0.6), inset 0 0 25px rgba(76,29,149,0.3);
    }
    25% {
        background: linear-gradient(45deg, #7c3aed, #1e1b4b);
        box-shadow: 0 0 25px rgba(124,58,237,0.7), inset 0 0 30px rgba(124,58,237,0.4);
    }
    50% {
        background: linear-gradient(45deg, #1e1b4b, #312e81);
        box-shadow: 0 0 30px rgba(30,27,75,0.8), inset 0 0 35px rgba(30,27,75,0.5);
    }
    75% {
        background: linear-gradient(45deg, #312e81, #4c1d95);
        box-shadow: 0 0 25px rgba(49,46,129,0.7), inset 0 0 30px rgba(49,46,129,0.4);
    }
}

.animate-galaxy {
    background: linear-gradient(45deg, #667eea, #764ba2);
    animation: galaxySmooth 3.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes galaxySmooth {
    0%, 100% {
        background: linear-gradient(45deg, #667eea, #764ba2);
        box-shadow: 0 0 20px rgba(102,126,234,0.6), inset 0 0 25px rgba(102,126,234,0.3);
    }
    25% {
        background: linear-gradient(45deg, #764ba2, #f093fb);
        box-shadow: 0 0 25px rgba(118,75,162,0.7), inset 0 0 30px rgba(118,75,162,0.4);
    }
    50% {
        background: linear-gradient(45deg, #f093fb, #f5576c);
        box-shadow: 0 0 30px rgba(240,147,251,0.8), inset 0 0 35px rgba(240,147,251,0.5);
    }
    75% {
        background: linear-gradient(45deg, #f5576c, #667eea);
        box-shadow: 0 0 25px rgba(245,87,108,0.7), inset 0 0 30px rgba(245,87,108,0.4);
    }
}

/* Aurora Effects */
.animate-aurora {
    background: linear-gradient(45deg, #48dbfb, #0abde3);
    animation: auroraSmooth 3.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes auroraSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #48dbfb, #0abde3);
        box-shadow: 0 0 20px rgba(72,219,251,0.6), inset 0 0 25px rgba(72,219,251,0.3);
    }
    25% {
        background: linear-gradient(45deg, #0abde3, #00ff88);
        box-shadow: 0 0 25px rgba(10,189,227,0.7), inset 0 0 30px rgba(10,189,227,0.4);
    }
    50% {
        background: linear-gradient(45deg, #00ff88, #54a0ff);
        box-shadow: 0 0 30px rgba(0,255,136,0.8), inset 0 0 35px rgba(0,255,136,0.5);
    }
    75% {
        background: linear-gradient(45deg, #54a0ff, #48dbfb);
        box-shadow: 0 0 25px rgba(84,160,255,0.7), inset 0 0 30px rgba(84,160,255,0.4);
    }
}

.animate-polar-lights {
    background: linear-gradient(45deg, #667eea, #764ba2);
    animation: polarSmooth 4s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes polarSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #667eea, #764ba2);
        box-shadow: 0 0 20px rgba(102,126,234,0.6), inset 0 0 25px rgba(102,126,234,0.3);
    }
    25% {
        background: linear-gradient(45deg, #764ba2, #4facfe);
        box-shadow: 0 0 25px rgba(118,75,162,0.7), inset 0 0 30px rgba(118,75,162,0.4);
    }
    50% {
        background: linear-gradient(45deg, #4facfe, #00d4ff);
        box-shadow: 0 0 30px rgba(79,172,254,0.8), inset 0 0 35px rgba(79,172,254,0.5);
    }
    75% {
        background: linear-gradient(45deg, #00d4ff, #667eea);
        box-shadow: 0 0 25px rgba(0,212,255,0.7), inset 0 0 30px rgba(0,212,255,0.4);
    }
}

/* Prism Effects */
.animate-prism {
    background: linear-gradient(45deg, #ff0000, #ffff00);
    animation: prismSmooth 3s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes prismSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ff0000, #ffff00);
        box-shadow: 0 0 20px rgba(255,0,0,0.6), inset 0 0 25px rgba(255,0,0,0.3);
    }
    25% {
        background: linear-gradient(45deg, #ffff00, #00ff00);
        box-shadow: 0 0 25px rgba(255,255,0,0.7), inset 0 0 30px rgba(255,255,0,0.4);
    }
    50% {
        background: linear-gradient(45deg, #00ff00, #0000ff);
        box-shadow: 0 0 30px rgba(0,255,0,0.8), inset 0 0 35px rgba(0,255,0,0.5);
    }
    75% {
        background: linear-gradient(45deg, #0000ff, #8000ff);
        box-shadow: 0 0 25px rgba(0,0,255,0.7), inset 0 0 30px rgba(0,0,255,0.4);
    }
}

.animate-rainbow-flow {
    background: linear-gradient(45deg, #ff0000, #ffff00);
    animation: rainbowSmooth 3.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes rainbowSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ff0000, #ffff00);
        box-shadow: 0 0 20px rgba(255,0,0,0.6), inset 0 0 25px rgba(255,0,0,0.3);
    }
    16.67% {
        background: linear-gradient(45deg, #ffff00, #00ff00);
        box-shadow: 0 0 22px rgba(255,255,0,0.65), inset 0 0 27px rgba(255,255,0,0.35);
    }
    33.33% {
        background: linear-gradient(45deg, #00ff00, #0000ff);
        box-shadow: 0 0 24px rgba(0,255,0,0.7), inset 0 0 29px rgba(0,255,0,0.4);
    }
    50% {
        background: linear-gradient(45deg, #0000ff, #9400d3);
        box-shadow: 0 0 26px rgba(0,0,255,0.75), inset 0 0 31px rgba(0,0,255,0.45);
    }
    66.67% {
        background: linear-gradient(45deg, #9400d3, #ff69b4);
        box-shadow: 0 0 24px rgba(148,0,211,0.7), inset 0 0 29px rgba(148,0,211,0.4);
    }
    83.33% {
        background: linear-gradient(45deg, #ff69b4, #ff0000);
        box-shadow: 0 0 22px rgba(255,105,180,0.65), inset 0 0 27px rgba(255,105,180,0.35);
    }
}

/* Liquid Effects */
.animate-liquid-gold {
    background: linear-gradient(45deg,
        #ffd700, #ffed4e, #ffb142, #ff8c00, #ffd700, #daa520);
    background-size: 400% 400%;
    animation: moltenMetal 8s ease-in-out infinite;
    color: #333;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

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

.animate-mercury {
    background: linear-gradient(45deg, #c0c0c0, #a8a8a8, #c0c0c0, #808080);
    background-size: 400% 400%;
    animation: mercury 5s ease-in-out infinite;
    color: #333;
}

@keyframes mercury {
    0%, 100% {
        background-position: 0% 50%;
        transform: scaleY(1);
    }
    50% {
        background-position: 100% 50%;
        transform: scaleY(1.1);
    }
}

/* Crystal Effects */
.animate-crystal {
    background: linear-gradient(45deg,
        rgba(255,255,255,0.1), rgba(255,255,255,0.3),
        rgba(255,255,255,0.1), rgba(255,255,255,0.5));
    background-size: 200% 200%;
    animation: crystal 4s ease-in-out infinite;
    color: #333;
    position: relative;
}

.animate-crystal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: crystalShine 3s ease-in-out infinite;
}

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

@keyframes crystalShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Energy Effects */
.animate-plasma {
    background: linear-gradient(45deg, #ff0080, #ffff00);
    animation: plasmaSmooth 3s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes plasmaSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #ff0080, #ffff00);
        box-shadow: 0 0 20px rgba(255,0,128,0.6), inset 0 0 25px rgba(255,0,128,0.3);
    }
    25% {
        background: linear-gradient(45deg, #ffff00, #00ff00);
        box-shadow: 0 0 25px rgba(255,255,0,0.7), inset 0 0 30px rgba(255,255,0,0.4);
    }
    50% {
        background: linear-gradient(45deg, #00ff00, #00ffff);
        box-shadow: 0 0 30px rgba(0,255,0,0.8), inset 0 0 35px rgba(0,255,0,0.5);
    }
    75% {
        background: linear-gradient(45deg, #00ffff, #8000ff);
        box-shadow: 0 0 25px rgba(0,255,255,0.7), inset 0 0 30px rgba(0,255,255,0.4);
    }
}

.animate-nebula {
    background: linear-gradient(45deg, #667eea, #764ba2);
    animation: nebulaSmooth 4.5s ease-in-out infinite;
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes nebulaSmooth {
    0%, 100% {
        background: linear-gradient(45deg, #667eea, #764ba2);
        box-shadow: 0 0 20px rgba(102,126,234,0.6), inset 0 0 25px rgba(102,126,234,0.3);
    }
    25% {
        background: linear-gradient(45deg, #764ba2, #f093fb);
        box-shadow: 0 0 25px rgba(118,75,162,0.7), inset 0 0 30px rgba(118,75,162,0.4);
    }
    50% {
        background: linear-gradient(45deg, #f093fb, #f5576c);
        box-shadow: 0 0 30px rgba(240,147,251,0.8), inset 0 0 35px rgba(240,147,251,0.5);
    }
    75% {
        background: linear-gradient(45deg, #f5576c, #4facfe);
        box-shadow: 0 0 25px rgba(245,87,108,0.7), inset 0 0 30px rgba(245,87,108,0.4);
    }
}

/* ===== ADDITIONAL LIQUID & CRYSTAL EFFECTS ===== */

/* Liquid Silver - Metallic flowing with shimmer */
.animate-liquid-silver {
    background: linear-gradient(45deg, #c0c0c0, #ffffff, #a8a8a8);
    animation: liquidSilver 4s ease-in-out infinite;
    color: #333;
    position: relative;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

.animate-liquid-silver::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: silverShimmer 4s ease-in-out infinite;
}

@keyframes liquidSilver {
    0%, 100% {
        background: linear-gradient(45deg, #c0c0c0, #ffffff, #a8a8a8);
        transform: scale(1);
    }
    50% {
        background: linear-gradient(45deg, #e8e8e8, #c0c0c0, #d3d3d3);
        transform: scale(1.02);
    }
}

@keyframes silverShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Liquid Copper - Spinning molten metal */
.animate-liquid-copper {
    background: linear-gradient(45deg, #b87333, #cd7f32, #daa520);
    animation: liquidCopper 3s linear infinite;
    color: #fff;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(184, 115, 51, 0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes liquidCopper {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.05); }
    50% { transform: rotate(180deg) scale(1.1); }
    75% { transform: rotate(270deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Liquid Platinum - Floating bubbles */
.animate-liquid-platinum {
    background: linear-gradient(45deg, #e5e4e2, #f5f5f0);
    animation: liquidPlatinum 6s ease-in-out infinite;
    color: #333;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(229, 228, 226, 0.4);
}

.animate-liquid-platinum::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: platinumBubbles 6s ease-in-out infinite;
}

@keyframes liquidPlatinum {
    0%, 100% {
        background: linear-gradient(45deg, #e5e4e2, #f5f5f0);
        filter: brightness(1);
    }
    50% {
        background: linear-gradient(45deg, #f8f8ff, #d3d3d3);
        filter: brightness(1.1);
    }
}

@keyframes platinumBubbles {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(10px, -10px) rotate(120deg); }
    66% { transform: translate(-10px, 10px) rotate(240deg); }
}

/* Crystal Diamond - Prism light refraction */
.animate-crystal-diamond {
    background: linear-gradient(45deg, #ffffff, #e6f3ff, #b3d9ff);
    animation: crystalDiamond 3s ease-in-out infinite;
    color: #2c3e50;
    position: relative;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 25px rgba(179, 217, 255, 0.6);
}

.animate-crystal-diamond::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        transparent 0%, rgba(255,0,150,0.3) 25%,
        rgba(0,150,255,0.3) 50%, rgba(150,255,0,0.3) 75%, transparent 100%);
    animation: prismLight 3s ease-in-out infinite;
}

@keyframes crystalDiamond {
    0%, 100% {
        background: linear-gradient(45deg, #ffffff, #e6f3ff, #b3d9ff);
        transform: rotate(0deg);
    }
    50% {
        background: linear-gradient(45deg, #e6f3ff, #ffffff, #80c1ff);
        transform: rotate(1deg);
    }
}

@keyframes prismLight {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Crystal Ruby - Pulsing internal glow */
.animate-crystal-ruby {
    background: linear-gradient(45deg, #8b0000, #dc143c, #ff0000);
    animation: crystalRuby 2s ease-in-out infinite alternate;
    color: #fff;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(220, 20, 60, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-ruby::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,100,100,0.6) 50%, transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: rubyCore 2s ease-in-out infinite alternate;
}

@keyframes crystalRuby {
    0% {
        background: linear-gradient(45deg, #8b0000, #dc143c, #ff0000);
        box-shadow: 0 0 20px rgba(220, 20, 60, 0.5);
    }
    100% {
        background: linear-gradient(45deg, #dc143c, #ff0000, #ff4500);
        box-shadow: 0 0 35px rgba(255, 0, 0, 0.8);
    }
}

@keyframes rubyCore {
    0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

/* Liquid Bronze - Metallic wave sheen */
.animate-liquid-bronze {
    background: linear-gradient(45deg, #cd7f32, #daa520, #b87333);
    animation: liquidBronze 4s ease-in-out infinite;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(205, 127, 50, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-liquid-bronze::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6), transparent);
    animation: bronzeWave 4s ease-in-out infinite;
}

@keyframes liquidBronze {
    0%, 100% { background: linear-gradient(45deg, #cd7f32, #daa520, #b87333); }
    50% { background: linear-gradient(45deg, #daa520, #b87333, #a0522d); }
}

@keyframes bronzeWave {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Crystal Sapphire - Rippling water effect */
.animate-crystal-sapphire {
    background: linear-gradient(45deg, #0066cc, #0099ff, #00ccff);
    animation: crystalSapphire 5s ease-in-out infinite;
    color: #fff;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0, 102, 204, 0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-sapphire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.3), transparent);
    animation: sapphireRipple 5s ease-in-out infinite;
}

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

@keyframes sapphireRipple {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1) translateY(-5px); }
}

/* Liquid Titanium - Geometric metallic patterns */
.animate-liquid-titanium {
    background: linear-gradient(45deg, #878681, #a8a8a8, #6d6d6d);
    background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px;
    animation: liquidTitanium 6s ease-in-out infinite;
    color: #fff;
    position: relative;
    border: 1px solid rgba(168, 168, 168, 0.3);
    box-shadow: 0 0 20px rgba(135, 134, 129, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes liquidTitanium {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    50% { transform: rotate(2deg); }
    75% { transform: rotate(1deg); }
}

/* Crystal Emerald - Floating particles */
.animate-crystal-emerald {
    background: linear-gradient(45deg, #006400, #228b22, #32cd32);
    animation: crystalEmerald 4s ease-in-out infinite;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 22px rgba(0, 100, 0, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-emerald::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 2px, transparent 2px),
        radial-gradient(circle at 70% 20%, rgba(255,255,255,0.4) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.5) 1.5px, transparent 1.5px);
    animation: emeraldParticles 4s ease-in-out infinite;
}

@keyframes crystalEmerald {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

@keyframes emeraldParticles {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(120deg); }
    66% { transform: translateY(5px) rotate(240deg); }
}

/* Liquid Steel - Industrial vibration */
.animate-liquid-steel {
    background: linear-gradient(45deg, #43464b, #71797e, #2c2f33);
    animation: liquidSteel 2s ease-in-out infinite alternate;
    color: #fff;
    position: relative;
    border: 2px solid #5d6d7e;
    box-shadow: 0 0 18px rgba(67, 70, 75, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

@keyframes liquidSteel {
    0% { transform: translateX(0px); }
    100% { transform: translateX(2px); }
}

/* Crystal Amethyst - Swirling purple vortex */
.animate-crystal-amethyst {
    background: conic-gradient(from 0deg, #9932cc, #8a2be2, #ba55d3, #9932cc);
    animation: crystalAmethyst 8s linear infinite;
    color: #fff;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(153, 51, 204, 0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes crystalAmethyst {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Liquid Chrome - Mirror reflection effect */
.animate-liquid-chrome {
    background: linear-gradient(45deg, #c0c0c0, #ffffff, #808080);
    position: relative;
    color: #333;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

.animate-liquid-chrome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(255,255,255,0.8) 0%, rgba(192,192,192,0.4) 25%,
        rgba(128,128,128,0.6) 50%, rgba(232,232,232,0.3) 75%, rgba(255,255,255,0.8) 100%);
    animation: chromeReflect 5s ease-in-out infinite;
}

@keyframes chromeReflect {
    0%, 100% { transform: translateX(-50%) skewX(-15deg); opacity: 0.6; }
    50% { transform: translateX(50%) skewX(15deg); opacity: 0.9; }
}

/* Crystal Quartz - Rainbow edge refraction */
.animate-crystal-quartz {
    background: linear-gradient(45deg, #ffffff, #e0ffff);
    animation: crystalQuartz 6s ease-in-out infinite;
    color: #2c3e50;
    position: relative;
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff) 1;
    box-shadow: 0 0 18px rgba(173, 216, 230, 0.4);
}

@keyframes crystalQuartz {
    0%, 100% { transform: rotate(0deg); }
    33% { transform: rotate(120deg); }
    66% { transform: rotate(240deg); }
}

/* Liquid Nickel - Rolling metallic waves */
.animate-liquid-nickel {
    background: linear-gradient(45deg, #727472, #a8a8a8);
    animation: liquidNickel 4s ease-in-out infinite;
    color: #fff;
    position: relative;
    border-radius: 0 50px 0 50px;
    box-shadow: 0 0 18px rgba(114, 116, 114, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.animate-liquid-nickel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(168,168,168,0.8), transparent);
    animation: nickelWave 4s ease-in-out infinite;
}

@keyframes liquidNickel {
    0%, 100% { border-radius: 0 50px 0 50px; }
    50% { border-radius: 50px 0 50px 0; }
}

@keyframes nickelWave {
    0%, 100% { left: -50%; }
    50% { left: 100%; }
}

/* Crystal Topaz - Golden light beams */
.animate-crystal-topaz {
    background: linear-gradient(45deg, #ffc800, #ffd700, #ffed4e);
    animation: crystalTopaz 3s ease-in-out infinite;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-topaz::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.8) 10deg, transparent 20deg);
    animation: topazBeams 3s linear infinite;
}

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

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

/* Liquid Zinc - Clean metallic ripples */
.animate-liquid-zinc {
    background: radial-gradient(circle at 30% 30%, #ffffff, #f0f0f0, #d3d3d3);
    animation: liquidZinc 5s ease-in-out infinite;
    color: #333;
    position: relative;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 16px rgba(240, 240, 240, 0.4);
}

@keyframes liquidZinc {
    0%, 100% { background: radial-gradient(circle at 30% 30%, #ffffff, #f0f0f0, #d3d3d3); }
    25% { background: radial-gradient(circle at 70% 70%, #ffffff, #f0f0f0, #d3d3d3); }
    50% { background: radial-gradient(circle at 30% 70%, #ffffff, #f0f0f0, #d3d3d3); }
    75% { background: radial-gradient(circle at 70% 30%, #ffffff, #f0f0f0, #d3d3d3); }
}

/* Crystal Opal - Iridescent color shifts */
.animate-crystal-opal {
    background: linear-gradient(45deg, #ffffff, #ffe4e1, #e0ffff);
    animation: crystalOpal 7s ease-in-out infinite;
    color: #2c3e50;
    position: relative;
    border-radius: 18px;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #ff69b4, #9370db, #00ffff, #98fb98) 1;
    box-shadow: 0 0 15px rgba(255, 228, 225, 0.4);
}

@keyframes crystalOpal {
    0%, 100% { filter: hue-rotate(0deg) saturate(1); }
    25% { filter: hue-rotate(90deg) saturate(1.2); }
    50% { filter: hue-rotate(180deg) saturate(1.4); }
    75% { filter: hue-rotate(270deg) saturate(1.2); }
}

/* Liquid Brass - Warm glow effect */
.animate-liquid-brass {
    background: linear-gradient(45deg, #b5a642, #d4af37);
    animation: liquidBrass 4s ease-in-out infinite;
    color: #fff;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 0 22px rgba(181, 166, 66, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-liquid-brass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3), transparent 70%);
    animation: brassGlow 4s ease-in-out infinite;
}

@keyframes liquidBrass {
    0%, 100% { background: linear-gradient(45deg, #b5a642, #d4af37); }
    50% { background: linear-gradient(45deg, #daa520, #8c7853); }
}

@keyframes brassGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Crystal Jade - Smooth wave patterns */
.animate-crystal-jade {
    background: linear-gradient(45deg, #00a86b, #00ced1);
    animation: crystalJade 6s ease-in-out infinite;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 168, 107, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-jade::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: jadeWave 6s ease-in-out infinite;
}

@keyframes crystalJade {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(2deg); }
}

@keyframes jadeWave {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Liquid Iridium - Dark metallic highlights */
.animate-liquid-iridium {
    background: linear-gradient(45deg, #3d3d3d, #696969, #1a1a1a);
    animation: liquidIridium 3s ease-in-out infinite;
    color: #fff;
    position: relative;
    border: 1px solid #808080;
    box-shadow: 0 0 16px rgba(61, 61, 61, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.animate-liquid-iridium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(255,255,255,0.1) 0%, transparent 25%,
        rgba(255,255,255,0.1) 50%, transparent 75%);
    animation: iridiumHighlights 3s ease-in-out infinite;
}

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

@keyframes iridiumHighlights {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Crystal Garnet - Deep sparkle effect */
.animate-crystal-garnet {
    background: linear-gradient(45deg, #730026, #b22234, #8b0000);
    animation: crystalGarnet 4s ease-in-out infinite;
    color: #fff;
    position: relative;
    border-radius: 16px;
    box-shadow: 0 0 18px rgba(115, 0, 38, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.animate-crystal-garnet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.6) 1px, transparent 1px);
    animation: garnetSparkle 4s ease-in-out infinite;
}

@keyframes crystalGarnet {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

@keyframes garnetSparkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Liquid Palladium - Subtle metallic sheen */
.animate-liquid-palladium {
    background: linear-gradient(45deg, #e0e0e0, #f5f5f5, #b8b8b8);
    animation: liquidPalladium 5s ease-in-out infinite;
    color: #333;
    position: relative;
    border: 1px solid #d3d3d3;
    box-shadow: 0 0 15px rgba(224, 224, 224, 0.3);
}

.animate-liquid-palladium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: palladiumSheen 5s ease-in-out infinite;
}

@keyframes liquidPalladium {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

@keyframes palladiumSheen {
    0%, 100% { left: -50%; }
    50% { left: 100%; }
}

/* Final Effects */
.animate-hologram {
    background: linear-gradient(45deg,
        rgba(0,255,255,0.8), rgba(255,0,255,0.8),
        rgba(255,255,0,0.8), rgba(0,255,0,0.8));
    background-size: 400% 400%;
    animation: hologram 4s ease-in-out infinite;
    color: #333;
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
}

.animate-hologram::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent, rgba(255,255,255,0.4), transparent);
    animation: hologramScan 2s linear infinite;
}

@keyframes hologram {
    0%, 100% {
        background-position: 0% 50%;
        border-color: rgba(255,255,255,0.3);
    }
    50% {
        background-position: 100% 50%;
        border-color: rgba(255,255,255,0.8);
    }
}

@keyframes hologramScan {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.animate-quantum {
    background: linear-gradient(45deg,
        #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
    background-size: 500% 500%;
    animation: quantum 7s ease-in-out infinite;
    color: #333;
    position: relative;
}

.animate-quantum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 50%);
    animation: quantumParticle 5s ease-in-out infinite alternate;
}

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

@keyframes quantumParticle {
    0% { transform: scale(0.5) rotate(0deg); opacity: 0.3; }
    100% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fancy-header-pro {
        font-size: 0.9em;
        margin: 15px 0;
    }

    .fancy-header-pro.full-width {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .style-previews-grid {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 8px;
    }

    .quick-style-preview .mini-preview {
        height: 35px;
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .fancy-header-pro {
        font-size: 0.8em;
        margin: 10px 0;
    }
}