/**
 * 文章封面图片动态Hover效果样式 v2.0
 * 
 * 重要设计原则：
 * - 绝不修改 .entry-media 或 .media-img 的基础样式
 * - 所有效果仅在 :hover 状态下生效
 * - 避免 transform/backface-visibility 等硬件加速属性造成渲染异常
 * - 仅通过增加 class 前缀来限定作用范围
 */

/* ============================================
   效果1: 缩放效果 (zoom)
   所有缩放效果仅在 hover 时生效，不影响默认状态
   ============================================ */

/* 缩放 - 轻微 */
.thumb-effect-zoom-soft .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-zoom-soft .entry-media:hover .media-img {
    transform: scale(1.05) !important;
}

/* 缩放 - 中等 */
.thumb-effect-zoom-normal .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-zoom-normal .entry-media:hover .media-img {
    transform: scale(1.1) !important;
}

/* 缩放 - 强烈 */
.thumb-effect-zoom-strong .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-zoom-strong .entry-media:hover .media-img {
    transform: scale(1.15) !important;
}

/* ============================================
   效果2: 旋转效果 (rotate)
   ============================================ */

/* 旋转 - 轻微 */
.thumb-effect-rotate-soft .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-rotate-soft .entry-media:hover .media-img {
    transform: scale(1.05) rotate(2deg) !important;
}

/* 旋转 - 中等 */
.thumb-effect-rotate-normal .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-rotate-normal .entry-media:hover .media-img {
    transform: scale(1.08) rotate(3deg) !important;
}

/* 旋转 - 强烈 */
.thumb-effect-rotate-strong .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-rotate-strong .entry-media:hover .media-img {
    transform: scale(1.1) rotate(5deg) !important;
}

/* ============================================
   效果3: 光泽扫过 (shine)
   仅在 shine class 下生效
   ============================================ */

.thumb-effect-shine-soft .entry-media,
.thumb-effect-shine-normal .entry-media,
.thumb-effect-shine-strong .entry-media,
.thumb-effect-combo-zoom-shine .entry-media,
.thumb-effect-combo-all .entry-media {
    position: relative;
    overflow: hidden;
}

.thumb-effect-shine-soft .entry-media::before,
.thumb-effect-shine-normal .entry-media::before,
.thumb-effect-shine-strong .entry-media::before,
.thumb-effect-combo-zoom-shine .entry-media::before,
.thumb-effect-combo-all .entry-media::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    z-index: 2;
    pointer-events: none;
    transition: none;
}

/* 光泽 - 轻微 */
.thumb-effect-shine-soft .entry-media:hover::before {
    animation: thumb-shine-soft 0.8s ease forwards;
}

/* 光泽 - 中等 */
.thumb-effect-shine-normal .entry-media:hover::before {
    animation: thumb-shine-normal 1s ease forwards;
}

/* 光泽 - 强烈 */
.thumb-effect-shine-strong .entry-media:hover::before {
    animation: thumb-shine-strong 1.2s ease forwards;
}

@keyframes thumb-shine-soft {
    0% { left: -100%; }
    100% { left: 150%; }
}

@keyframes thumb-shine-normal {
    0% { left: -100%; }
    50% { left: 150%; }
    100% { left: 150%; }
}

@keyframes thumb-shine-strong {
    0% { left: -100%; opacity: 1; }
    50% { left: 150%; opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

/* ============================================
   效果4: 上浮阴影 (lift)
   ============================================ */

/* 上浮 - 轻微 */
.thumb-effect-lift-soft .post-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.thumb-effect-lift-soft .post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 上浮 - 中等 */
.thumb-effect-lift-normal .post-item {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.thumb-effect-lift-normal .post-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 上浮 - 强烈 */
.thumb-effect-lift-strong .post-item {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease;
}
.thumb-effect-lift-strong .post-item:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* ============================================
   效果5: 边框动画 (border)
   仅在 border class 下生效
   ============================================ */

.thumb-effect-border-soft .entry-media,
.thumb-effect-border-normal .entry-media,
.thumb-effect-border-strong .entry-media,
.thumb-effect-combo-lift-border .entry-media {
    position: relative;
}

.thumb-effect-border-soft .entry-media::after,
.thumb-effect-border-normal .entry-media::after,
.thumb-effect-border-strong .entry-media::after,
.thumb-effect-combo-lift-border .entry-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0 solid rgba(102, 126, 234, 0.6);
    border-radius: inherit;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 3;
}

/* 边框 - 轻微 */
.thumb-effect-border-soft .entry-media:hover::after {
    border-width: 2px;
}

/* 边框 - 中等 */
.thumb-effect-border-normal .entry-media:hover::after {
    border-width: 4px;
    box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2);
}

/* 边框 - 强烈 */
.thumb-effect-border-strong .entry-media:hover::after {
    border-width: 6px;
    box-shadow: inset 0 0 30px rgba(102, 126, 234, 0.3),
                0 0 20px rgba(102, 126, 234, 0.2);
}

/* ============================================
   效果6: 灰度变色 (grayscale)
   ============================================ */

/* 灰度 - 轻微 */
.thumb-effect-grayscale-soft .entry-media .media-img {
    filter: grayscale(20%);
    transition: filter 0.4s ease !important;
}
.thumb-effect-grayscale-soft .entry-media:hover .media-img {
    filter: grayscale(0%) !important;
}

/* 灰度 - 中等 */
.thumb-effect-grayscale-normal .entry-media .media-img {
    filter: grayscale(50%);
    transition: filter 0.4s ease !important;
}
.thumb-effect-grayscale-normal .entry-media:hover .media-img {
    filter: grayscale(0%) !important;
}

/* 灰度 - 强烈 */
.thumb-effect-grayscale-strong .entry-media .media-img {
    filter: grayscale(100%);
    transition: filter 0.4s ease !important;
}
.thumb-effect-grayscale-strong .entry-media:hover .media-img {
    filter: grayscale(0%) !important;
}

/* ============================================
   效果7: 模糊聚焦 (blur)
   ============================================ */

/* 模糊 - 轻微 */
.thumb-effect-blur-soft .entry-media .media-img {
    filter: blur(1px);
    transition: filter 0.4s ease !important;
}
.thumb-effect-blur-soft .entry-media:hover .media-img {
    filter: blur(0) !important;
}

/* 模糊 - 中等 */
.thumb-effect-blur-normal .entry-media .media-img {
    filter: blur(2px);
    transition: filter 0.4s ease !important;
}
.thumb-effect-blur-normal .entry-media:hover .media-img {
    filter: blur(0) !important;
}

/* 模糊 - 强烈 */
.thumb-effect-blur-strong .entry-media .media-img {
    filter: blur(3px);
    transition: filter 0.4s ease !important;
}
.thumb-effect-blur-strong .entry-media:hover .media-img {
    filter: blur(0) !important;
}

/* ============================================
   效果8: 3D倾斜 (3d)
   ============================================ */

.thumb-effect-3d-soft .post-item,
.thumb-effect-3d-normal .post-item,
.thumb-effect-3d-strong .post-item {
    perspective: 1000px;
}

.thumb-effect-3d-soft .entry-media,
.thumb-effect-3d-normal .entry-media,
.thumb-effect-3d-strong .entry-media {
    transition: transform 0.4s ease;
}

/* 3D - 轻微 */
.thumb-effect-3d-soft .post-item:hover .entry-media {
    transform: rotateY(5deg) rotateX(5deg);
}

/* 3D - 中等 */
.thumb-effect-3d-normal .post-item:hover .entry-media {
    transform: rotateY(10deg) rotateX(5deg);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.2);
}

/* 3D - 强烈 */
.thumb-effect-3d-strong .post-item:hover .entry-media {
    transform: rotateY(15deg) rotateX(10deg) scale(1.05);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.25);
}

/* ============================================
   效果9: 波纹扩散 (ripple)
   仅在 ripple class 下生效
   ============================================ */

.thumb-effect-ripple-soft .entry-media,
.thumb-effect-ripple-normal .entry-media,
.thumb-effect-ripple-strong .entry-media {
    position: relative;
}

.thumb-effect-ripple-soft .entry-media::after,
.thumb-effect-ripple-normal .entry-media::after,
.thumb-effect-ripple-strong .entry-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(102, 126, 234, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

/* 波纹 - 轻微 */
.thumb-effect-ripple-soft .entry-media:hover::after {
    animation: thumb-ripple-soft 0.8s ease-out;
}

/* 波纹 - 中等 */
.thumb-effect-ripple-normal .entry-media:hover::after {
    animation: thumb-ripple-normal 1s ease-out;
}

/* 波纹 - 强烈 */
.thumb-effect-ripple-strong .entry-media:hover::after {
    animation: thumb-ripple-strong 1.2s ease-out;
}

@keyframes thumb-ripple-soft {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0; }
}

@keyframes thumb-ripple-normal {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0.3; }
    100% { transform: scale(1.15); opacity: 0; }
}

@keyframes thumb-ripple-strong {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 0.4; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* ============================================
   效果10: 翻转效果 (flip)
   ============================================ */

.thumb-effect-flip-soft .post-item,
.thumb-effect-flip-normal .post-item,
.thumb-effect-flip-strong .post-item {
    perspective: 1000px;
}

.thumb-effect-flip-soft .entry-media,
.thumb-effect-flip-normal .entry-media,
.thumb-effect-flip-strong .entry-media {
    transition: transform 0.6s ease;
}

/* 翻转 - 轻微 */
.thumb-effect-flip-soft .post-item:hover .entry-media {
    transform: rotateY(10deg);
}

/* 翻转 - 中等 */
.thumb-effect-flip-normal .post-item:hover .entry-media {
    transform: rotateY(15deg) scale(0.98);
}

/* 翻转 - 强烈 */
.thumb-effect-flip-strong .post-item:hover .entry-media {
    transform: rotateY(20deg) scale(1.02);
    transition-duration: 0.8s;
}

/* ============================================
   效果11: 组合效果 (combo)
   ============================================ */

/* 缩放 + 光泽 */
.thumb-effect-combo-zoom-shine .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-combo-zoom-shine .entry-media:hover .media-img {
    transform: scale(1.1) !important;
}
.thumb-effect-combo-zoom-shine .entry-media:hover::before {
    animation: thumb-shine-normal 1s ease forwards;
}

/* 上浮 + 边框 */
.thumb-effect-combo-lift-border .post-item {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.thumb-effect-combo-lift-border .post-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.thumb-effect-combo-lift-border .entry-media:hover::after {
    border-width: 4px;
}

/* 缩放 + 旋转 + 光泽 */
.thumb-effect-combo-all .entry-media .media-img {
    transition: transform 0.4s ease !important;
}
.thumb-effect-combo-all .entry-media:hover .media-img {
    transform: scale(1.08) rotate(2deg) !important;
}
.thumb-effect-combo-all .entry-media:hover::before {
    animation: thumb-shine-normal 1s ease forwards;
}
.thumb-effect-combo-all .post-item:hover {
    transform: translateY(-4px);
}

/* ============================================
   动画持续时间覆盖
   ============================================ */

/* 快速 */
.thumb-duration-fast [class*="thumb-effect-"] .entry-media .media-img,
.thumb-duration-fast [class*="thumb-effect-"] .post-item {
    transition-duration: 0.2s !important;
}

/* 慢速 */
.thumb-duration-slow [class*="thumb-effect-"] .entry-media .media-img,
.thumb-duration-slow [class*="thumb-effect-"] .post-item {
    transition-duration: 0.6s !important;
}

/* ============================================
   移动端适配 - 禁用hover效果
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* 触摸设备：禁用所有伪元素 */
    [class*="thumb-effect-shine-"] .entry-media::before,
    .thumb-effect-combo-zoom-shine .entry-media::before,
    .thumb-effect-combo-all .entry-media::before,
    [class*="thumb-effect-border-"] .entry-media::after,
    [class*="thumb-effect-ripple-"] .entry-media::after,
    .thumb-effect-combo-lift-border .entry-media::after {
        display: none !important;
    }

    /* 仅保留简单 active 缩放 */
    [class*="thumb-effect-zoom-"] .entry-media:active .media-img,
    [class*="thumb-effect-rotate-"] .entry-media:active .media-img {
        transform: scale(1.03) !important;
    }

    /* 禁用3D和翻转 */
    [class*="thumb-effect-3d-"] .post-item:hover .entry-media,
    [class*="thumb-effect-flip-"] .post-item:hover .entry-media {
        transform: none !important;
    }

    /* 禁用灰度和模糊 */
    [class*="thumb-effect-grayscale-"] .entry-media .media-img,
    [class*="thumb-effect-blur-"] .entry-media .media-img {
        filter: none !important;
    }

    /* 禁用上浮 */
    [class*="thumb-effect-lift-"] .post-item:hover,
    [class*="thumb-effect-combo-lift-border"] .post-item:hover,
    .thumb-effect-combo-all .post-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* thumb-no-mobile 在移动端完全禁用 */
@media (hover: none) and (pointer: coarse) {
    .thumb-no-mobile .entry-media .media-img,
    .thumb-no-mobile .post-item {
        transition: none !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
    }
    .thumb-no-mobile .entry-media::before,
    .thumb-no-mobile .entry-media::after {
        display: none !important;
    }
}

/* ============================================
   系统级减少动画偏好支持
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    [class*="thumb-effect-"] .entry-media .media-img,
    [class*="thumb-effect-"] .post-item,
    [class*="thumb-effect-shine-"] .entry-media::before,
    .thumb-effect-combo-zoom-shine .entry-media::before,
    .thumb-effect-combo-all .entry-media::before,
    [class*="thumb-effect-border-"] .entry-media::after,
    [class*="thumb-effect-ripple-"] .entry-media::after {
        transition: none !important;
        animation: none !important;
    }

    [class*="thumb-effect-"] .post-item:hover,
    [class*="thumb-effect-"] .entry-media:hover,
    [class*="thumb-effect-"] .entry-media:hover .media-img {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
}

/* ============================================
   暗色模式适配
   ============================================ */

[data-bs-theme="dark"] [class*="thumb-effect-border-"] .entry-media::after,
[data-bs-theme="dark"] .thumb-effect-combo-lift-border .entry-media::after {
    border-color: rgba(102, 126, 234, 0.8);
}

[data-bs-theme="dark"] [class*="thumb-effect-lift-"] .post-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] [class*="thumb-effect-shine-"] .entry-media::before,
[data-bs-theme="dark"] .thumb-effect-combo-zoom-shine .entry-media::before,
[data-bs-theme="dark"] .thumb-effect-combo-all .entry-media::before {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
}