/* =====================================================
   BASE TRANSITIONS
===================================================== */


.song-card,
.filter-button,
.role-tag {

    transition:
        opacity .35s ease,
        background-color .25s ease,
        border-color .25s ease;

}



/* =====================================================
   INITIAL LOAD
===================================================== */


/* Kort der vises */
.song-card {

    opacity: 1;

    transform:
        scale(1)
        translateY(0);

    transition:
        opacity .35s ease,
        transform .35s ease;

}


@keyframes cardAppear {

    from {

        opacity:0;

        transform:
            translateY(20px);

    }


    to {

        opacity:1;

        transform:
            translateY(0);

    }

}



/* =====================================================
   FILTERING
===================================================== */


/*
   Bruges når et kort skjules
*/

.song-card.is-hidden {

    opacity: 0;

    transform:
        scale(0.96)
        translateY(10px);
}


/* Kort der er fjernet fra layout */
.song-card.hide {
    display: none;
}



/*
   Bruges når et kort vises igen
*/

.song-card.is-visible {

    opacity:1;

    transform:
        scale(1)
        translateY(0);

}



/* =====================================================
   GRID MOVEMENT
===================================================== */


/*
   Hjælper hvis JS flytter kort rundt
*/

.song-grid {

    transition:
        height .35s ease;

}



.song-card.moving {

    transition:
        transform .4s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}



/* =====================================================
   HOVER EFFECTS
===================================================== */


.song-card:hover .role-tag {

    transform:
        translateY(-2px);

}


.role-tag {

    display:inline-block;

}



.role-tag:hover {

    background:
        rgba(124,199,163,.22);

}



/* =====================================================
   FILTER BUTTONS
===================================================== */


.filter-button {

    position:relative;

    overflow:hidden;

}



.filter-button::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        rgba(255,255,255,.08);

    opacity:0;

    transition:
        opacity .2s ease;

}



.filter-button:hover::after {

    opacity:1;

}

/* =====================================================
   ACTIVE FILTER ANIMATION
===================================================== */


.filter-button.active {

    animation:
        filterPulse .3s ease;

}



@keyframes filterPulse {

    from {

        transform:
            scale(.95);

    }


    to {

        transform:
            scale(1);

    }

}


/* =====================================================
   SEARCH FEEDBACK
===================================================== */


.search input {

    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}


.search input:focus {

    box-shadow:

        0 0 0 4px
        rgba(124,199,163,.12);

}



/* =====================================================
   EMPTY STATE
===================================================== */


.no-results {

    animation:
        fadeIn .4s ease;

    color:
        var(--text-secondary);

    text-align:center;

    padding:
        40px;

}



@keyframes fadeIn {

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}



/* =====================================================
   REDUCED MOTION
===================================================== */


/*
   Respekter brugere der har slået
   animationer fra i systemet
*/

@media (prefers-reduced-motion: reduce) {


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}