/**
* Modern Audio Player - Animations Stylesheet
*
* @package ModernAudioPlayer
* @version 1.0.0
* @author SoulPixelCraft
*/
/* ============================================================================
TRACK LIST ANIMATIONS
============================================================================ */
.modern-audio-player-wrapper .track-item-wrapper.fading-down-smooth {
  animation: fadeDownSmoothly var(--track-fade-duration) var(--ease-out) forwards;
  pointer-events: none;
}
.modern-audio-player-wrapper .track-item-wrapper.sliding-up-smooth {
  animation: slideUpSmoothly var(--track-slide-duration) var(--ease-smooth);
}
.modern-audio-player-wrapper .track-item-wrapper.appearing-bottom-smooth {
  animation: appearBottomSmoothly var(--track-appear-duration) var(--ease-in);
}
.modern-audio-player-wrapper .track-item-wrapper.batch-fade-out-smooth {
  animation: batchFadeOut var(--batch-fade-duration) var(--ease-out) forwards;
  pointer-events: none;
}
/* Performance Optimization */
.modern-audio-player-wrapper .track-item-wrapper.fading-down-smooth,
.modern-audio-player-wrapper .track-item-wrapper.sliding-up-smooth,
.modern-audio-player-wrapper .track-item-wrapper.batch-fade-out-smooth,
.modern-audio-player-wrapper .track-item-wrapper.fading-out-smooth {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
@keyframes fadeDownSmoothly {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.95);
    transform: translateY(20px) scale(0.95);
  }
}
@keyframes slideUpSmoothly {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes appearBottomSmoothly {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes batchFadeOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.95) translateY(10px);
    transform: scale(0.95) translateY(10px);
  }
}
/* ============================================================================
SONG COVER ANIMATIONS - Slide-Through Mode
============================================================================ */
.modern-audio-player-wrapper.playing .track-item-wrapper.active .song-cover-expanded img,
.modern-audio-player-wrapper.paused .track-item-wrapper.active .song-cover-expanded img {
  animation: none;
}
.modern-audio-player-wrapper[data-cover-animation='slide-through'] .song-cover-expanded[data-animation="entering"] {
  animation: slideEnter var(--cover-close-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='slide-through'] .song-cover-expanded[data-animation="exiting"] {
  animation: slideExit var(--cover-close-duration) var(--ease-smooth) forwards;
  z-index: 10;
}
.modern-audio-player-wrapper[data-cover-animation='slide-through']:not(.has-open-cover)
.track-item-wrapper:first-child.cover-open
.song-cover-expanded {
  animation: firstCoverAppear 0.6s var(--ease-smooth) forwards;
}
@keyframes slideEnter {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideExit {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}
@keyframes firstCoverAppear {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0) scale(0.95);
    transform: translateX(0) scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
}
/* ============================================================================
CAROUSEL COVER ANIMATIONS
============================================================================ */
/* Slide-Through */
.modern-audio-player-wrapper[data-cover-animation='slide-through'] .carousel-cover-item[data-animation="entering"] {
  animation: carouselSlideIn var(--carousel-slide-duration) var(--ease-smooth) forwards;
  z-index: 20;
  opacity: 1;
}
.modern-audio-player-wrapper[data-cover-animation='slide-through'] .carousel-cover-item[data-animation="exiting"] {
  animation: carouselSlideOut var(--carousel-slide-duration) var(--ease-smooth) forwards;
  z-index: 5;
  opacity: 1;
}
@keyframes carouselSlideIn {
  0% {
    -webkit-transform: translate(150%, -50%);
    transform: translate(150%, -50%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes carouselSlideOut {
  0% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-250%, -50%);
    transform: translate(-250%, -50%);
    opacity: 1;
  }
}
/* Rotate Y-Axis */
.modern-audio-player-wrapper[data-cover-animation='rotate-y'] .carousel-cover-item[data-animation="entering"] {
  animation: rotateInY var(--carousel-rotate-duration) var(--ease-in-out) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='rotate-y'] .carousel-cover-item[data-animation="exiting"] {
  animation: rotateOutY var(--carousel-rotate-duration) var(--ease-in-out) forwards;
  z-index: 5;
}
@keyframes rotateOutY {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateY(90deg);
    transform: translate(-50%, -50%) rotateY(90deg);
    opacity: 1;
  }
}
@keyframes rotateInY {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateY(-90deg);
    transform: translate(-50%, -50%) rotateY(-90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
  }
}
/* Fade & Scale */
.modern-audio-player-wrapper[data-cover-animation='fade-scale'] .carousel-cover-item[data-animation="entering"] {
  animation: fadeScaleIn var(--carousel-fade-duration) var(--ease-out) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='fade-scale'] .carousel-cover-item[data-animation="exiting"] {
  animation: fadeScaleOut var(--carousel-fade-duration) var(--ease-in) forwards;
  z-index: 5;
}
@keyframes fadeScaleOut {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
}
@keyframes fadeScaleIn {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
/* 3D Flip */
.modern-audio-player-wrapper[data-cover-animation='flip-3d'] .carousel-cover-item[data-animation="entering"] {
  animation: flip3DIn var(--carousel-flip-duration) var(--ease-in-out) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='flip-3d'] .carousel-cover-item[data-animation="exiting"] {
  animation: flip3DOut var(--carousel-flip-duration) var(--ease-in-out) forwards;
  z-index: 5;
}
@keyframes flip3DOut {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(90deg) rotateY(45deg);
    transform: translate(-50%, -50%) rotateX(90deg) rotateY(45deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(180deg) rotateY(90deg);
    transform: translate(-50%, -50%) rotateX(180deg) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flip3DIn {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-90deg);
    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-90deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg);
    transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }
}
/* Vinyl Spin */
.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item {
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item[data-active="true"] {
  opacity: 1;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item[data-animation="entering"] {
  animation: vinylSpinIn var(--carousel-vinyl-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item[data-animation="exiting"] {
  animation: vinylSpinOut var(--carousel-vinyl-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes vinylSpinOut {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(0.3);
    transform: translate(-50%, -50%) rotate(360deg) scale(0.3);
    opacity: 0;
  }
}
@keyframes vinylSpinIn {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg) scale(0.3);
    transform: translate(-50%, -50%) rotate(-360deg) scale(0.3);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
}
/* Door Swing */
.modern-audio-player-wrapper[data-cover-animation='door-swing'] .carousel-cover-item {
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.modern-audio-player-wrapper[data-cover-animation='door-swing'] .carousel-cover-item[data-animation="entering"] {
  animation: doorSwingIn var(--carousel-door-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='door-swing'] .carousel-cover-item[data-animation="exiting"] {
  animation: doorSwingOut var(--carousel-door-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes doorSwingOut {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-140%, -50%) rotateY(-120deg);
    transform: translate(-140%, -50%) rotateY(-120deg);
    opacity: 0;
  }
}
@keyframes doorSwingIn {
  0% {
    -webkit-transform: translate(40%, -50%) rotateY(120deg);
    transform: translate(40%, -50%) rotateY(120deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
  }
}
/* Zoom Blur */
.modern-audio-player-wrapper[data-cover-animation='zoom-blur'] .carousel-cover-item[data-animation="entering"] {
  animation: zoomBlurIn var(--carousel-zoom-duration) var(--ease-out) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='zoom-blur'] .carousel-cover-item[data-animation="exiting"] {
  animation: zoomBlurOut var(--carousel-zoom-duration) var(--ease-in) forwards;
  z-index: 5;
}
@keyframes zoomBlurOut {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
  }
}
@keyframes zoomBlurIn {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
/* Glitch Effect */
.modern-audio-player-wrapper[data-cover-animation='glitch'] .carousel-cover-item[data-animation="entering"] {
  animation: glitchIn var(--carousel-glitch-duration) steps(8) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='glitch'] .carousel-cover-item[data-animation="exiting"] {
  animation: glitchOut var(--carousel-glitch-duration) steps(8) forwards;
  z-index: 5;
}
@keyframes glitchOut {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  10% {
    -webkit-transform: translate(-48%, -52%);
    transform: translate(-48%, -52%);
    opacity: 0.9;
  }
  20% {
    -webkit-transform: translate(-52%, -48%);
    transform: translate(-52%, -48%);
    opacity: 0.8;
  }
  30% {
    -webkit-transform: translate(-49%, -51%);
    transform: translate(-49%, -51%);
    opacity: 0.6;
  }
  40% {
    -webkit-transform: translate(-51%, -49%);
    transform: translate(-51%, -49%);
    opacity: 0.4;
  }
  50% {
    -webkit-transform: translate(-47%, -53%);
    transform: translate(-47%, -53%);
    opacity: 0.3;
  }
  60% {
    -webkit-transform: translate(-53%, -47%);
    transform: translate(-53%, -47%);
    opacity: 0.2;
  }
  70% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0.1;
  }
  80%, 100% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
@keyframes glitchIn {
  0% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  10% {
    -webkit-transform: translate(-48%, -52%);
    transform: translate(-48%, -52%);
    opacity: 0.1;
  }
  20% {
    -webkit-transform: translate(-52%, -48%);
    transform: translate(-52%, -48%);
    opacity: 0.3;
  }
  30% {
    -webkit-transform: translate(-49%, -51%);
    transform: translate(-49%, -51%);
    opacity: 0.5;
  }
  40% {
    -webkit-transform: translate(-51%, -49%);
    transform: translate(-51%, -49%);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: translate(-47%, -53%);
    transform: translate(-47%, -53%);
    opacity: 0.8;
  }
  60% {
    -webkit-transform: translate(-53%, -47%);
    transform: translate(-53%, -47%);
    opacity: 0.9;
  }
  70%, 100% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
/* Wave/Ripple */
.modern-audio-player-wrapper[data-cover-animation='wave'] .carousel-cover-item[data-animation="entering"] {
  animation: waveIn var(--carousel-wave-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='wave'] .carousel-cover-item[data-animation="exiting"] {
  animation: waveOut var(--carousel-wave-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes waveOut {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1);
    transform: translate(-50%, -50%) rotateX(0deg) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(20deg) scale(0.9);
    transform: translate(-50%, -50%) rotateX(20deg) scale(0.9);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(0.7);
    transform: translate(-50%, -50%) rotateX(0deg) scale(0.7);
    opacity: 0;
  }
}
@keyframes waveIn {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1.3);
    transform: translate(-50%, -50%) rotateX(0deg) scale(1.3);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(-20deg) scale(1.1);
    transform: translate(-50%, -50%) rotateX(-20deg) scale(1.1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1);
    transform: translate(-50%, -50%) rotateX(0deg) scale(1);
    opacity: 1;
  }
}
/* Parallax Layers */
.modern-audio-player-wrapper[data-cover-animation='parallax'] .carousel-cover-item[data-animation="entering"] {
  animation: parallaxIn var(--carousel-parallax-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='parallax'] .carousel-cover-item[data-animation="exiting"] {
  animation: parallaxOut var(--carousel-parallax-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes parallaxOut {
  0% {
    -webkit-transform: translate(-50%, -50%) translateZ(0px);
    transform: translate(-50%, -50%) translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) translateZ(-500px);
    transform: translate(-50%, -50%) translateZ(-500px);
    opacity: 0;
  }
}
@keyframes parallaxIn {
  0% {
    -webkit-transform: translate(-50%, -50%) translateZ(500px);
    transform: translate(-50%, -50%) translateZ(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) translateZ(0px);
    transform: translate(-50%, -50%) translateZ(0px);
    opacity: 1;
  }
}
/* Stack Shuffle */
.modern-audio-player-wrapper[data-cover-animation='stack-shuffle'] .carousel-cover-item[data-animation="entering"] {
  animation: stackShuffleIn var(--carousel-stack-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='stack-shuffle'] .carousel-cover-item[data-animation="exiting"] {
  animation: stackShuffleOut var(--carousel-stack-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes stackShuffleOut {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-30%, -50%) rotate(-15deg);
    transform: translate(-30%, -50%) rotate(-15deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-150%, -50%) rotate(-45deg);
    transform: translate(-150%, -50%) rotate(-45deg);
    opacity: 0;
  }
}
@keyframes stackShuffleIn {
  0% {
    -webkit-transform: translate(50%, -50%) rotate(15deg);
    transform: translate(50%, -50%) rotate(15deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-30%, -50%) rotate(5deg);
    transform: translate(-30%, -50%) rotate(5deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
}
/* Vortex */
.modern-audio-player-wrapper[data-cover-animation='vortex'] .carousel-cover-item[data-animation="entering"] {
  animation: vortexIn var(--carousel-vortex-duration) var(--ease-smooth) forwards;
  z-index: 20;
}
.modern-audio-player-wrapper[data-cover-animation='vortex'] .carousel-cover-item[data-animation="exiting"] {
  animation: vortexOut var(--carousel-vortex-duration) var(--ease-smooth) forwards;
  z-index: 5;
}
@keyframes vortexOut {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0) rotate(360deg);
    transform: translate(-50%, -50%) scale(0) rotate(360deg);
    opacity: 0;
  }
}
@keyframes vortexIn {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(3) rotate(-360deg);
    transform: translate(-50%, -50%) scale(3) rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}
/* ============================================================================
RESPONSIVE - Vinyl Spin Mobile
============================================================================ */
@media (max-width: 768px) {
  .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item.active {
    opacity: 1;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item[data-animation="entering"] {
    animation: vinylSpinIn var(--carousel-vinyl-duration) var(--ease-smooth) both;
    z-index: 20;
  }
  .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item[data-animation="exiting"] {
    animation: vinylSpinOut var(--carousel-vinyl-duration) var(--ease-smooth) both;
    z-index: 5;
  }
}