/**
 * Modern Audio Player - Animations Stylesheet
 * 
 * @package ModernAudioPlayer
 * @version 1.0.0
 * 
 * This file contains all animations and animation-related classes:
 * - Track list animations (fade, slide, batch transitions)
 * - Carousel cover animations (11 different modes)
 * - Song cover animations (slide-through mode)
 * - All @keyframes definitions
 */



/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

.modern-audio-player-wrapper {
    --play-btn-min: 50px;
    --play-btn-max: 65px;
    --small-btn-min: 40px;
    --small-btn-max: 45px;
    --track-separator-color: #eeeeee;

    --cover-open-duration: 0.9s;
    --cover-close-duration: 0.9s;
    --cover-transition-delay: 0.2s;
    --track-fade-duration: 0.28s;
    --track-slide-duration: 0.6s;
    --track-appear-duration: 0.35s;
    --batch-fade-duration: 0.4s;
    --carousel-height-transition: 0.9s;
    --carousel-slide-duration: 0.9s;
    --carousel-rotate-duration: 1s;
    --carousel-fade-duration: 1s;
    --carousel-flip-duration: 1.2s;
    --carousel-vinyl-duration: 1.5s;
    --carousel-door-duration: 1.2s;
    --carousel-zoom-duration: 1s;
    --carousel-glitch-duration: 0.8s;
    --carousel-wave-duration: 1.4s;
    --carousel-parallax-duration: 1.2s;
    --carousel-stack-duration: 1s;
    --carousel-vortex-duration: 1s;
    --button-hover-duration: 0.4s;
    --popup-transition: 0.3s;
    --settings-transition: 0.3s;
    --volume-slider-transition: 0.1s;

    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease-in: ease-in;

}

/* ============================================================================
   TRACK LIST ANIMATIONS
   ============================================================================ */

/**
 * Smooth Track List Animation Classes
 */
.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 for Animated Track Items
 */
.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 {
    transform: translateZ(0) !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/**
 * Track List Animation Keyframes
 */
@keyframes fadeDownSmoothly {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

@keyframes slideUpSmoothly {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes appearBottomSmoothly {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes batchFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* ============================================================================
   SONG COVER ANIMATIONS - Slide-Through Mode (Track List)
   ============================================================================ */

/**
 * Song Cover Animation - Disable on Play/Pause
 */
.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 !important;
}

/**
 * Song Cover Slide-Through Animation Classes
 */
.modern-audio-player-wrapper[data-cover-animation='slide-through'] .song-cover-expanded.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.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;
}

/**
 * Song Cover Slide-Through Keyframes
 */
@keyframes slideEnter {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideExit {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes firstCoverAppear {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ============================================================================
   CAROUSEL COVER ANIMATIONS - 11 Different Modes
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Slide-Through
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='slide-through'] .carousel-cover-item.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.exiting {
    animation: carouselSlideOut var(--carousel-slide-duration) var(--ease-smooth) forwards;
    z-index: 5;
    opacity: 1;
}

@keyframes carouselSlideIn {
    0% {
        transform: translate(150%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes carouselSlideOut {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-250%, -50%);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Rotate Y-Axis
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='rotate-y'] .carousel-cover-item.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.exiting {
    animation: rotateOutY var(--carousel-rotate-duration) var(--ease-in-out) forwards;
    z-index: 5;
}

@keyframes rotateOutY {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes rotateInY {
    0% {
        transform: translate(-50%, -50%) rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) rotateY(0deg);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Fade & Scale
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='fade-scale'] .carousel-cover-item.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.exiting {
    animation: fadeScaleOut var(--carousel-fade-duration) var(--ease-in) forwards;
    z-index: 5;
}

@keyframes fadeScaleOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
}

@keyframes fadeScaleIn {
    0% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: 3D Flip
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='flip-3d'] .carousel-cover-item.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.exiting {
    animation: flip3DOut var(--carousel-flip-duration) var(--ease-in-out) forwards;
    z-index: 5;
}

@keyframes flip3DOut {
    0% {
        transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(45deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(180deg) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes flip3DIn {
    0% {
        transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-90deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Vinyl Spin
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item.active {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item.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.exiting {
    animation: vinylSpinOut var(--carousel-vinyl-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes vinylSpinOut {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes vinylSpinIn {
    0% {
        transform: translate(-50%, -50%) rotate(-360deg) scale(0.3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Door Swing
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='door-swing'] .carousel-cover-item {
    transform-origin: left center;
}

.modern-audio-player-wrapper[data-cover-animation='door-swing'] .carousel-cover-item.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.exiting {
    animation: doorSwingOut var(--carousel-door-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes doorSwingOut {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-140%, -50%) rotateY(-120deg);
        opacity: 0;
    }
}

@keyframes doorSwingIn {
    0% {
        transform: translate(40%, -50%) rotateY(120deg);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) rotateY(0deg);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Zoom Blur
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='zoom-blur'] .carousel-cover-item.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.exiting {
    animation: zoomBlurOut var(--carousel-zoom-duration) var(--ease-in) forwards;
    z-index: 5;
}

@keyframes zoomBlurOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        filter: blur(20px);
        opacity: 0;
    }
}

@keyframes zoomBlurIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(20px);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Glitch Effect
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='glitch'] .carousel-cover-item.entering {
    animation: glitchIn var(--carousel-glitch-duration) steps(8) forwards;
    z-index: 20;
}

.modern-audio-player-wrapper[data-cover-animation='glitch'] .carousel-cover-item.exiting {
    animation: glitchOut var(--carousel-glitch-duration) steps(8) forwards;
    z-index: 5;
}

@keyframes glitchOut {
    0%, 100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    10% {
        transform: translate(-48%, -52%);
        opacity: 0.9;
    }
    20% {
        transform: translate(-52%, -48%);
        opacity: 0.8;
    }
    30% {
        transform: translate(-49%, -51%);
        opacity: 0.6;
    }
    40% {
        transform: translate(-51%, -49%);
        opacity: 0.4;
    }
    50% {
        transform: translate(-47%, -53%);
        opacity: 0.3;
    }
    60% {
        transform: translate(-53%, -47%);
        opacity: 0.2;
    }
    70% {
        transform: translate(-50%, -50%);
        opacity: 0.1;
    }
    80%, 100% {
        transform: translate(-50%, -50%);
        opacity: 0;
    }
}

@keyframes glitchIn {
    0% {
        transform: translate(-50%, -50%);
        opacity: 0;
    }
    10% {
        transform: translate(-48%, -52%);
        opacity: 0.1;
    }
    20% {
        transform: translate(-52%, -48%);
        opacity: 0.3;
    }
    30% {
        transform: translate(-49%, -51%);
        opacity: 0.5;
    }
    40% {
        transform: translate(-51%, -49%);
        opacity: 0.7;
    }
    50% {
        transform: translate(-47%, -53%);
        opacity: 0.8;
    }
    60% {
        transform: translate(-53%, -47%);
        opacity: 0.9;
    }
    70%, 100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Wave/Ripple
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='wave'] .carousel-cover-item.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.exiting {
    animation: waveOut var(--carousel-wave-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes waveOut {
    0% {
        transform: translate(-50%, -50%) rotateX(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) rotateX(20deg) scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(0deg) scale(0.7);
        opacity: 0;
    }
}

@keyframes waveIn {
    0% {
        transform: translate(-50%, -50%) rotateX(0deg) scale(1.3);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) rotateX(-20deg) scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(0deg) scale(1);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Parallax Layers
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='parallax'] .carousel-cover-item.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.exiting {
    animation: parallaxOut var(--carousel-parallax-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes parallaxOut {
    0% {
        transform: translate(-50%, -50%) translateZ(0px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translateZ(-500px);
        opacity: 0;
    }
}

@keyframes parallaxIn {
    0% {
        transform: translate(-50%, -50%) translateZ(500px);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) translateZ(0px);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Stack Shuffle
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='stack-shuffle'] .carousel-cover-item.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.exiting {
    animation: stackShuffleOut var(--carousel-stack-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes stackShuffleOut {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-30%, -50%) rotate(-15deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-150%, -50%) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes stackShuffleIn {
    0% {
        transform: translate(50%, -50%) rotate(15deg);
        opacity: 0;
    }
    50% {
        transform: translate(-30%, -50%) rotate(5deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Carousel Animation Mode: Vortex
   ---------------------------------------------------------------------------- */

.modern-audio-player-wrapper[data-cover-animation='vortex'] .carousel-cover-item.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.exiting {
    animation: vortexOut var(--carousel-vortex-duration) var(--ease-smooth) forwards;
    z-index: 5;
}

@keyframes vortexOut {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes vortexIn {
    0% {
        transform: translate(-50%, -50%) scale(3) rotate(-360deg);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================================================
   RESPONSIVE - Vinyl Spin Mode Tablet/Mobile Adjustments
   ============================================================================ */

@media (max-width: 768px) {
    .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item {
        position: absolute;
        top: 50%;
        left: 50%;
        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;
        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;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    .modern-audio-player-wrapper[data-cover-animation='vinyl-spin'] .carousel-cover-item.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.exiting {
        animation: vinylSpinOut var(--carousel-vinyl-duration) var(--ease-smooth) both;
        z-index: 5;
    }
}