/**
 * Styles für gekachelten Album-Cover-Hintergrund im Header
 * Zeigt die letzten 250 Song-Cover als schwarz-weiß Hintergrund
 */

/* Container für den gekachelten Hintergrund */
.album-covers-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Einzelne Cover-Kachel */
.album-cover-tile {
    position: absolute;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%) brightness(0.3);
    opacity: 1;
    transition: opacity 0.5s ease, filter 1s ease;
}

/* Cover mit rotem Highlight - reduziere Grayscale */
.album-cover-tile.has-red-highlight {
    filter: grayscale(20%) brightness(0.3);
}

/* Rotes Highlight-Overlay */
.album-cover-red-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    mix-blend-mode: multiply;
    opacity: 0;
    animation: redFadeIn 1s ease forwards;
    pointer-events: none;
}

.album-cover-red-highlight.fade-out-red {
    animation: redFadeOut 1s ease forwards;
}

@keyframes redFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.7;
    }
}

@keyframes redFadeOut {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 0;
    }
}

/* Animation für neue Kacheln */
@keyframes tileFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tileFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.album-cover-tile.fade-in {
    animation: tileFadeIn 0.5s ease forwards;
}

.album-cover-tile.fade-out {
    animation: tileFadeOut 0.5s ease forwards;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .album-covers-background {
        display: none;
    }
    
    .album-cover-tile {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .album-cover-tile {
        width: 75px;
        height: 75px;
    }
}

/* Container muss position: relative haben */
.elementor-element-ff2797f {
    position: relative;
}