/* Dynamic Island Apple Spring Liquid Physics Keyframe Animations */
@keyframes diLiquidExpand {
    0% {
        width: 80px;
        height: 26px;
        border-radius: 9999px;
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scaleY(0.6) scaleX(0.7);
    }
    45% {
        width: calc(var(--di-target-w, 380px) + 26px);
        height: 54px;
        border-radius: 18px;
        opacity: 1;
        transform: translateX(-50%) translateY(3px) scaleY(1.08) scaleX(1.04);
    }
    70% {
        width: calc(var(--di-target-w, 380px) - 12px);
        height: 44px;
        border-radius: 28px;
        transform: translateX(-50%) translateY(-1px) scaleY(0.96) scaleX(0.98);
    }
    100% {
        width: var(--di-target-w, 380px);
        height: 48px;
        border-radius: 24px;
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes diLiquidCollapse {
    0% {
        width: var(--di-target-w, 380px);
        height: 48px;
        border-radius: 24px;
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    30% {
        width: calc(var(--di-target-w, 380px) + 14px);
        height: 40px;
        border-radius: 30px;
        transform: translateX(-50%) translateY(-2px) scaleY(0.88) scaleX(1.05);
    }
    100% {
        width: 60px;
        height: 24px;
        border-radius: 9999px;
        opacity: 0;
        transform: translateX(-50%) translateY(-24px) scale(0.35);
    }
}

.di-liquid-expanding {
    animation: diLiquidExpand 0.52s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards !important;
    pointer-events: auto !important;
}

.di-liquid-collapsing {
    animation: diLiquidCollapse 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none !important;
}