/* =========================================================
   幻灯片切换效果样式（公共组件）
   配合 js/slideshow-effects.js 使用，提供 7 种切换动画：
   分割 / 百叶窗 / 翻转 / 立方体 / 平移 / 涟漪 / 碎片
   过渡时长统一控制在 300-500ms 之间
   ========================================================= */

/* 切换临时图层：以背景图方式承载"新图片"，覆盖在旧图之上播放动画 */
.slide-effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 5;
    will-change: transform, opacity, clip-path;
    pointer-events: none; /* 不影响轮播控制按钮点击 */
}

/* 旧图片在切换期间的淡出过渡（与新图层动画同时进行） */
.slideshow img.fx-fading {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}

/* ---------- 1. 分割效果 ----------
   画面沿水平(上下两半)或垂直(左右两半)中线分开，
   两半分别从容器边缘滑入并拼合完成切换 */
.fx-split-v-l { /* 左半：显示左侧 50%，从左侧滑入 */
    clip-path: inset(0 50% 0 0);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: fxSplitXL 0.42s cubic-bezier(.4, 0, .2, 1) forwards;
}
.fx-split-v-r { /* 右半：显示右侧 50%，从右侧滑入 */
    clip-path: inset(0 0 0 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: fxSplitXR 0.42s cubic-bezier(.4, 0, .2, 1) forwards;
}
.fx-split-h-t { /* 上半：显示上侧 50%，从上侧滑入 */
    clip-path: inset(0 0 50% 0);
    background-size: 100% 200%;
    background-position: 0 0;
    animation: fxSplitYT 0.42s cubic-bezier(.4, 0, .2, 1) forwards;
}
.fx-split-h-b { /* 下半：显示下侧 50%，从下侧滑入 */
    clip-path: inset(50% 0 0 0);
    background-size: 100% 200%;
    background-position: 0 100%;
    animation: fxSplitYB 0.42s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes fxSplitXL { from { transform: translateX(-101%); } to { transform: translateX(0); } }
@keyframes fxSplitXR { from { transform: translateX(101%); } to { transform: translateX(0); } }
@keyframes fxSplitYT { from { transform: translateY(-101%); } to { transform: translateY(0); } }
@keyframes fxSplitYB { from { transform: translateY(101%); } to { transform: translateY(0); } }

/* ---------- 2. 百叶窗效果 ----------
   画面被拆成多条竖直叶片，叶片依次从上向下展开（scaleY），
   模拟百叶窗叶片开合；叶片数量/间距/延迟由 JS 逐条设置 */
.fx-blinds-item {
    animation: fxBlinds 0.42s ease-in-out forwards;
    transform-origin: top center;
}
@keyframes fxBlinds {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* ---------- 3. 翻转效果 ----------
   新画面沿水平轴做 3D 翻面（从垂直状态翻至正面），
   依赖父容器 perspective 产生立体景深 */
.fx-flip {
    transform-origin: center;
    backface-visibility: hidden;
    animation: fxFlip 0.45s ease-in-out forwards;
}
@keyframes fxFlip {
    from { transform: perspective(1000px) rotateX(90deg); opacity: .3; }
    to   { transform: perspective(1000px) rotateX(0deg); opacity: 1; }
}

/* ---------- 4. 立方体效果 ----------
   新画面以左侧为轴做 3D 旋转（rotateY 90°→0°），
   视觉上如同一块立方体面从左前方转到正面 */
.fx-cube {
    transform-origin: left center;
    animation: fxCube 0.45s ease-in-out forwards;
}
@keyframes fxCube {
    from { transform: perspective(1200px) rotateY(90deg); opacity: .3; }
    to   { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}

/* ---------- 5. 平移效果 ----------
   内容沿指定方向平滑滑动进入（右/左/下/上 四向随机），
   旧图同步淡出，视觉为推拉式滑动切换 */
.fx-slide-right { animation: fxSlideR 0.42s ease-in-out forwards; }
.fx-slide-left  { animation: fxSlideL 0.42s ease-in-out forwards; }
.fx-slide-up    { animation: fxSlideU 0.42s ease-in-out forwards; }
.fx-slide-down  { animation: fxSlideD 0.42s ease-in-out forwards; }
@keyframes fxSlideR { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fxSlideL { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fxSlideU { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fxSlideD { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------- 6. 涟漪效果 ----------
   新画面以圆形 clip-path 从一点（中心或四角随机）向外扩散，
   模拟水波纹扩散覆盖全屏完成切换 */
.fx-ripple {
    animation: fxRipple 0.45s cubic-bezier(.25, .8, .3, 1) forwards;
}
@keyframes fxRipple {
    from { clip-path: circle(0% at var(--fx-origin-x, 50%) var(--fx-origin-y, 50%)); }
    to   { clip-path: circle(141.4% at var(--fx-origin-x, 50%) var(--fx-origin-y, 50%)); }
}

/* ---------- 7. 碎片效果 ----------
   新画面被拆成 3x3 碎片，各碎片从随机散落位置（位移+旋转+缩小）
   聚拢拼合成完整画面；碎片位置与随机量由 JS 逐块设置 */
.fx-frag {
    animation: fxFrag 0.45s cubic-bezier(.3, .6, .4, 1) forwards;
}
@keyframes fxFrag {
    from {
        transform: translate(var(--fx-dx, 40px), var(--fx-dy, -30px)) rotate(var(--fx-rot, 10deg)) scale(.85);
        opacity: 0;
    }
    to {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}