/**
 * Amazing Announcements - Frontend Styles
 * 50 Completely Redesigned Styles with Distinct Colors, Textures, and Metallic Effects
 */

/* Base Styles */
.amazing-announcement {
    position: relative;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    text-align: center;
    /* Don't set font-family here - let inline styles from WordPress editor take precedence */
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0;
    border: none;
    outline: none;
    display: block;
    clear: both;
    overflow: hidden;
    isolation: isolate;
}

/* Ensure inline styles always win - they have highest specificity */
.amazing-announcement [style] {
    /* Inline styles automatically have highest specificity */
}

/* Sticky Announcement */
.amazing-announcement.aa-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
}

/* When sticky and below menu, top position will be set by JavaScript */
.amazing-announcement.aa-sticky[data-aa-position="below_menu"] {
    /* Top position will be dynamically set by JavaScript based on menu height */
}

.amazing-announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.amazing-announcement a {
    color: var(--aa-link-color, inherit);
    text-decoration: underline;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.amazing-announcement a:hover {
    opacity: 0.8;
}

.aa-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.3em; /* Maintain minimum height even when empty */
    z-index: 1;
    /* Prevent height changes during animation */
    transition: min-height 0.1s ease-out;
}

.aa-text, .aa-ticker-wrapper {
    flex: 1;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

.aa-text-hidden {
    /* Hide content but maintain container height */
    position: relative;
}

.aa-text-hidden::before {
    /* Invisible placeholder to maintain height */
    content: '\00a0'; /* Non-breaking space */
    display: inline-block;
    visibility: hidden;
    height: 1.3em;
    line-height: 1.3;
}

.aa-text-hidden > *:not(.aa-text-placeholder) {
    /* Hide all direct children except placeholder */
    display: none !important;
}

/* Placeholder to maintain height */
.aa-text-placeholder {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    height: 1.3em;
    line-height: 1.3;
    position: absolute;
    width: 0;
    overflow: hidden;
}

/* Smooth transition when showing content */
.aa-text {
    transition: opacity 0.2s ease-in-out;
}

.aa-fx-segment {
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    /* Don't set font/color here - inline styles from WordPress editor will take precedence automatically */
}

.aa-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    z-index: 2;
}

.aa-close:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) rotate(90deg);
}

/* Ticker Styles */
.aa-ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.aa-ticker-text {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    will-change: transform;
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    position: relative;
}

/* Ticker Animation Keyframes */
@keyframes ticker-scroll-ltr {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-50%); }
}

@keyframes ticker-scroll-rtl {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(100%); }
}

@keyframes ticker-bounce {
    0% { transform: translateX(100%) translateY(0); }
    25% { transform: translateX(-12.5%) translateY(-5px); }
    50% { transform: translateX(-25%) translateY(0); }
    75% { transform: translateX(-37.5%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes ticker-fade {
    0% { transform: translateX(100%); opacity: 0; }
    10% { opacity: 1; }
    50% { opacity: 0.3; }
    90% { opacity: 1; }
    100% { transform: translateX(-50%); opacity: 1; }
}

@keyframes ticker-wave {
    0% { transform: translateX(100%) translateY(0); }
    25% { transform: translateX(-12.5%) translateY(-3px); }
    50% { transform: translateX(-25%) translateY(0); }
    75% { transform: translateX(-37.5%) translateY(3px); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes ticker-elastic {
    0% { transform: translateX(100%) scaleX(1); }
    25% { transform: translateX(-12.5%) scaleX(1.05); }
    50% { transform: translateX(-25%) scaleX(1); }
    75% { transform: translateX(-37.5%) scaleX(0.95); }
    100% { transform: translateX(-50%) scaleX(1); }
}

@keyframes ticker-pulse {
    0% { transform: translateX(100%) scale(1); }
    25% { transform: translateX(-12.5%) scale(1.05); }
    50% { transform: translateX(-25%) scale(1.1); }
    75% { transform: translateX(-37.5%) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
}

@keyframes ticker-slide-fade {
    0% { transform: translateX(100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(-50%); opacity: 0; }
}

@keyframes ticker-marquee-bounce {
    0% { transform: translateX(100%) translateY(0); }
    25% { transform: translateX(-12.5%) translateY(-8px); }
    50% { transform: translateX(-25%) translateY(0); }
    75% { transform: translateX(-37.5%) translateY(-8px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* Moving Gradient Animations */
@keyframes gradient-shift-1 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradient-shift-2 {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes gradient-shift-3 {
    0% { background-position: 0% 50%, 100% 50%, 50% 0%; }
    50% { background-position: 100% 50%, 0% 50%, 50% 100%; }
    100% { background-position: 0% 50%, 100% 50%, 50% 0%; }
}

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

@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.3); }
}

@keyframes metallic-shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Style 1: Mirror Chrome - Highly Reflective Silver */
.amazing-announcement.aa-style-1 {
    background: 
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(200, 200, 200, 0.2) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #ffffff 0%, #e0e0e0 15%, #c0c0c0 30%, #a0a0a0 45%, #c0c0c0 60%, #e0e0e0 75%, #ffffff 90%, #f5f5f5 100%);
    background-size: 100% 3px, 3px 100%, 300% 300%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 4s ease infinite;
    color: #000000;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4), 
        inset 0 0 80px rgba(255, 255, 255, 0.6),
        inset 0 3px 6px rgba(255, 255, 255, 0.8),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(180, 180, 180, 0.6);
    position: relative;
}

.amazing-announcement.aa-style-1::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: shimmer 2.5s infinite;
}

/* Style 2: Rustic Clay - Matte Terracotta with Weathered Texture */
.amazing-announcement.aa-style-2 {
    background: 
        repeating-linear-gradient(45deg, rgba(160, 82, 45, 0.15) 0px, transparent 1px, transparent 2px, rgba(139, 69, 19, 0.15) 3px),
        repeating-linear-gradient(135deg, rgba(101, 67, 33, 0.1) 0px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at top, rgba(205, 133, 63, 0.9) 0%, transparent 70%),
        linear-gradient(135deg, #a0522d 0%, #cd853f 25%, #d2691e 50%, #b8860b 75%, #8b4513 100%);
    background-size: 12px 12px, 8px 8px, 200% 200%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 50% 0%, 0% 50%;
    animation: gradient-shift-2 9s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(139, 69, 19, 0.7), inset 0 0 60px rgba(160, 82, 45, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(139, 69, 19, 0.5);
    border-top: 4px solid rgba(101, 67, 33, 0.8);
    border-bottom: 4px solid rgba(101, 67, 33, 0.8);
}

/* Style 3: Forest Moss - Deep Green with Organic Texture */
.amazing-announcement.aa-style-3 {
    background: 
        radial-gradient(circle, rgba(34, 139, 34, 0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(0, 100, 0, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, rgba(0, 100, 0, 1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(34, 139, 34, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #1a4d1a 0%, #006400 30%, #228b22 60%, #32cd32 100%);
    background-size: 25px 25px, 15px 15px, 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 10% 10%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 14s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 35px rgba(0, 100, 0, 0.8), inset 0 0 60px rgba(34, 139, 34, 0.5), inset 0 1px 0 rgba(0, 255, 0, 0.2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.6);
    border-bottom: 5px solid rgba(50, 205, 50, 0.7);
}

/* Style 4: Polished Copper - Shiny Copper with Patina */
.amazing-announcement.aa-style-4 {
    background: 
        repeating-linear-gradient(0deg, rgba(184, 115, 51, 0.25) 0px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(218, 138, 71, 0.15) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #8b4513 0%, #b87333 12%, #cd7f32 25%, #da8a47 37%, #e6a057 50%, #da8a47 62%, #cd7f32 75%, #b87333 87%, #8b4513 100%);
    background-size: 100% 2px, 2px 100%, 250% 250%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 3.5s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 10px 40px rgba(184, 115, 51, 0.8), 
        inset 0 0 80px rgba(230, 160, 87, 0.6),
        inset 0 3px 6px rgba(255, 220, 177, 0.5),
        inset 0 -3px 6px rgba(139, 69, 19, 0.5);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 -1px 3px rgba(255, 200, 150, 0.4);
    border: 4px solid rgba(139, 69, 19, 0.8);
    position: relative;
}

.amazing-announcement.aa-style-4::before {
    background: linear-gradient(90deg, transparent, rgba(255, 220, 177, 0.6), transparent);
    animation: shimmer 3s infinite;
}

/* Style 5: Deep Space Blue - Dark Navy with Starfield */
.amazing-announcement.aa-style-5 {
    background: 
        radial-gradient(1px 1px at 15% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 45% 35%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 75% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 25% 75%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 0%, transparent 70%),
        linear-gradient(135deg, #000033 0%, #000066 25%, #000080 50%, #0000cd 75%, #191970 100%);
    background-size: 200% 200%, 180% 180%, 160% 160%, 150% 150%, 140% 140%, 150% 150%, 100% 100%;
    background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%, 80% 80%, 50% 50%, 0% 50%;
    animation: gradient-shift-4 25s linear infinite;
    color: #ffffff;
    box-shadow: 0 0 60px rgba(0, 0, 139, 0.9), inset 0 0 90px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(65, 105, 225, 0.2);
    text-shadow: 0 0 25px rgba(65, 105, 225, 1), 0 0 40px rgba(0, 0, 255, 0.8), 0 2px 10px rgba(0, 0, 0, 1);
    border-top: 3px solid rgba(65, 105, 225, 0.8);
    border-bottom: 3px solid rgba(65, 105, 225, 0.4);
}

/* Style 6: Marble Pink - Elegant Pink Marble Texture */
.amazing-announcement.aa-style-6 {
    background: 
        repeating-linear-gradient(60deg, rgba(255, 192, 203, 0.12) 0px, transparent 1px, transparent 2px, rgba(255, 182, 193, 0.12) 3px, transparent 4px, rgba(255, 218, 225, 0.1) 5px),
        repeating-linear-gradient(120deg, rgba(255, 182, 193, 0.08) 0px, transparent 1px, transparent 3px),
        radial-gradient(ellipse 300px 200px at top left, rgba(255, 182, 193, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse 250px 180px at bottom right, rgba(255, 192, 203, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #ffe4e1 0%, #ffd1dc 20%, #ffc0cb 40%, #ffb6c1 60%, #ffc0cb 80%, #ffe4e1 100%);
    background-size: 30px 30px, 20px 20px, 180% 180%, 160% 160%, 200% 200%;
    color: #5a3a3a;
    box-shadow: 0 6px 25px rgba(255, 182, 193, 0.6), inset 0 0 60px rgba(255, 228, 225, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(255, 182, 193, 0.6);
}

/* Style 7: Molten Lava - Glowing Red/Orange with Heat Waves */
.amazing-announcement.aa-style-7 {
    background: 
        repeating-linear-gradient(45deg, rgba(255, 69, 0, 0.3) 0px, transparent 1px, transparent 2px, rgba(255, 140, 0, 0.25) 3px),
        repeating-linear-gradient(135deg, rgba(220, 20, 60, 0.2) 0px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at center, rgba(255, 69, 0, 1) 0%, rgba(255, 140, 0, 0.95) 30%, rgba(220, 20, 60, 0.9) 50%, transparent 75%),
        linear-gradient(135deg, #8b0000 0%, #dc143c 20%, #ff4500 40%, #ff6347 60%, #ff8c00 80%, #ff4500 100%);
    background-size: 8px 8px, 12px 12px, 250% 250%, 250% 250%;
    background-position: 0% 0%, 0% 0%, 50% 50%, 0% 50%;
    animation: gradient-shift-1 5s ease infinite, pulse-glow 2s ease infinite;
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(255, 69, 0, 0.9), inset 0 0 80px rgba(255, 140, 0, 0.6), inset 0 2px 0 rgba(255, 255, 0, 0.3);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 69, 0, 0.6);
    border-top: 5px solid rgba(255, 215, 0, 1);
    border-bottom: 3px solid rgba(255, 140, 0, 0.8);
}

/* Style 8: Caribbean Turquoise Glass - Translucent Turquoise */
.amazing-announcement.aa-style-8 {
    background: 
        radial-gradient(circle at top left, rgba(64, 224, 208, 0.9) 0%, transparent 50%),
        radial-gradient(circle at bottom right, rgba(0, 206, 209, 1) 0%, transparent 50%),
        linear-gradient(135deg, #00ced1 0%, #40e0d0 25%, #48d1cc 50%, #00ffff 75%, #7fffd4 100%);
    backdrop-filter: blur(10px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.1);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-2 8s ease infinite;
    color: #003d3d;
    box-shadow: 0 8px 35px rgba(0, 206, 209, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
    border-bottom: 5px solid rgba(255, 255, 255, 0.7);
    border-top: 2px solid rgba(255, 255, 255, 0.5);
}

/* Style 9: 24K Gold - Ultra Shiny Gold */
.amazing-announcement.aa-style-9 {
    background: 
        repeating-linear-gradient(0deg, rgba(255, 215, 0, 0.35) 0px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255, 237, 78, 0.25) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #b8860b 0%, #daa520 10%, #ffd700 20%, #ffed4e 30%, #ffd700 40%, #ffed4e 50%, #ffd700 60%, #daa520 70%, #ffd700 80%, #ffed4e 90%, #b8860b 100%);
    background-size: 100% 2px, 2px 100%, 350% 350%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 3s ease infinite;
    color: #1a1a1a;
    box-shadow: 
        0 12px 45px rgba(255, 215, 0, 0.9), 
        inset 0 0 100px rgba(255, 237, 78, 0.7),
        inset 0 4px 8px rgba(255, 255, 255, 0.7),
        inset 0 -4px 8px rgba(184, 134, 11, 0.4);
    text-shadow: 0 2px 5px rgba(255, 255, 255, 1), 0 -1px 3px rgba(0, 0, 0, 0.4);
    border: 4px solid rgba(184, 134, 11, 0.9);
    position: relative;
}

.amazing-announcement.aa-style-9::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmer 1.8s infinite;
}

/* Style 10: Ice Crystal - Frosted White/Blue with Crystal Texture */
.amazing-announcement.aa-style-10 {
    background: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 75%, rgba(240, 248, 255, 0.3) 75%),
        repeating-linear-gradient(135deg, rgba(176, 224, 230, 0.15) 0px, transparent 1px, transparent 2px),
        radial-gradient(ellipse 200px 150px at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse 180px 120px at 70% 70%, rgba(240, 248, 255, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #e0f6ff 0%, #f0f8ff 20%, #ffffff 40%, #f0f8ff 60%, #e0f6ff 80%, #b0e0e6 100%);
    backdrop-filter: blur(15px) brightness(1.3) saturate(120%);
    -webkit-backdrop-filter: blur(15px) brightness(1.3) saturate(120%);
    background-size: 35px 35px, 25px 25px, 150% 150%, 120% 120%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-2 10s ease infinite;
    color: #1a3a4a;
    box-shadow: 0 8px 35px rgba(176, 224, 230, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(255, 255, 255, 0.7), inset 0 0 50px rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 1);
    border-top: 3px solid rgba(255, 255, 255, 0.9);
    border-bottom: 3px solid rgba(255, 255, 255, 0.9);
}

/* Style 11: Cosmic Purple - Deep Purple/Violet */
.amazing-announcement.aa-style-11 {
    background: 
        radial-gradient(2px 2px at 20% 30%, rgba(138, 43, 226, 0.9), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(148, 0, 211, 0.8), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(circle at 50% 50%, rgba(75, 0, 130, 0.7) 0%, transparent 70%),
        linear-gradient(135deg, #4b0082 0%, #8a2be2 30%, #9400d3 60%, #ba55d3 100%);
    background-size: 200% 200%, 180% 180%, 150% 150%, 150% 150%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 50% 50%, 0% 50%;
    animation: gradient-shift-4 18s linear infinite;
    color: #ffffff;
    box-shadow: 0 0 50px rgba(138, 43, 226, 0.8), inset 0 0 80px rgba(75, 0, 130, 0.6);
    text-shadow: 0 0 25px rgba(186, 85, 211, 1), 0 2px 10px rgba(0, 0, 0, 1);
    border-top: 3px solid rgba(186, 85, 211, 0.8);
}

/* Style 12: Rustic Brown - Earthy Brown with Weathered Texture */
.amazing-announcement.aa-style-12 {
    background: 
        repeating-linear-gradient(0deg, rgba(101, 67, 33, 0.1) 0px, transparent 1px, transparent 2px, rgba(139, 90, 43, 0.1) 3px),
        repeating-linear-gradient(90deg, rgba(101, 67, 33, 0.08) 0px, transparent 1px, transparent 3px),
        linear-gradient(135deg, #654321 0%, #8b5a2b 25%, #a0522d 50%, #8b5a2b 75%, #654321 100%);
    background-size: 100% 5px, 5px 100%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 6s ease infinite;
    color: #ffffff;
    box-shadow: 0 6px 30px rgba(101, 67, 33, 0.6), inset 0 0 50px rgba(139, 90, 43, 0.4);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    border-left: 5px solid rgba(139, 90, 43, 0.8);
}

/* Style 13: Electric Lime - Neon Green */
.amazing-announcement.aa-style-13 {
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%),
        radial-gradient(circle at 40% 40%, rgba(50, 205, 50, 1) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(0, 255, 0, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #32cd32 0%, #00ff00 30%, #7fff00 60%, #adff2f 100%);
    background-size: 300% 300%, 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 50%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-4 9s ease infinite, pulse-glow 2s ease infinite;
    color: #003300;
    box-shadow: 0 0 40px rgba(0, 255, 0, 0.9), inset 0 0 60px rgba(50, 205, 50, 0.5);
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 255, 0, 0.8);
}

/* Style 14: Vintage Parchment - Aged Paper Texture */
.amazing-announcement.aa-style-14 {
    background: 
        repeating-linear-gradient(0deg, rgba(139, 69, 19, 0.06) 0px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(160, 82, 45, 0.04) 0px, transparent 1px, transparent 3px),
        radial-gradient(circle at 30% 30%, rgba(245, 245, 220, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(250, 235, 215, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #f5f5dc 0%, #faf0e6 30%, #fff8dc 60%, #ffe4b5 100%);
    background-size: 100% 4px, 4px 100%, 160% 160%, 140% 140%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-1 8s ease infinite;
    color: #4a4a4a;
    box-shadow: 0 6px 28px rgba(139, 69, 19, 0.4), inset 0 0 40px rgba(245, 245, 220, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border-top: 4px solid rgba(139, 69, 19, 0.5);
    border-bottom: 4px solid rgba(139, 69, 19, 0.5);
    position: relative;
}

.amazing-announcement.aa-style-14::before {
    background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.15), transparent);
    animation: shimmer 4s infinite;
}

/* Style 15: Ocean Blue Glass - Translucent Blue */
.amazing-announcement.aa-style-15 {
    background: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%),
        radial-gradient(circle at top, rgba(30, 144, 255, 0.8) 0%, transparent 60%),
        linear-gradient(135deg, #1e90ff 0%, #4169e1 30%, #6495ed 60%, #87ceeb 100%);
    backdrop-filter: blur(12px) saturate(170%);
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    background-size: 40px 40px, 200% 200%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 7px 32px rgba(30, 144, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border: 3px double rgba(255, 255, 255, 0.8);
}

/* Style 16: Cherry Blossom Pink - Soft Pink Gradient */
.amazing-announcement.aa-style-16 {
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 182, 193, 0.9) 0%, transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(255, 192, 203, 0.8) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 105, 180, 0.7) 0%, transparent 55%),
        linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 30%, #ffb6c1 60%, #ff69b4 100%);
    background-size: 200% 200%, 180% 180%, 160% 160%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 50%;
    animation: gradient-shift-3 13s ease infinite;
    color: #4a4a4a;
    box-shadow: 0 6px 30px rgba(255, 105, 180, 0.6), inset 0 0 60px rgba(255, 192, 203, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border-left: 6px solid rgba(255, 105, 180, 0.6);
}

/* Style 17: Charcoal Metallic - Dark Gray Metallic */
.amazing-announcement.aa-style-17 {
    background: 
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #2f2f2f 0%, #3d3d3d 20%, #4a4a4a 40%, #3d3d3d 60%, #2f2f2f 80%, #1a1a1a 100%);
    background-size: 100% 3px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 5.5s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 8px 40px rgba(0, 0, 0, 0.9), 
        inset 0 0 70px rgba(255, 255, 255, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 1);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.amazing-announcement.aa-style-17::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: shimmer 4.5s infinite;
}

/* Style 18: Sunset Orange - Warm Orange/Red */
.amazing-announcement.aa-style-18 {
    background: 
        radial-gradient(ellipse at top, rgba(255, 140, 0, 1) 0%, transparent 70%),
        linear-gradient(135deg, #ff8c00 0%, #ff7f50 25%, #ff6347 50%, #ff4500 75%, #ff8c00 100%);
    background-size: 250% 250%, 200% 200%;
    background-position: 50% 0%, 0% 50%;
    animation: gradient-shift-2 7s ease infinite;
    color: #ffffff;
    box-shadow: 0 7px 35px rgba(255, 140, 0, 0.8), inset 0 0 60px rgba(255, 127, 80, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Style 19: Lavender Mist - Soft Purple Glass */
.amazing-announcement.aa-style-19 {
    background: 
        radial-gradient(circle at 20% 30%, rgba(230, 230, 250, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(221, 160, 221, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #e6e6fa 0%, #dda0dd 30%, #da70d6 60%, #ba55d3 100%);
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    background-size: 170% 170%, 150% 150%, 100% 100%;
    color: #4a4a4a;
    box-shadow: 0 6px 28px rgba(221, 160, 221, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border-top: 3px solid rgba(186, 85, 211, 0.6);
}

/* Style 20: Coral Reef - Vibrant Coral/Pink with Dot Texture */
.amazing-announcement.aa-style-20 {
    background: 
        radial-gradient(circle, rgba(255, 127, 80, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 30% 40%, rgba(255, 127, 80, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 160, 122, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #ff7f50 0%, #ffa07a 30%, #ffb3ba 60%, #ffc0cb 100%);
    background-size: 20px 20px, 160% 160%, 140% 140%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 6px 30px rgba(255, 127, 80, 0.7), inset 0 0 50px rgba(255, 160, 122, 0.5);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
    border-bottom: 4px solid rgba(255, 107, 107, 0.8);
}

/* Style 21: Forest Green - Deep Green with Leaf Texture */
.amazing-announcement.aa-style-21 {
    background: 
        repeating-linear-gradient(45deg, rgba(34, 139, 34, 0.1) 0px, transparent 1px, transparent 2px, rgba(0, 128, 0, 0.1) 3px),
        radial-gradient(circle at top left, rgba(34, 139, 34, 0.9) 0%, transparent 50%),
        radial-gradient(circle at bottom right, rgba(0, 128, 0, 1) 0%, transparent 50%),
        linear-gradient(135deg, #228b22 0%, #008000 30%, #32cd32 60%, #90ee90 100%);
    background-size: 18px 18px, 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 11s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 35px rgba(34, 139, 34, 0.7), inset 0 0 60px rgba(0, 128, 0, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border-left: 5px solid rgba(144, 238, 144, 0.7);
}

/* Style 22: Royal Purple Velvet - Rich Purple */
.amazing-announcement.aa-style-22 {
    background: 
        repeating-linear-gradient(0deg, rgba(75, 0, 130, 0.15) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #4b0082 0%, #6a0dad 20%, #8b00ff 40%, #9370db 60%, #8b00ff 80%, #6a0dad 100%);
    background-size: 100% 4px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 5s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 0 45px rgba(139, 0, 255, 0.9), 
        inset 0 0 70px rgba(106, 13, 173, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.6);
    position: relative;
}

.amazing-announcement.aa-style-22::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3.5s infinite;
}

/* Style 23: Sky Blue - Light Blue with Cloud Texture */
.amazing-announcement.aa-style-23 {
    background: 
        radial-gradient(ellipse 200px 100px at 25% 25%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(ellipse 150px 80px at 75% 75%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(circle at 25% 25%, rgba(135, 206, 250, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(173, 216, 230, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #87ceeb 0%, #b0e0e6 30%, #e0f6ff 60%, #f0f8ff 100%);
    backdrop-filter: blur(8px) brightness(1.1);
    -webkit-backdrop-filter: blur(8px) brightness(1.1);
    background-size: 200% 200%, 180% 180%, 170% 170%, 150% 150%, 100% 100%;
    color: #2c3e50;
    box-shadow: 0 6px 28px rgba(135, 206, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border-top: 3px solid rgba(135, 206, 250, 0.7);
    border-bottom: 3px solid rgba(135, 206, 250, 0.7);
}

/* Style 24: Antique Brass - Brushed Brass */
.amazing-announcement.aa-style-24 {
    background: 
        repeating-linear-gradient(0deg, rgba(181, 166, 66, 0.2) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #b5a642 0%, #cd7f32 15%, #b8860b 30%, #daa520 45%, #b8860b 60%, #cd7f32 75%, #b5a642 90%, #8b6914 100%);
    background-size: 100% 3px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 4.5s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 8px 35px rgba(181, 166, 66, 0.7), 
        inset 0 0 60px rgba(218, 165, 32, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(139, 105, 20, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 -1px 2px rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(139, 105, 20, 0.8);
    position: relative;
}

.amazing-announcement.aa-style-24::before {
    background: linear-gradient(90deg, transparent, rgba(255, 248, 220, 0.4), transparent);
    animation: shimmer 3s infinite;
}

/* Style 25: Neon Cyan - Bright Cyan with Grid */
.amazing-announcement.aa-style-25 {
    background: 
        linear-gradient(45deg, rgba(0, 255, 255, 0.3) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.3) 75%),
        radial-gradient(circle at center, rgba(0, 255, 255, 1) 0%, transparent 50%),
        linear-gradient(135deg, #00ffff 0%, #00ced1 30%, #48d1cc 60%, #00ffff 100%);
    background-size: 50px 50px, 200% 200%, 200% 200%;
    background-position: 0% 0%, 50% 50%, 0% 50%;
    animation: gradient-shift-2 7s ease infinite, pulse-glow 2.5s ease infinite;
    color: #003333;
    box-shadow: 0 0 50px rgba(0, 255, 255, 1), inset 0 0 70px rgba(0, 206, 209, 0.6);
    text-shadow: 0 0 25px rgba(0, 255, 255, 1), 0 2px 10px rgba(0, 0, 0, 0.8);
    border-top: 4px solid rgba(0, 255, 255, 1);
}

/* Style 26: Peach Cream - Soft Peach */
.amazing-announcement.aa-style-26 {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 218, 185, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255, 228, 196, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #ffdab9 0%, #ffe4cd 30%, #fff8dc 60%, #fffacd 100%);
    backdrop-filter: blur(7px) saturate(130%);
    -webkit-backdrop-filter: blur(7px) saturate(130%);
    background-size: 160% 160%, 140% 140%, 100% 100%;
    color: #4a4a4a;
    box-shadow: 0 6px 28px rgba(255, 218, 185, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border-left: 6px solid rgba(255, 160, 122, 0.6);
}

/* Style 27: Deep Sea Blue - Dark Blue with Wave Texture */
.amazing-announcement.aa-style-27 {
    background: 
        repeating-linear-gradient(0deg, rgba(0, 0, 139, 0.1) 0px, transparent 1px, transparent 2px, rgba(0, 0, 205, 0.1) 3px),
        radial-gradient(circle at 20% 30%, rgba(0, 0, 139, 1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 205, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #00008b 0%, #0000cd 30%, #191970 60%, #000080 100%);
    background-size: 100% 6px, 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 14s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 40px rgba(0, 0, 139, 0.8), inset 0 0 70px rgba(0, 0, 205, 0.6);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    border-bottom: 3px solid rgba(65, 105, 225, 0.8);
}

/* Style 28: Blush Pink - Soft Pink with Fabric Texture */
.amazing-announcement.aa-style-28 {
    background: 
        repeating-linear-gradient(30deg, rgba(255, 182, 193, 0.1) 0px, transparent 1px, transparent 2px, rgba(255, 192, 203, 0.1) 3px),
        radial-gradient(circle at 40% 40%, rgba(255, 228, 225, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(255, 192, 203, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #ffe4e1 0%, #ffc0cb 30%, #ffb6c1 60%, #ffa0a0 100%);
    background-size: 22px 22px, 150% 150%, 130% 130%, 100% 100%;
    color: #4a4a4a;
    box-shadow: 0 6px 30px rgba(255, 192, 203, 0.6), inset 0 0 50px rgba(255, 228, 225, 0.6);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border: 2px dashed rgba(255, 182, 193, 0.7);
}

/* Style 29: Teal Jewel - Rich Teal */
.amazing-announcement.aa-style-29 {
    background: 
        radial-gradient(ellipse at top, rgba(0, 128, 128, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse at bottom, rgba(64, 224, 208, 1) 0%, transparent 60%),
        linear-gradient(135deg, #008080 0%, #20b2aa 30%, #40e0d0 60%, #48d1cc 100%);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 50% 0%, 50% 100%, 0% 50%;
    animation: gradient-shift-2 9s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 35px rgba(0, 128, 128, 0.8), inset 0 0 60px rgba(64, 224, 208, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border-top: 4px solid rgba(255, 255, 255, 0.7);
}

/* Style 30: Magenta Velvet - Rich Magenta */
.amazing-announcement.aa-style-30 {
    background: 
        repeating-linear-gradient(0deg, rgba(255, 0, 255, 0.15) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #ff00ff 0%, #ff1493 25%, #dc143c 50%, #ff1493 75%, #ff00ff 100%);
    background-size: 100% 4px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 4s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 8px 40px rgba(255, 0, 255, 0.9), 
        inset 0 0 70px rgba(255, 20, 147, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border-left: 5px solid rgba(255, 255, 255, 0.7);
    border-right: 5px solid rgba(255, 255, 255, 0.7);
    position: relative;
}

.amazing-announcement.aa-style-30::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite;
}

/* Style 31: Autumn Rust - Rust Orange/Brown */
.amazing-announcement.aa-style-31 {
    background: 
        repeating-linear-gradient(45deg, rgba(139, 69, 19, 0.12) 0px, transparent 1px, transparent 2px),
        radial-gradient(ellipse at top left, rgba(205, 92, 92, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(160, 82, 45, 0.8) 0%, transparent 60%),
        linear-gradient(135deg, #cd5c5c 0%, #a0522d 30%, #8b4513 60%, #cd853f 100%);
    background-size: 16px 16px, 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 10s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 35px rgba(205, 92, 92, 0.7), inset 0 0 60px rgba(160, 82, 45, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    border-top: 3px solid rgba(255, 215, 0, 0.8);
}

/* Style 32: Mint Green Glass - Fresh Mint */
.amazing-announcement.aa-style-32 {
    background: 
        radial-gradient(circle at top, rgba(152, 251, 152, 0.8) 0%, transparent 60%),
        radial-gradient(circle at bottom, rgba(144, 238, 144, 0.9) 0%, transparent 60%),
        linear-gradient(135deg, #98fb98 0%, #90ee90 30%, #00ff7f 60%, #00fa9a 100%);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    background-size: 200% 200%, 180% 180%, 100% 100%;
    color: #003300;
    box-shadow: 0 7px 32px rgba(152, 251, 152, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    border-bottom: 4px solid rgba(255, 255, 255, 0.6);
}

/* Style 33: Dark Purple Velvet - Deep Purple */
.amazing-announcement.aa-style-33 {
    background: 
        repeating-linear-gradient(0deg, rgba(75, 0, 130, 0.2) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #4b0082 0%, #6a0dad 25%, #8b00ff 50%, #6a0dad 75%, #4b0082 100%);
    background-size: 100% 4px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 5.5s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 0 50px rgba(139, 0, 255, 1), 
        inset 0 0 80px rgba(106, 13, 173, 0.7),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

.amazing-announcement.aa-style-33::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: shimmer 4s infinite;
}

/* Style 34: Fire Red - Intense Red */
.amazing-announcement.aa-style-34 {
    background: 
        radial-gradient(ellipse at top, rgba(255, 0, 0, 1) 0%, transparent 70%),
        linear-gradient(135deg, #ff0000 0%, #dc143c 25%, #b22222 50%, #8b0000 75%, #ff0000 100%);
    background-size: 250% 250%, 200% 200%;
    background-position: 50% 0%, 0% 50%;
    animation: gradient-shift-2 6s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 40px rgba(255, 0, 0, 0.8), inset 0 0 70px rgba(220, 20, 60, 0.6);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    border-top: 4px solid rgba(255, 255, 255, 0.7);
}

/* Style 35: Aqua Glass - Translucent Aqua */
.amazing-announcement.aa-style-35 {
    background: 
        radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(64, 224, 208, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #00ffff 0%, #40e0d0 30%, #48d1cc 60%, #7fffd4 100%);
    backdrop-filter: blur(9px) saturate(160%);
    -webkit-backdrop-filter: blur(9px) saturate(160%);
    background-size: 170% 170%, 150% 150%, 100% 100%;
    color: #003333;
    box-shadow: 0 7px 35px rgba(0, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    border-left: 6px solid rgba(255, 255, 255, 0.7);
}

/* Style 36: Berry Red - Deep Red/Pink */
.amazing-announcement.aa-style-36 {
    background: 
        radial-gradient(circle at 40% 40%, rgba(220, 20, 60, 1) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(255, 20, 147, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #dc143c 0%, #ff1493 30%, #ff69b4 60%, #ffb6c1 100%);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 8s ease infinite, pulse-glow 3s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 38px rgba(220, 20, 60, 0.8), inset 0 0 65px rgba(255, 20, 147, 0.5);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(255, 255, 255, 0.6);
}

/* Style 37: Ocean Teal Glass - Translucent Teal */
.amazing-announcement.aa-style-37 {
    background: 
        radial-gradient(ellipse at top left, rgba(0, 128, 128, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(72, 209, 204, 0.9) 0%, transparent 60%),
        linear-gradient(135deg, #008080 0%, #20b2aa 30%, #48d1cc 60%, #66cdaa 100%);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    background-size: 180% 180%, 160% 160%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 7px 33px rgba(0, 128, 128, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

/* Style 38: Crimson Metallic - Shimmering Red */
.amazing-announcement.aa-style-38 {
    background: 
        repeating-linear-gradient(0deg, rgba(220, 20, 60, 0.2) 0px, transparent 1px, transparent 2px),
        linear-gradient(135deg, #dc143c 0%, #ff1744 20%, #ff6b6b 40%, #ff1744 60%, #dc143c 80%, #8b0000 100%);
    background-size: 100% 3px, 200% 200%;
    background-position: 0% 0%, 0% 50%;
    animation: gradient-shift-1 4s ease infinite;
    color: #ffffff;
    box-shadow: 
        0 8px 42px rgba(220, 20, 60, 0.9), 
        inset 0 0 75px rgba(255, 23, 68, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(139, 0, 0, 0.5);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
    border-bottom: 4px solid rgba(255, 255, 255, 0.7);
    position: relative;
}

.amazing-announcement.aa-style-38::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2.5s infinite;
}

/* Style 39: Azure Blue - Bright Blue */
.amazing-announcement.aa-style-39 {
    background: 
        radial-gradient(circle at top, rgba(0, 127, 255, 1) 0%, transparent 60%),
        radial-gradient(circle at bottom, rgba(135, 206, 250, 0.9) 0%, transparent 60%),
        linear-gradient(135deg, #007fff 0%, #1e90ff 30%, #4169e1 60%, #6495ed 100%);
    background-size: 250% 250%, 220% 220%, 200% 200%;
    background-position: 50% 0%, 50% 100%, 0% 50%;
    animation: gradient-shift-2 10s ease infinite;
    color: #ffffff;
    box-shadow: 0 0 48px rgba(0, 127, 255, 0.9), inset 0 0 72px rgba(30, 144, 255, 0.5);
    text-shadow: 0 0 20px rgba(135, 206, 250, 1), 0 2px 10px rgba(0, 0, 0, 0.7);
    border-left: 5px solid rgba(255, 255, 255, 0.7);
}

/* Style 40: Plum Glass - Soft Purple Glass */
.amazing-announcement.aa-style-40 {
    background: 
        radial-gradient(ellipse at center, rgba(221, 160, 221, 0.8) 0%, transparent 65%),
        linear-gradient(135deg, #dda0dd 0%, #da70d6 30%, #ba55d3 60%, #9370db 100%);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    background-size: 160% 160%, 100% 100%;
    color: #4a4a4a;
    box-shadow: 0 7px 36px rgba(221, 160, 221, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border: 2px dashed rgba(186, 85, 211, 0.6);
}

/* Style 41: Lime Zest - Bright Green/Yellow */
.amazing-announcement.aa-style-41 {
    background: 
        radial-gradient(circle at 30% 30%, rgba(50, 205, 50, 1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(154, 205, 50, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #32cd32 0%, #9acd32 30%, #adff2f 60%, #7fff00 100%);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 11s ease infinite;
    color: #003300;
    box-shadow: 0 6px 30px rgba(50, 205, 50, 0.7), inset 0 0 52px rgba(154, 205, 50, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border-top: 4px solid rgba(173, 255, 47, 0.8);
}

/* Style 42: Indigo Glass - Dark Blue Glass */
.amazing-announcement.aa-style-42 {
    background: 
        radial-gradient(circle at 25% 25%, rgba(75, 0, 130, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(138, 43, 226, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #4b0082 0%, #6a0dad 30%, #8a2be2 60%, #9370db 100%);
    backdrop-filter: blur(11px) brightness(0.85);
    -webkit-backdrop-filter: blur(11px) brightness(0.85);
    background-size: 180% 180%, 160% 160%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 7px 34px rgba(75, 0, 130, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid rgba(138, 43, 226, 0.6);
}

/* Style 43: Tangerine - Vibrant Orange */
.amazing-announcement.aa-style-43 {
    background: 
        radial-gradient(ellipse at top left, rgba(255, 165, 0, 1) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(255, 140, 0, 0.9) 0%, transparent 60%),
        linear-gradient(135deg, #ffa500 0%, #ff8c00 30%, #ff7f50 60%, #ff6347 100%);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 8s ease infinite;
    color: #ffffff;
    box-shadow: 0 7px 36px rgba(255, 165, 0, 0.8), inset 0 0 62px rgba(255, 140, 0, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    border-left: 6px solid rgba(255, 255, 255, 0.7);
}

/* Style 44: Cyan Metallic - Shimmering Cyan */
.amazing-announcement.aa-style-44 {
    background: 
        repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.2) 0px, transparent 1px, transparent 2px),
        linear-gradient(45deg, rgba(0, 255, 255, 0.3) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.3) 75%),
        linear-gradient(135deg, #00ffff 0%, #00ced1 20%, #48d1cc 40%, #00ced1 60%, #00ffff 80%, #7fffd4 100%);
    background-size: 100% 3px, 60px 60px, 200% 200%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 4.5s ease infinite;
    color: #003333;
    box-shadow: 
        0 0 52px rgba(0, 255, 255, 1), 
        inset 0 0 78px rgba(0, 206, 209, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 22px rgba(0, 255, 255, 1), 0 2px 10px rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(255, 255, 255, 0.6);
    position: relative;
}

.amazing-announcement.aa-style-44::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 3s infinite;
}

/* Style 45: Rose Petal - Soft Rose */
.amazing-announcement.aa-style-45 {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 228, 225, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 182, 193, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #ffe4e1 0%, #ffb6c1 30%, #ff69b4 60%, #ff1493 100%);
    background-size: 200% 200%, 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    animation: gradient-shift-3 10s ease infinite;
    color: #4a4a4a;
    box-shadow: 0 8px 40px rgba(255, 182, 193, 0.7), inset 0 0 70px rgba(255, 228, 225, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border-top: 4px solid rgba(255, 105, 180, 0.7);
    border-bottom: 4px solid rgba(255, 105, 180, 0.7);
}

/* Style 46: Steel Metallic - Industrial Steel */
.amazing-announcement.aa-style-46 {
    background: 
        repeating-linear-gradient(0deg, rgba(192, 192, 192, 0.15) 0px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(169, 169, 169, 0.1) 0px, transparent 1px, transparent 3px),
        linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 20%, #808080 40%, #a9a9a9 60%, #c0c0c0 80%, #d3d3d3 100%);
    background-size: 100% 3px, 3px 100%, 200% 200%;
    background-position: 0% 0%, 0% 0%, 0% 50%;
    animation: gradient-shift-1 5.5s ease infinite;
    color: #1a1a1a;
    box-shadow: 
        0 7px 35px rgba(128, 128, 128, 0.6), 
        inset 0 0 60px rgba(192, 192, 192, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border-left: 5px solid rgba(169, 169, 169, 0.6);
    position: relative;
}

.amazing-announcement.aa-style-46::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 4s infinite;
}

/* Style 47: Honey Gold - Warm Gold/Yellow */
.amazing-announcement.aa-style-47 {
    background: 
        radial-gradient(ellipse at top, rgba(255, 215, 0, 1) 0%, transparent 65%),
        linear-gradient(135deg, #ffd700 0%, #ffed4e 20%, #ffa500 40%, #ff8c00 60%, #ffa500 80%, #ffd700 100%);
    background-size: 250% 250%, 200% 200%;
    background-position: 50% 0%, 0% 50%;
    animation: gradient-shift-2 5s ease infinite;
    color: #1a1a1a;
    box-shadow: 0 8px 38px rgba(255, 215, 0, 0.8), inset 0 0 65px rgba(255, 237, 78, 0.6);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(184, 134, 11, 0.8);
}

/* Style 48: Violet Glass - Soft Purple Glass */
.amazing-announcement.aa-style-48 {
    background: 
        radial-gradient(circle at 25% 25%, rgba(238, 130, 238, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(221, 160, 221, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #ee82ee 0%, #da70d6 30%, #ba55d3 60%, #9370db 100%);
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    background-size: 180% 180%, 160% 160%, 100% 100%;
    color: #4a4a4a;
    box-shadow: 0 6px 32px rgba(238, 130, 238, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
    border-top: 3px solid rgba(186, 85, 211, 0.7);
    border-bottom: 3px solid rgba(186, 85, 211, 0.7);
}

/* Style 49: Emerald Glow - Bright Green */
.amazing-announcement.aa-style-49 {
    background: 
        radial-gradient(ellipse at center, rgba(0, 201, 87, 1) 0%, transparent 65%),
        linear-gradient(135deg, #00c957 0%, #32cd32 30%, #00ff7f 60%, #00fa9a 100%);
    background-size: 200% 200%, 200% 200%;
    background-position: 50% 50%, 0% 50%;
    animation: gradient-shift-2 7s ease infinite, pulse-glow 3s ease infinite;
    color: #ffffff;
    box-shadow: 0 0 48px rgba(0, 201, 87, 0.9), inset 0 0 72px rgba(50, 205, 50, 0.5);
    text-shadow: 0 0 20px rgba(0, 255, 127, 1), 0 2px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Style 50: Rainbow Spectrum - Multi-Color Moving */
.amazing-announcement.aa-style-50 {
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 0, 0, 0.9) 0%, transparent 40%),
        radial-gradient(circle at 40% 40%, rgba(255, 165, 0, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 60% 60%, rgba(255, 255, 0, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 0, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 255, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #ff0000 0%, #ff8c00 15%, #ffd700 30%, #00ff00 45%, #00bfff 60%, #0000ff 75%, #8b00ff 90%, #ff0000 100%);
    background-size: 200% 200%, 180% 180%, 160% 160%, 140% 140%, 150% 150%, 200% 200%;
    background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%, 50% 50%, 0% 50%;
    animation: gradient-shift-4 20s ease infinite;
    color: #ffffff;
    box-shadow: 0 8px 42px rgba(255, 0, 0, 0.8), inset 0 0 80px rgba(255, 215, 0, 0.4);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.5);
    border-top: 4px solid rgba(255, 255, 255, 0.7);
    position: relative;
}

.amazing-announcement.aa-style-50::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .amazing-announcement {
        font-size: 14px;
        padding: 10px;
    }
    
    .aa-text, .aa-ticker-wrapper {
        padding: 0 35px 0 10px;
    }
    
    .aa-close {
        right: 10px;
        width: 25px;
        height: 25px;
        font-size: 20px;
    }
}

/**
 * Amazing Announcements - 50 Text Animation Effects
 * These animations work like animated GIFs and can be applied to text segments using [fxN,delay] tags
 */

/* Animation 1: Fade In */
@keyframes fx-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation 2: Slide In From Left */
@keyframes fx-slide-left {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation 3: Slide In From Right */
@keyframes fx-slide-right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation 4: Slide In From Top */
@keyframes fx-slide-top {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation 5: Slide In From Bottom */
@keyframes fx-slide-bottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation 6: Zoom In */
@keyframes fx-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 7: Zoom Out */
@keyframes fx-zoom-out {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 8: Bounce In */
@keyframes fx-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation 9: Rotate In */
@keyframes fx-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Animation 10: Flip In Horizontal */
@keyframes fx-flip-horizontal {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

/* Animation 11: Flip In Vertical */
@keyframes fx-flip-vertical {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* Animation 12: Elastic In */
@keyframes fx-elastic-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 13: Shake */
@keyframes fx-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Animation 14: Pulse */
@keyframes fx-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Animation 15: Glow Pulse */
@keyframes fx-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* Animation 16: Wave */
@keyframes fx-wave {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    75% {
        transform: translateY(10px);
    }
}

/* Animation 17: Swing */
@keyframes fx-swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}

/* Animation 18: Wobble */
@keyframes fx-wobble {
    0%, 100% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25px) rotate(-5deg);
    }
    30% {
        transform: translateX(20px) rotate(3deg);
    }
    45% {
        transform: translateX(-15px) rotate(-3deg);
    }
    60% {
        transform: translateX(10px) rotate(2deg);
    }
    75% {
        transform: translateX(-5px) rotate(-1deg);
    }
}

/* Animation 19: Rubber Band */
@keyframes fx-rubber-band {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }
    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation 20: Jello */
@keyframes fx-jello {
    0%, 100% {
        transform: skew(0deg, 0deg);
    }
    11.1% {
        transform: skew(12.5deg, 12.5deg);
    }
    22.2% {
        transform: skew(-6.25deg, -6.25deg);
    }
    33.3% {
        transform: skew(3.125deg, 3.125deg);
    }
    44.4% {
        transform: skew(-1.5625deg, -1.5625deg);
    }
    55.5% {
        transform: skew(0.78125deg, 0.78125deg);
    }
    66.6% {
        transform: skew(-0.390625deg, -0.390625deg);
    }
    77.7% {
        transform: skew(0.1953125deg, 0.1953125deg);
    }
    88.8% {
        transform: skew(-0.09765625deg, -0.09765625deg);
    }
}

/* Animation 21: Heartbeat */
@keyframes fx-heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.9);
    }
    20%, 40%, 50%, 60%, 70%, 80%, 90% {
        transform: scale(1.1);
    }
}

/* Animation 22: Flash */
@keyframes fx-flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

/* Animation 23: Flicker */
@keyframes fx-flicker {
    0%, 100% {
        opacity: 1;
    }
    41.99% {
        opacity: 1;
    }
    42% {
        opacity: 0;
    }
    43% {
        opacity: 0;
    }
    43.01% {
        opacity: 1;
    }
    45.99% {
        opacity: 1;
    }
    46% {
        opacity: 0;
    }
    46.5% {
        opacity: 0;
    }
    46.51% {
        opacity: 1;
    }
}

/* Animation 24: Blur In */
@keyframes fx-blur-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Animation 25: Glow In */
@keyframes fx-glow-in {
    from {
        opacity: 0;
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    to {
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* Animation 26: Slide & Rotate */
@keyframes fx-slide-rotate {
    from {
        opacity: 0;
        transform: translateX(-100px) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Animation 27: Zoom & Rotate */
@keyframes fx-zoom-rotate {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Animation 28: Bounce & Rotate */
@keyframes fx-bounce-rotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    70% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Animation 29: Slide & Fade */
@keyframes fx-slide-fade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation 30: Zoom & Fade */
@keyframes fx-zoom-fade {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 31: Spin In */
@keyframes fx-spin-in {
    from {
        opacity: 0;
        transform: rotate(-360deg) scale(0);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Animation 32: Typewriter Effect */
@keyframes fx-typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Animation 33: Glitch */
@keyframes fx-glitch {
    0%, 100% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

/* Animation 34: Gradient Shift */
@keyframes fx-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animation 35: Float */
@keyframes fx-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Animation 36: Slide Diagonal */
@keyframes fx-slide-diagonal {
    from {
        opacity: 0;
        transform: translate(-50px, -50px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* Animation 37: Scale & Fade */
@keyframes fx-scale-fade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 38: Rotate & Scale */
@keyframes fx-rotate-scale {
    from {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Animation 39: Slide & Scale */
@keyframes fx-slide-scale {
    from {
        opacity: 0;
        transform: translateX(-50px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Animation 40: Bounce & Fade */
@keyframes fx-bounce-fade {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation 41: Flip & Fade */
@keyframes fx-flip-fade {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg) scale(1);
    }
}

/* Animation 42: Elastic Bounce */
@keyframes fx-elastic-bounce {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    60% {
        transform: scale(0.8);
    }
    70% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation 43: Slide & Rotate & Fade */
@keyframes fx-slide-rotate-fade {
    from {
        opacity: 0;
        transform: translateX(-100px) rotate(-90deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Animation 44: Zoom & Fade & Rotate */
@keyframes fx-zoom-fade-rotate {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Animation 45: Bounce & Rotate & Fade */
@keyframes fx-bounce-rotate-fade {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
    }
    70% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animation 46: Shake & Glow */
@keyframes fx-shake-glow {
    0%, 100% {
        transform: translateX(0);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}

/* Animation 47: Pulse & Glow */
@keyframes fx-pulse-glow {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 35px rgba(255, 255, 255, 0.8);
    }
}

/* Animation 48: Wave & Fade */
@keyframes fx-wave-fade {
    0%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
    25% {
        opacity: 0.8;
        transform: translateY(-10px);
    }
    75% {
        opacity: 0.8;
        transform: translateY(10px);
    }
}

/* Animation 49: Rotate & Glow */
@keyframes fx-rotate-glow {
    from {
        opacity: 0;
        transform: rotate(-180deg);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
        text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* Animation 50: Multi Effect (Combination) */
@keyframes fx-multi-effect {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.5) rotate(-90deg);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scale(1.1) rotate(5deg);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animation Classes - Applied to text segments */
.aa-fx-animated {
    display: inline-block;
    animation-fill-mode: both;
}

.aa-fx-1 { animation-name: fx-fade-in; }
.aa-fx-2 { animation-name: fx-slide-left; }
.aa-fx-3 { animation-name: fx-slide-right; }
.aa-fx-4 { animation-name: fx-slide-top; }
.aa-fx-5 { animation-name: fx-slide-bottom; }
.aa-fx-6 { animation-name: fx-zoom-in; }
.aa-fx-7 { animation-name: fx-zoom-out; }
.aa-fx-8 { animation-name: fx-bounce-in; }
.aa-fx-9 { animation-name: fx-rotate-in; }
.aa-fx-10 { animation-name: fx-flip-horizontal; }
.aa-fx-11 { animation-name: fx-flip-vertical; }
.aa-fx-12 { animation-name: fx-elastic-in; }
.aa-fx-13 { animation-name: fx-shake; animation-iteration-count: infinite; }
.aa-fx-14 { animation-name: fx-pulse; animation-iteration-count: infinite; }
.aa-fx-15 { animation-name: fx-glow-pulse; animation-iteration-count: infinite; }
.aa-fx-16 { animation-name: fx-wave; animation-iteration-count: infinite; }
.aa-fx-17 { animation-name: fx-swing; animation-iteration-count: infinite; }
.aa-fx-18 { animation-name: fx-wobble; animation-iteration-count: infinite; }
.aa-fx-19 { animation-name: fx-rubber-band; }
.aa-fx-20 { animation-name: fx-jello; }
.aa-fx-21 { animation-name: fx-heartbeat; animation-iteration-count: infinite; }
.aa-fx-22 { animation-name: fx-flash; animation-iteration-count: infinite; }
.aa-fx-23 { animation-name: fx-flicker; animation-iteration-count: infinite; }
.aa-fx-24 { animation-name: fx-blur-in; }
.aa-fx-25 { animation-name: fx-glow-in; }
.aa-fx-26 { animation-name: fx-slide-rotate; }
.aa-fx-27 { animation-name: fx-zoom-rotate; }
.aa-fx-28 { animation-name: fx-bounce-rotate; }
.aa-fx-29 { animation-name: fx-slide-fade; }
.aa-fx-30 { animation-name: fx-zoom-fade; }
.aa-fx-31 { animation-name: fx-spin-in; }
.aa-fx-32 { animation-name: fx-typewriter; }
.aa-fx-33 { animation-name: fx-glitch; animation-iteration-count: infinite; }
.aa-fx-34 { animation-name: fx-gradient-shift; animation-iteration-count: infinite; }
.aa-fx-35 { animation-name: fx-float; animation-iteration-count: infinite; }
.aa-fx-36 { animation-name: fx-slide-diagonal; }
.aa-fx-37 { animation-name: fx-scale-fade; }
.aa-fx-38 { animation-name: fx-rotate-scale; }
.aa-fx-39 { animation-name: fx-slide-scale; }
.aa-fx-40 { animation-name: fx-bounce-fade; }
.aa-fx-41 { animation-name: fx-flip-fade; }
.aa-fx-42 { animation-name: fx-elastic-bounce; }
.aa-fx-43 { animation-name: fx-slide-rotate-fade; }
.aa-fx-44 { animation-name: fx-zoom-fade-rotate; }
.aa-fx-45 { animation-name: fx-bounce-rotate-fade; }
.aa-fx-46 { animation-name: fx-shake-glow; animation-iteration-count: infinite; }
.aa-fx-47 { animation-name: fx-pulse-glow; animation-iteration-count: infinite; }
.aa-fx-48 { animation-name: fx-wave-fade; animation-iteration-count: infinite; }
.aa-fx-49 { animation-name: fx-rotate-glow; }
.aa-fx-50 { animation-name: fx-multi-effect; }

/**
 * Outro Animations - 20 animations for text exit/clear effects
 */

/* Outro Animation 1: Fade Out */
@keyframes ofx-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Outro Animation 2: Slide Out Left */
@keyframes ofx-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}

/* Outro Animation 3: Slide Out Right */
@keyframes ofx-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Outro Animation 4: Slide Out Top */
@keyframes ofx-slide-out-top {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* Outro Animation 5: Slide Out Bottom */
@keyframes ofx-slide-out-bottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* Outro Animation 6: Zoom Out */
@keyframes ofx-zoom-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Outro Animation 7: Zoom In */
@keyframes ofx-zoom-in {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Outro Animation 8: Rotate Out */
@keyframes ofx-rotate-out {
    from {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }
}

/* Outro Animation 9: Flip Out Horizontal */
@keyframes ofx-flip-out-horizontal {
    from {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
    to {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
}

/* Outro Animation 10: Flip Out Vertical */
@keyframes ofx-flip-out-vertical {
    from {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
    to {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
}

/* Outro Animation 11: Blur Out */
@keyframes ofx-blur-out {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(10px);
    }
}

/* Outro Animation 12: Shrink Out */
@keyframes ofx-shrink-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* Outro Animation 13: Spin Out */
@keyframes ofx-spin-out {
    from {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(360deg) scale(0);
    }
}

/* Outro Animation 14: Slide & Fade Out */
@keyframes ofx-slide-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* Outro Animation 15: Zoom & Rotate Out */
@keyframes ofx-zoom-rotate-out {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
}

/* Outro Animation 16: Bounce Out */
@keyframes ofx-bounce-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Outro Animation 17: Elastic Out */
@keyframes ofx-elastic-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Outro Animation 18: Wobble Out */
@keyframes ofx-wobble-out {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25px) rotate(-5deg);
    }
    30% {
        transform: translateX(20px) rotate(3deg);
    }
    45% {
        transform: translateX(-15px) rotate(-3deg);
    }
    60% {
        transform: translateX(10px) rotate(2deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-100px) rotate(-10deg);
    }
}

/* Outro Animation 19: Fade & Scale Out */
@keyframes ofx-fade-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Outro Animation 20: Multi Out */
@keyframes ofx-multi-out {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateX(20px) scale(0.9) rotate(5deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px) scale(0.5) rotate(-90deg);
    }
}

/* Outro Animation Classes */
.aa-ofx-1 { animation-name: ofx-fade-out; }
.aa-ofx-2 { animation-name: ofx-slide-out-left; }
.aa-ofx-3 { animation-name: ofx-slide-out-right; }
.aa-ofx-4 { animation-name: ofx-slide-out-top; }
.aa-ofx-5 { animation-name: ofx-slide-out-bottom; }
.aa-ofx-6 { animation-name: ofx-zoom-out; }
.aa-ofx-7 { animation-name: ofx-zoom-in; }
.aa-ofx-8 { animation-name: ofx-rotate-out; }
.aa-ofx-9 { animation-name: ofx-flip-out-horizontal; }
.aa-ofx-10 { animation-name: ofx-flip-out-vertical; }
.aa-ofx-11 { animation-name: ofx-blur-out; }
.aa-ofx-12 { animation-name: ofx-shrink-out; }
.aa-ofx-13 { animation-name: ofx-spin-out; }
.aa-ofx-14 { animation-name: ofx-slide-fade-out; }
.aa-ofx-15 { animation-name: ofx-zoom-rotate-out; }
.aa-ofx-16 { animation-name: ofx-bounce-out; }
.aa-ofx-17 { animation-name: ofx-elastic-out; }
.aa-ofx-18 { animation-name: ofx-wobble-out; }
.aa-ofx-19 { animation-name: ofx-fade-scale-out; }
.aa-ofx-20 { animation-name: ofx-multi-out; }

/* Blink Animation */
@keyframes aa-blink {
    0%, 100% {
        color: var(--aa-original-color, inherit);
    }
    50% {
        color: var(--aa-blink-color, #ff0000);
    }
}

.aa-blink {
    animation: aa-blink var(--aa-blink-duration, 1s) steps(var(--aa-blink-steps, 2), end) infinite;
}