/* animations.css - 純動畫關鍵影格定義 (物理質感修正版) */

/* 🟢 核心修正：讓卡片從底部透明處彈入，並帶有微小的縮放感 */
@keyframes openingPull {
    0% { 
        transform: translate3d(0, 60px, 0) scale(0.92); 
        opacity: 0; 
    }
    60% { 
        transform: translate3d(0, -10px, 0) scale(1.02); 
        opacity: 1; 
    } 
    100% { 
        transform: translate3d(0, 0, 0) scale(1); 
        opacity: 1; 
    }
}

/* 置底卡片的專用動畫 */
@keyframes openingPullFixed {
    0% { 
        transform: translate3d(-50%, 60px, 0) scale(0.92); 
        opacity: 0; 
    }
    60% { 
        transform: translate3d(-50%, -10px, 0) scale(1.02); 
        opacity: 1; 
    } 
    100% { 
        transform: translate3d(-50%, 0, 0) scale(1); 
        opacity: 1; 
    }
}

.opening-pull { 
    animation: openingPull 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) both; 
}

.opening-pull-fixed { 
    animation: openingPullFixed 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) both; 
}

@keyframes snapIn {
    0% { transform: translate3d(0, -100px, 0); }
    40% { transform: translate3d(0, 12px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes pianoWave {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 8px, 0); } 
    100% { transform: translate3d(0, 0, 0); }
}

.piano-ripple { 
    animation: pianoWave 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}