/* --- 1. RGB EFFEKT (Nur Farbe) --- */
.rgb-animated {
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: bold;
    animation: flow 3s linear infinite;
}

@keyframes flow {
    to { background-position: 200% center; }
}

/* --- 2. WELLEN EFFEKT (Nur Bewegung) --- */
/* Nutzt 'skew' für die optische Wellen-Verformung */
.wave-effect {
    display: inline-block;
    animation: snake-wave 3s ease-in-out infinite;
}

@keyframes snake-wave {
    0%, 100% {
        transform: translateX(0) skewX(0deg);
    }
    25% {
        transform: translateX(10px) translateY(-2px) skewX(7deg);
    }
    50% {
        transform: translateX(0) translateY(0) skewX(-7deg);
    }
    75% {
        transform: translateX(-10px) translateY(2px) skewX(7deg);
    }
}

.shimmer-wave {
    /* Hintergrund-Verlauf: Farbe -> Glanz-Farbe -> Farbe */
    background: linear-gradient(to right, #333 20%, #fff 50%, #333 80%);
    background-size: 200% auto;
    
    /* Text-Maskierung */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    display: inline-block;
    font-weight: bold;

    /* Die fließende Animation (wie beim RGB-Effekt) */
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.shimmer-wave2 {
    /* Verlauf von dunklem Gold zu hellem Gelb/Weiß zurück zu Gold */
    background: linear-gradient(
        to right, 
        #b8860b 20%, 
        #fff700 50%, 
        #b8860b 80%
    );
    background-size: 200% auto;
    
    /* Text-Maskierung */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    display: inline-block;
    font-weight: bold;

    /* Die fließende Animation */
    animation: shine-yellow 2s linear infinite;
}

@keyframes shine-yellow {
    to {
        background-position: 200% center;
    }
}