/* 柔和霓虹主题的卡片堆叠样式 */
.pattern-wrap{
    margin:0 auto;
    max-width:1350px;
    padding:0 15px;
    box-sizing:border-box;
    scroll-behavior:smooth
}

.pattern-list,.pattern-wrap{
    width:100%;
    position:relative
}

.pattern-list{
    height:430px;
    overflow:hidden;
    perspective:1200px
}

.pattern-wrap .pattern-list .pattern-item{
    opacity:0;
    position:absolute;
    top:40px;
    left:50%;
    width:264px;
    height:360px;
    text-align:center;
    /* === 优化点 1: 背景改为柔和玻璃效果 === */
    background: rgba(255, 255, 255, 0.9); /* 略微透明的浅色背景 */
    backdrop-filter: blur(3px); /* 轻微的磨砂效果 */
    -webkit-backdrop-filter: blur(3px);
    
    border-radius:12px;
    
    /* === 优化点 2: 阴影改为主题色霓虹光晕 === */
    box-shadow: 
        0 20px 40px rgba(123, 104, 238, 0.3), /* 青紫色主阴影 */
        0 8px 24px rgba(255, 105, 180, 0.15), /* 亮粉色次阴影 */
        inset 0 1px 0 hsla(0,0%,100%,.6);
        
    /* === 优化点 3: 边框改为柔和渐变 === */
    border:1px solid;
    border-image:linear-gradient(135deg,
        rgba(123, 104, 238, 0.4), /* 主色半透明 */
        rgba(255, 105, 180, 0.15) /* 辅助色半透明 */
    ) 1;
    
    transform-style:preserve-3d;
    backface-visibility:hidden;
    will-change:transform,opacity
}

.pattern-wrap .pattern-list .pattern-item:hover{
    transform:translateY(-8px) scale(1.02);
    /* 悬停阴影增强主题光晕 */
    box-shadow:
        0 25px 50px rgba(123, 104, 238, 0.4),
        0 12px 30px rgba(255, 105, 180, 0.2);
    transition:all .4s cubic-bezier(.25,.46,.45,.94)
}

/* 调整背景卡片阴影，颜色保持与 hover 阴影一致 */
.pattern-wrap .pattern-list .item-1{
    margin-left:-132px;
    z-index:50;
    filter:drop-shadow(0 10px 20px rgba(123, 104, 238, 0.3)) /* 主色发光 */
}
.pattern-wrap .pattern-list .item-2{
    margin-left:-363.8px;
    transform:translateX(220px)
}
.pattern-wrap .pattern-list .item-2,.pattern-wrap .pattern-list .item-3{
    width:237.6px;
    height:324px;
    top:60px;
    z-index:40;
    filter:drop-shadow(0 8px 16px rgba(255, 105, 180, 0.2)) /* 辅助色发光 */
}
.pattern-wrap .pattern-list .item-3{
    margin-left:126.2px;
    transform:translateX(-220px)
}
.pattern-wrap .pattern-list .item-4{
    margin-left:-568.92px;
    transform:translateX(280px)
}
.pattern-wrap .pattern-list .item-4,.pattern-wrap .pattern-list .item-5{
    width:213.84px;
    height:291.6px;
    top:75px;
    z-index:30;
    filter:drop-shadow(0 6px 12px rgba(123, 104, 238, 0.15)) /* 柔和主色发光 */
}
.pattern-wrap .pattern-list .item-5{
    margin-left:355.08px;
    transform:translateX(-280px)
}

.show .pattern-list .pattern-item{
    opacity:1;
    transform:translateX(0);
    transition:opacity .9s cubic-bezier(.25,.46,.45,.94),transform .9s cubic-bezier(.34,1.56,.64,1),filter .6s ease
}

.pattern-item-title{
    width:100%;
    height:210px;
    padding-top:30px;
    margin-bottom:30px;
    border-radius:12px 12px 0 0;
    /* === 优化点 4: 标题渐变改为主题色 === */
    background:linear-gradient(135deg, var(--a5zy-primary), var(--a5zy-secondary) 53%, var(--a5zy-primary));
    position:relative;
    overflow:hidden
}

.pattern-item-title:before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    /* 保持白色反光动画 */
    background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);
    transition:left .6s ease
}

.pattern-item-title:hover:before{
    left:100%
}

.pattern-item-title img{
    width:40%;
    height:auto;
    vertical-align:top;
    display:inline-block;
    background-color:transparent;
    transition:transform .4s ease;
    /* 保持图片阴影，确保可读性 */
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.1)) 
}

.pattern-item:hover .pattern-item-title img{
    transform:scale(1.05) translateY(-2px)
}

.pattern-item p{
    line-height:1.6;
    color:#555; /* 略微调整文字颜色，避免太硬的黑色 */
    font-size:14px;
    padding:0 20px;
    margin:0;
    font-weight:400;
    letter-spacing:.2px
}

.item-2 .pattern-item-title,.item-3 .pattern-item-title{
    padding-top:27px;
    height:189px
}

.item-4 .pattern-item-title,.item-5 .pattern-item-title{
    padding-top:24.3px;
    height:170.1px
}

@keyframes fadeInUp{
    0%{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

@media (max-width:768px){
    .pattern-list{height:380px}
    .pattern-wrap .pattern-list .pattern-item{width:220px;height:300px}
    .pattern-item-title{height:175px;padding-top:25px}
}