/**
 * 主题: 纸鸢图床ZIH
 * 开发者: 白木
 * 开发者的博客: https://gl.baimu.live/
 *
 * ✨ 动画效果样式表
 * 使用 transform 和 opacity 进行动画，开启硬件加速
 *
 * @package Zhiyuan_Imgzus
 */

/* ============================================
   🎬 基础动画定义
   ============================================ */

/* 🔄 渐显动画 */
@keyframes zhiyuan-fadeIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 🔄 渐显 - 从左 */
@keyframes zhiyuan-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 🔄 渐显 - 从右 */
@keyframes zhiyuan-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 🔄 缩放渐显 */
@keyframes zhiyuan-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ✨ 霓虹脉冲发光 */
@keyframes zhiyuan-neonPulse {
    0%, 100% {
        box-shadow: 0 0 0.3125rem var(--neon-primary),
                    0 0 0.625rem var(--neon-primary),
                    0 0 1.25rem var(--neon-primary);
    }
    50% {
        box-shadow: 0 0 0.625rem var(--neon-primary),
                    0 0 1.25rem var(--neon-primary),
                    0 0 2.5rem var(--neon-primary);
    }
}

/* ✨ 文字霓虹闪烁 */
@keyframes zhiyuan-textGlow {
    0%, 100% {
        text-shadow: 0 0 0.5rem rgba(14, 165, 233, 0.8),
                     0 0 1rem rgba(14, 165, 233, 0.5);
    }
    50% {
        text-shadow: 0 0 1rem rgba(14, 165, 233, 1),
                     0 0 2rem rgba(14, 165, 233, 0.8);
    }
}

/* 🌊 浮动动画 */
@keyframes zhiyuan-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.375rem);
    }
}

/* 🎯 脉冲圆环 */
@keyframes zhiyuan-ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


/* ============================================
   🎨 动画类
   ============================================ */

/* 🔄 渐显入场 */
.fade-in {
    animation: zhiyuan-fadeIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: transform, opacity;
}

.fade-in-left {
    animation: zhiyuan-fadeInLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: transform, opacity;
}

.fade-in-right {
    animation: zhiyuan-fadeInRight 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: transform, opacity;
}

.scale-in {
    animation: zhiyuan-scaleIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: transform, opacity;
}

/* ✨ 霓虹发光 */
.neon-glow {
    animation: zhiyuan-neonPulse 2s ease-in-out infinite;
    will-change: box-shadow;
}

.neon-text-glow {
    animation: zhiyuan-textGlow 2s ease-in-out infinite;
    will-change: text-shadow;
}

/* 🌊 浮动 */
.float {
    animation: zhiyuan-float 3s ease-in-out infinite;
    will-change: transform;
}


/* ============================================
   🖼️ 图片卡片动画增强
   ============================================ */

/* ============================================
   🖼️ 网格卡片 - 向上渐显
   ============================================ */

.gallery-grid .image-card,
.my-images-grid .manage-card {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

.gallery-grid .image-card.is-revealed,
.my-images-grid .manage-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.gallery-grid .image-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.gallery-grid .image-card:nth-child(2).is-revealed { transition-delay: 50ms; }
.gallery-grid .image-card:nth-child(3).is-revealed { transition-delay: 100ms; }
.gallery-grid .image-card:nth-child(4).is-revealed { transition-delay: 150ms; }
.gallery-grid .image-card:nth-child(5).is-revealed { transition-delay: 200ms; }
.gallery-grid .image-card:nth-child(6).is-revealed { transition-delay: 250ms; }
.gallery-grid .image-card:nth-child(7).is-revealed { transition-delay: 300ms; }
.gallery-grid .image-card:nth-child(8).is-revealed { transition-delay: 350ms; }
.gallery-grid .image-card:nth-child(9).is-revealed { transition-delay: 400ms; }
.gallery-grid .image-card:nth-child(10).is-revealed { transition-delay: 450ms; }
.gallery-grid .image-card:nth-child(11).is-revealed { transition-delay: 500ms; }
.gallery-grid .image-card:nth-child(12).is-revealed { transition-delay: 550ms; }

.my-images-grid .manage-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.my-images-grid .manage-card:nth-child(2).is-revealed { transition-delay: 50ms; }
.my-images-grid .manage-card:nth-child(3).is-revealed { transition-delay: 100ms; }
.my-images-grid .manage-card:nth-child(4).is-revealed { transition-delay: 150ms; }
.my-images-grid .manage-card:nth-child(5).is-revealed { transition-delay: 200ms; }
.my-images-grid .manage-card:nth-child(6).is-revealed { transition-delay: 250ms; }
.my-images-grid .manage-card:nth-child(7).is-revealed { transition-delay: 300ms; }
.my-images-grid .manage-card:nth-child(8).is-revealed { transition-delay: 350ms; }

.gallery-grid .image-card:hover .card-media img {
    transform: scale(1.05);
}

.my-images-grid .manage-card:hover .card-media img {
    transform: scale(1.05);
}

/* ============================================
   🏷️ 分类筛选 & 多选工具栏 - 向上渐显
   ============================================ */

.gallery-section .category-filter,
.gallery-section .bulk-select-bar {
    animation: zhiyuan-fadeIn 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
    will-change: transform, opacity;
}

.gallery-section .bulk-select-bar {
    animation-delay: 80ms;
}

.bulk-select-bar__idle.is-switching-in,
.bulk-select-bar__active.is-switching-in {
    animation: zhiyuan-fadeIn 0.45s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ============================================
   🧭 导航栏 & 浮动按钮 - 向上渐显
   ============================================ */

.site-header,
.admin-wheel,
.footer-trigger {
    animation: zhiyuan-fadeIn 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
    will-change: transform, opacity;
}

.admin-wheel {
    animation-delay: 100ms;
}

.footer-trigger {
    animation-delay: 160ms;
}

/* 📸 卡片悬停 - 提升效果 */
.gallery-grid .image-card {
    margin-bottom: 0.5rem;
}

.gallery-grid .image-card.is-revealed {
    transition:
        opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-grid .image-card.is-revealed:hover {
    transform: translateY(-0.5rem);
}

/* 📸 遮罩渐显 */
.gallery-grid .image-card .image-overlay {
    transition: opacity 0.3s ease;
}


/* ============================================
   💡 模态框动画增强
   ============================================ */

/* 🔍 搜索面板 - 弹出 */
.search-panel.active .search-modal {
    animation: zhiyuan-scaleIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 💡 灯箱 - 渐显 */
.lightbox.active {
    animation: zhiyuan-fadeIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 📝 编辑弹窗 - 缩放渐显 */
.edit-modal.active .modal-container {
    animation: zhiyuan-scaleIn 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 🔔 Toast提示 - 弹入 */
.toast.show {
    animation: zhiyuan-fadeIn 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}


/* ============================================
   🎯 性能优化动画属性
   ============================================ */

/* 使用 transform 和 opacity 进行动画 - 触发GPU加速 */
.optimized-animation {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 🔘 霓虹按钮增强 */
.neon-border {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.neon-border:active {
    transform: scale(0.97);
}

/* 🎡 轮盘菜单 - 链式入场 */
.wheel-menu.active .wheel-item:nth-child(1) { animation: zhiyuan-fadeInLeft 0.3s 0ms forwards; }
.wheel-menu.active .wheel-item:nth-child(2) { animation: zhiyuan-fadeInLeft 0.3s 50ms forwards; }
.wheel-menu.active .wheel-item:nth-child(3) { animation: zhiyuan-fadeInLeft 0.3s 100ms forwards; }
.wheel-menu.active .wheel-item:nth-child(4) { animation: zhiyuan-fadeInLeft 0.3s 150ms forwards; }
.wheel-menu.active .wheel-item:nth-child(5) { animation: zhiyuan-fadeInLeft 0.3s 200ms forwards; }

.wheel-item {
    opacity: 0;
    will-change: transform, opacity;
}


/* ============================================
   ⚡ 低性能 / 减少动态 - 全面关闭动画
   ============================================ */

html.no-animations *,
html.no-animations *::before,
html.no-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.no-animations .gallery-grid .image-card,
html.no-animations .my-images-grid .manage-card,
html.no-animations .gallery-section .category-filter,
html.no-animations .gallery-section .bulk-select-bar,
html.no-animations .site-header,
html.no-animations .admin-wheel,
html.no-animations .footer-trigger {
    opacity: 1 !important;
    transform: none !important;
}

html.no-animations .wheel-item {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .gallery-grid .image-card,
    .my-images-grid .manage-card,
    .gallery-section .category-filter,
    .gallery-section .bulk-select-bar,
    .site-header,
    .admin-wheel,
    .footer-trigger {
        opacity: 1 !important;
        transform: none !important;
    }

    .wheel-item {
        opacity: 1 !important;
    }

    .neon-glow,
    .neon-text-glow,
    .float {
        animation: none !important;
    }

    .bulk-select-bar__idle.is-switching-in,
    .bulk-select-bar__active.is-switching-in {
        animation: none !important;
    }
}