/* animations.css - Für Trophäen-Effekte */

/* Base Card Animation */
.trophy-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trophy-card:not(.locked):hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* --- Keyframe-Animationen --- */

@keyframes eisen-glow {
    0%, 100% { box-shadow: 0 0 5px #6b7280; }
    50% { box-shadow: 0 0 15px #a1a1aa; }
}

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

@keyframes silber-shine {
    0% { transform: translateX(-150%) skewX(-30deg); }
    100% { transform: translateX(150%) skewX(-30deg); }
}

@keyframes gold-flicker {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 15px #facc15, 0 0 5px #fde047 inset; }
    50% { opacity: 1; box-shadow: 0 0 30px #facc15, 0 0 10px #fde047 inset; }
}

@keyframes platin-particles {
    from { background-position: 0 0; }
    to { background-position: 10000px 5000px; }
}

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


/* --- Animationsklassen pro Rang --- */

.anim-eisen {
    border: 2px solid #6b7280;
    animation: eisen-glow 4s ease-in-out infinite;
}

.anim-bronze {
    border: 2px solid #cd7f32;
    background-image: radial-gradient(#eab308 1px, transparent 1px);
    background-size: 10px 10px;
    animation: bronze-sparks 5s linear infinite;
}

.anim-silber {
    border: 2px solid #c0c0c0;
    position: relative;
    overflow: hidden;
}
.anim-silber::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    animation: silber-shine 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.anim-gold {
    border: 2px solid #ffd700;
    animation: gold-flicker 2s ease-in-out infinite;
}

.anim-platin {
    border: 2px solid #40E0D0;
    background-image: url('data:image/svg+xml,...'); /* Particle SVG */
    animation: platin-particles 200s linear infinite;
}

.anim-mythisch {
    border: 2px solid transparent;
    background-size: 400% 400%;
    background-image: linear-gradient(-45deg, #9b59b6, #e74c3c, #f1c40f, #3498db);
    animation: mythisch-aura 8s ease infinite;
}

/* Weitere Ränge (Diamant, Meister, etc.) können hier nach demselben Muster hinzugefügt werden */
.anim-diamant {
     border: 2px solid #C8A2C8;
     /* Fügen Sie hier eine einzigartige Animation für Diamant hinzu */
}

.anim-meister {
     border: 2px solid #00FF7F;
     /* Fügen Sie hier eine einzigartige Animation für Meister hinzu */
}