/**
 * Card Animation Configuration
 *
 * This file contains all configurable card animation settings for the music app.
 * Modify these values to customize the hover bounce animation behavior.
 *
 * NOTE: This file serves as fallback if JSON-based system fails to load.
 */

/* ===== ANIMATION KEYFRAMES ===== */

/**
 * Bouncy hover animation for cards (Default)
 * Creates a playful bounce effect when hovering over audio cards
 */
@keyframes hoverBounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(-6px); }
    40% { transform: translateY(-1px); }
    60% { transform: translateY(-4px); }
    80% { transform: translateY(-1.5px); }
    100% { transform: translateY(-2px); }
}

/**
 * Bouncy animation keyframe (used by JSON loader)
 */
@keyframes bouncyAnimation {
    0% { transform: translateY(0); }
    20% { transform: translateY(-6px); }
    40% { transform: translateY(-1px); }
    60% { transform: translateY(-4px); }
    80% { transform: translateY(-1.5px); }
    100% { transform: translateY(-2px); }
}

/* ===== ANIMATION CONFIGURATION ===== */

:root {
    /* Animation timing */
    --card-hover-duration: 0.6s;
    --card-hover-timing: ease-out;

    /* Animation effects */
    --card-hover-animation: hoverBounce var(--card-hover-duration) var(--card-hover-timing) forwards;

    /* Shadow effects */
    --card-default-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    --card-hover-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
    --card-no-cover-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);

    /* Background colors */
    --card-default-bg: rgba(255, 255, 255, 0.2);
    --card-hover-bg: #ffffff;

    /* Transition effects */
    --card-transition-duration: 0.18s;
    --card-transition-timing: ease-out;
    --card-transition: box-shadow var(--card-transition-duration) var(--card-transition-timing),
                       background-color var(--card-transition-duration) var(--card-transition-timing);
}

/* ===== ALTERNATIVE ANIMATION PRESETS ===== */

/* Subtle bounce - less dramatic movement */
@keyframes subtleBounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(-3px); }
    40% { transform: translateY(-0.5px); }
    60% { transform: translateY(-2px); }
    80% { transform: translateY(-0.75px); }
    100% { transform: translateY(-1px); }
}

/* Strong bounce - more dramatic movement */
@keyframes strongBounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(-10px); }
    40% { transform: translateY(-2px); }
    60% { transform: translateY(-6px); }
    80% { transform: translateY(-2.5px); }
    100% { transform: translateY(-3px); }
}

/* Quick bounce - faster animation */
@keyframes quickBounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    50% { transform: translateY(-1px); }
    75% { transform: translateY(-3px); }
    100% { transform: translateY(-2px); }
}

/* Smooth lift - no bounce, just smooth elevation */
@keyframes smoothLift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* Scale bounce - combines scale and movement */
@keyframes scaleBounce {
    0% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-6px) scale(1.02); }
    40% { transform: translateY(-1px) scale(1.015); }
    60% { transform: translateY(-4px) scale(1.02); }
    80% { transform: translateY(-1.5px) scale(1.01); }
    100% { transform: translateY(-2px) scale(1.015); }
}

/* ===== USAGE INSTRUCTIONS ===== */

/*
 * To change the animation style, update --card-hover-animation in :root:
 *
 * Examples:
 * --card-hover-animation: subtleBounce 0.6s ease-out forwards;
 * --card-hover-animation: strongBounce 0.6s ease-out forwards;
 * --card-hover-animation: quickBounce 0.4s ease-out forwards;
 * --card-hover-animation: smoothLift 0.3s ease-out forwards;
 * --card-hover-animation: scaleBounce 0.6s ease-out forwards;
 *
 * To customize timing:
 * --card-hover-duration: 0.5s;  (faster)
 * --card-hover-duration: 0.8s;  (slower)
 *
 * To customize easing:
 * --card-hover-timing: ease-in;
 * --card-hover-timing: ease-in-out;
 * --card-hover-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55);  (elastic bounce)
 */