/* ===== Material Design 动画系统 ===== */

/* Material Design 时间曲线 */
:root {
    --md-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --md-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --md-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --md-ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
    --md-duration-short: 150ms;
    --md-duration-medium: 300ms;
    --md-duration-long: 500ms;
}

/* ===== 页面进入动画 ===== */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 内容淡入 ===== */
@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== 卡片进入 ===== */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== 列表项进入 ===== */
@keyframes listItemEnter {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== 弹性进入 ===== */
@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== 浮动效果 ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* ===== 脉冲 ===== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===== 旋转加载 ===== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== 骨架屏闪烁 ===== */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* ===== 波纹效果 ===== */
@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ===== 阴影提升 ===== */
@keyframes elevate {
    from {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    to {
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
}

/* ===== 应用类 ===== */

/* 页面过渡 */
.page-transition {
    animation: pageEnter var(--md-duration-medium) var(--md-ease-decelerate);
}

/* 内容动画 */
.md-fade-in {
    animation: contentFadeIn var(--md-duration-medium) var(--md-ease-decelerate) both;
}

/* 卡片动画 */
.md-card {
    animation: cardReveal var(--md-duration-medium) var(--md-ease-decelerate) both;
    transition: transform var(--md-duration-short) var(--md-ease-standard),
                box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.md-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.md-card:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 列表项 */
.md-list-item {
    animation: listItemEnter var(--md-duration-medium) var(--md-ease-decelerate) both;
    transition: background var(--md-duration-short) var(--md-ease-standard);
}

.md-list-item:hover {
    background: rgba(0,0,0,0.04);
}

/* 弹性进入 */
.md-elastic {
    animation: elasticIn var(--md-duration-long) var(--md-ease-standard) both;
}

/* 悬浮效果 */
.md-hover-lift {
    transition: transform var(--md-duration-short) var(--md-ease-standard),
                box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.md-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

/* 按钮效果 */
.md-btn {
    transition: transform var(--md-duration-short) var(--md-ease-standard),
                background var(--md-duration-short) var(--md-ease-standard),
                box-shadow var(--md-duration-short) var(--md-ease-standard);
    position: relative;
    overflow: hidden;
}

.md-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.md-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 波纹容器 */
.md-ripple {
    position: relative;
    overflow: hidden;
}

.md-ripple::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,0,0,0.08) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.4s var(--md-ease-decelerate),
                opacity 0.4s var(--md-ease-standard);
}

.md-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* 延迟类 */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }
.delay-7 { animation-delay: 350ms; }
.delay-8 { animation-delay: 400ms; }

/* 骨架屏 */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(0,0,0,0.04) 25%, 
        rgba(0,0,0,0.08) 50%, 
        rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* 加载旋转 */
.loading-spinner {
    animation: spin 0.8s linear infinite;
}

/* 浮动元素 */
.float {
    animation: float 3s ease-in-out infinite;
}

/* 脉冲元素 */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ===== 侧边栏动画 ===== */
.sidebar-enter {
    animation: slideInLeft var(--md-duration-medium) var(--md-ease-decelerate);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ===== 模态框动画 ===== */
.modal-enter {
    animation: modalIn var(--md-duration-medium) var(--md-ease-decelerate);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== Toast动画 ===== */
.toast-enter {
    animation: toastIn var(--md-duration-medium) var(--md-ease-decelerate);
}

.toast-exit {
    animation: toastOut var(--md-duration-short) var(--md-ease-accelerate);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.9);
    }
}

/* ===== 淡入淡出 ===== */
.fade-enter {
    animation: fadeIn var(--md-duration-medium) var(--md-ease-decelerate);
}

.fade-exit {
    animation: fadeOut var(--md-duration-short) var(--md-ease-accelerate);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ===== 缩放 ===== */
.scale-enter {
    animation: scaleIn var(--md-duration-medium) var(--md-ease-decelerate);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== 响应式动画 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}