:root {
    --anim-timing: linear;
    --amin-duration: .5s;
    --filter-darken: brightness(50%);
    --filter-brighten: brightness(100%);
    
    --spine-pos: 0px;
}

#media-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 50px;
    background-color: cadetblue;
}

.media-option-btn {
    font-family: "Comic Sans MS";
    background-color: black;
    color: white;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    gap: 5px;
    
    > * {
        pointer-events: none;
    }
}

.media-option-span {
    font-size: 25px;
}

.shelf, #shelf {
    display: flex;
    justify-content: center;
    background: linear-gradient(rgba(200, 200, 200, .4), rgba(100, 100, 100, .4));
    gap: 3px;
    height: 300px;
    /*position: relative;*/
    
    /*img {*/
    /*    height: 300px;*/
    /*    pointer-events: none;*/
    /*}*/
}

.album-option > img, .album-parts > img {
    height: 300px;
    pointer-events: none;
}

#shelf {
    justify-content: left;
    align-items: end;
    padding: 0 30px;
    border-bottom: solid 20px #332422;
    border-image: url("images/BG-shelf.jpg");
    background-image: url("images/BG-shelf.jpg");
    background-size: 100% 300px;
    z-index: -1;
}

.album-option, .music-player {
    cursor: pointer;
    border: solid 2px #0000;
    display: flex;
    align-items: end;
}

.music-player {
    width: calc(9/7 * 300px);
    
    img {
        width: inherit;
        height: inherit;
        user-select: none;
        pointer-events: none;
    }
}

.left-side {
    position: absolute;
    right: 0;
}

.album-option:hover {
    border: solid 2px yellow;
}

@keyframes move-out-shelf {
    from {
        transform: translate(calc(-50vw + 50% + 40px + 17*var(--spine-pos)), -300px);
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes transform-spine {
    0% {
        transform: scaleX(1);
        filter: var(--filter-brighten);
    }
    100% {
        transform: scaleX(0);
        filter: var(--filter-darken);
    }
}

@keyframes transform-front {
    0% {
        transform: scaleX(0);
        filter: var(--filter-darken);
    }
    100% {
        transform: scaleX(1) translateX(-10px);
        filter: var(--filter-brighten);
    }
}

@keyframes transform-back {
    0% {
        transform: translateX(-300px) scaleX(0);
    }
    100% {
        transform: translateX(-300px) scaleX(-1);
    }
}

@keyframes transform-front-flip {
    0% {
        transform: translateX(-10px) scaleX(1);
        z-index: 10;
        filter: var(--filter-brighten);
    }
    100% {
        transform: translateX(-10px) scaleX(-1);
        z-index: 9;
        filter: var(--filter-darken);
    }
}

@keyframes transform-spine-flip {
    0% {
        transform: translateX(0px) scaleX(0);
        z-index: 10;
        filter: var(--filter-darken);
    }
    50% {
        transform: translateX(150px) scaleX(1);
        z-index: 11;
        filter: var(--filter-brighten);
    }
    100% {
        transform: translateX(300px) scaleX(0);
        z-index: 10;
        filter: var(--filter-darken);
    }
}

@keyframes transform-back-flip {
    0% {
        transform: scaleX(-1);
        z-index: 9;
        filter: var(--filter-darken);
    }
    100% {
        transform: scaleX(1);
        z-index: 10;
        filter: var(--filter-brighten);
    }
}

@keyframes transform-front-back {
    0% {
        transform: translateX(-10px) scaleX(-1);
        z-index: 9;
        filter: var(--filter-darken);
    }
    100% {
        transform: translateX(-10px) scaleX(1);
        z-index: 10;
        filter: var(--filter-brighten);
    }
}

@keyframes transform-spine-back {
    0% {
        transform: translateX(300px) scaleX(0);
        z-index: 10;
        filter: var(--filter-darken);
    }
    50% {
        transform: translateX(150px) scaleX(1);
        z-index: 11;
        filter: var(--filter-brighten);
    }
    100% {
        transform: translateX(0px) scaleX(0);
        z-index: 10;
        filter: var(--filter-darken);
    }
}

@keyframes transform-back-back {
    0% {
        transform: scaleX(1);
        z-index: 10;
        filter: var(--filter-brighten);
    }
    100% {
        transform: scaleX(-1);
        z-index: 9;
        filter: var(--filter-darken);
    }
}


.album-option-chosen {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

.album-option-actions {
    width: 100px;
    background-color: cadetblue;
}

.album-parts {
    display: flex;
    width: 300px;
    /*border: solid 2px yellowgreen;*/
    animation: move-out-shelf 1s ease forwards;
    user-select: none;
    
    img {
        pointer-events: none;
    }
    
    .album-back {
        position: absolute;
        z-index: 9;
        transform-origin: 300px;
        animation: transform-back var(--amin-duration) ease forwards;
    }
    
    .album-spine {
        transform-origin: 0;
        z-index: 10;
        animation: transform-spine var(--amin-duration) ease forwards;
    }
    
    .album-front {
        transform-origin: 0;
        z-index: 11;
        animation: transform-front var(--amin-duration) ease forwards;
    }
    
    .album-spine-flip {
        transform-origin: 0;
        animation: transform-spine-flip var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .album-front-flip {
        transform-origin: 50%;
        animation: transform-front-flip var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .album-back-flip {
        position: absolute;
        z-index: 9;
        transform-origin: 50%;
        animation: transform-back-flip var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .album-spine-back {
        transform-origin: 0;
        animation: transform-spine-back var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .album-front-back {
        transform-origin: 50%;
        animation: transform-front-back var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .album-back-back {
        position: absolute;
        z-index: 10;
        transform-origin: 50%;
        animation: transform-back-back var(--amin-duration) var(--anim-timing) forwards;
    }
    
    .reverse {
        animation-direction: reverse;
    }
}

.album-parts-record {
    cursor: grab;
    animation: none;
    clip-path: none;
    position: absolute;
    z-index: 1;
    transform-origin: center;
    
    .album-side-a {
        z-index: 1;
    }
    
    .album-side-b {
        z-index: 0;
        position: absolute;
    }
    
    .album-side-a-flip {
        animation: transform-side-a 1s forwards;
    }
    
    .album-side-b-flip {
        position: absolute;
        animation: transform-side-b 1s forwards;
    }
    
    .album-side-a-back {
        animation: transform-side-b 1s forwards;
    }
    
    .album-side-b-back {
        position: absolute;
        animation: transform-side-a 1s forwards;
    }
}

.album-parts-record:active {
    cursor: grabbing;
}

.album-parts-record-taken {
    animation: move-out-sleeve 1s ease forwards;
}

@keyframes move-out-sleeve {
    from {
        transform: translateX(0);
        clip-path: inset(0 0 0 300px);
    }
    to {
        transform: translateX(150px);
        clip-path: inset(0 0 0 150px);
    }
}
/*@keyframes move-out-record {*/
/*    from {*/
/*        transform: translate(0, -300px);*/
/*        rotate: 0;*/
/*    }*/
/*    33% {*/
/*        transform: translate(300px, -300px);*/
/*        rotate: 0;*/
/*    }*/
/*    80% {*/
/*        rotate: 180deg;*/
/*    }*/
/*    to {*/
/*        transform: translate(300px, -300px);*/
/*        rotate: 180deg;*/
/*    }*/
/*}*/

@keyframes transform-side-a {
    from {
        transform: scaleX(1);
        z-index: 1;
        filter: var(--filter-brighten);
    }
    to {
        transform: scaleX(-1);
        z-index: 0;
        filter: var(--filter-darken);
    }
}

@keyframes transform-side-b {
    from {
        transform: scaleX(-1);
        z-index: 0;
        filter: var(--filter-darken);
    }
    to {
        transform: scaleX(1);
        z-index: 1;
        filter: var(--filter-brighten);
    }
}

/*.album-vinyl {*/
/*    animation: move-out-sleeve 2s ease-in-out forwards;*/
/*}*/

@keyframes turntable-enter {
    from {
        transform: translateX(100vw);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes turntable-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100vw);
    }
}

#sleeve-view {
    z-index: 1;
    position: relative;
}

#drag-view {
    z-index: 2;
    position: relative;
}

/*#player-view {*/
/*    z-index: 0;*/
/*    position: relative;*/
/*}*/

#now-playing {
    position: relative;
    z-index: 0;
    background-image: url("images/music/vinyl/turntable-topview.png");
    background-size: 386px 321px;
    width: 386px;
    height: 321px;
    cursor: pointer;
}

.music-player-enter {
    animation: turntable-enter 1s ease forwards;
}

.music-player-out {
    animation: turntable-out 1s ease forwards;
}

.music-player-out-first {
    animation: turntable-out 0s forwards;
}

@keyframes rot {
    from { rotate: 0; }
    to { rotate: 45deg; }
}


#music-player-needle {
    position: absolute;
    z-index: 3;
    width: 77px;
    /*height: 219px;*/
    height: 321px;
}

.music-player-needle {
    position: absolute;
    right: 40px;
    top: 55px;
    transform-origin: 72px 5px;
    /*animation: rot 1s alternate-reverse infinite;*/
    width: 77px;
    height: 219px;
    filter: drop-shadow(10px 10px 0 #0007);
}


@media only screen and (max-width: 768px) {
    .media-option-btn {
        display: block;
    }
}

@media only screen and (max-width: 324px) {
    
}