/* ============================================================
   轮播图样式
   基于 3D 透视效果，图片通过 CSS transform 实现切换动画
   ============================================================ */

/* ---------- 基础重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---------- 轮播外层容器 ---------- */
.slider-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 轮播主体 ---------- */
.slider {
    position: relative;
    width: 980px;       /* 轮播区域宽度，根据图片尺寸调整 */
    height: 550px;      /* 轮播区域高度 */
    perspective: 1000px; /* 3D 透视距离，值越小透视感越强 */
}

/* ---------- 图片列表 ---------- */
.slider-list {
    list-style: none;
    width: 100%;
    height: 100%;
}

/* ---------- 每张图片项 ---------- */
.slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.5s ease; /* 切换过渡动画，0.5秒 */
    /* 默认隐藏状态 */
    transform: rotateY(0deg) translateX(0) translateZ(0) scale(0.6);
    z-index: -1;
    opacity: 0;
}

.slider-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ---------- 图片状态类 ---------- */

/* 正面展示（当前激活的图片） */
.slider-item.front-side {
    z-index: 5;
    transform: rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
}

/* 左侧中间位置（当前图片的左边一张） */
.slider-item.gallery-left-middle {
    z-index: 3;
    transform: rotateY(55deg) translateX(-90px) translateZ(-0px) scale(0.95);
    opacity: 1;
}

/* 右侧中间位置（当前图片的右边一张） */
.slider-item.gallery-right-middle {
    z-index: 3;
    transform: rotateY(-55deg) translateX(90px) translateZ(-0px) scale(0.95);
    opacity: 1;
}

/* 隐藏状态（不在可视范围内的图片） */
.slider-item.gallery-out {
    transform: rotateY(0deg) translateX(0) translateZ(0) scale(0.6);
    z-index: -1;
    opacity: 0 !important;
}

/* ---------- 左右切换按钮 ---------- */
.slider-btn {
    position: absolute;
    width: 121px;   /* 按钮宽度 */
    height: 102px;  /* 按钮高度 */
    z-index: 99;   /* 确保按钮在最上层 */
    cursor: pointer;
    display: block;
}

.slider-btn img {
    width: 100%;
    height: 100%;
}

/* 左箭头：定位在轮播区域左侧 */
.slider-prev {
    top: 50%;
    left: -180px;
    transform: translateY(-50%);
}

/* 右箭头：定位在轮播区域右侧 */
.slider-next {
    top: 50%;
    right: -180px;
    transform: translateY(-50%);
}