/* ===== 轮播组件 ===== */
.carousel{width:100%;position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 2%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 2%,#000 82%,transparent 100%)}
.carousel-viewport{overflow:visible;width:100%;position:relative}
.carousel-track{position:relative;width:100%;aspect-ratio:1/1}
.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.carousel-slide[aria-hidden="true"]{pointer-events:none}
.carousel-slide.pos-center{transform:scale(1);opacity:1;z-index:2;filter:none}
.carousel-slide.pos-left{transform:translateX(-22%) scale(.82);opacity:.12;z-index:1;filter:blur(3px) saturate(.4) brightness(.6)}
.carousel-slide.pos-right{transform:translateX(22%) scale(.82);opacity:.12;z-index:1;filter:blur(3px) saturate(.4) brightness(.6)}
.carousel-slide.pos-other{opacity:0;z-index:0;pointer-events:none;filter:blur(4px)}
.carousel.swiping .carousel-slide{transition:none}

/* 卡片 */
.carousel-card{border-radius:2%;width:100%;max-width:260px;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media(max-width:480px){
  .carousel-card{max-width:220px}
  .carousel-card .effect-icon{padding:20px}
  .carousel-card .effect-icon svg{max-width:52px;max-height:52px}
  .carousel-card .effect-name{font-size:13px;padding:0 16px 6px}
  .carousel-card .effect-desc{font-size:11px;padding:0 20px 20px}
}
.carousel-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 40%,rgba(0,0,0,.2) 100%);pointer-events:none;z-index:1;transition:opacity .4s ease}
.carousel-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from 180deg,transparent 0%,rgba(255,255,255,.1) 25%,transparent 50%);pointer-events:none;z-index:0;opacity:0;transition:opacity .5s ease}
.carousel-card:hover{transform:scale(1.02)}
.carousel-card.active{transform:scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.15),0 16px 48px rgba(0,0,0,.4),0 0 80px rgba(var(--accent-rgb),.08)}
.carousel-card.active::before{opacity:.8}
.carousel-card.active::after{opacity:1}
@keyframes cardIn{from{opacity:0;transform:scale(.85) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.carousel-card{animation:cardIn .8s cubic-bezier(.16,1,.3,1) both}

/* 每个效果对应颜色（艺术感配色） */
.carousel-card[data-fx="square"]{background:linear-gradient(145deg,#c47a5a 0%,#a06a4a 50%,#8b5a3a 100%)}
.carousel-card[data-fx="scatter"]{background:linear-gradient(145deg,#7a9dc5 0%,#5a7a9a 50%,#4a6a8a 100%)}
.carousel-card[data-fx="diagonal"]{background:linear-gradient(145deg,#7aba9a 0%,#5a8a7a 50%,#4a7a6a 100%)}
.carousel-card[data-fx="rain"]{background:linear-gradient(145deg,#9a8ac5 0%,#7a6a9a 50%,#5a4a8a 100%)}
.carousel-card[data-fx="luminance"]{background:linear-gradient(145deg,#c5b07a 0%,#aa9a5a 50%,#8a8a4a 100%)}
.carousel-card[data-fx="expand"]{background:linear-gradient(145deg,#aa9ac5 0%,#8a7a9a 50%,#6a5a8a 100%)}
.carousel-card[data-fx="spiral"]{background:linear-gradient(145deg,#c5aa7a 0%,#aa9a5a 50%,#8a8a4a 100%)}
.carousel-card[data-fx="ripple"]{background:linear-gradient(145deg,#7abac5 0%,#5a9aaa 50%,#4a8a9a 100%)}
.carousel-card[data-fx="bloom"]{background:linear-gradient(145deg,#c57a9a 0%,#aa5a7a 50%,#8a4a6a 100%)}

/* 效果图标区域 */
.carousel-card .effect-icon{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;width:100%;position:relative;z-index:2}
.carousel-card .effect-icon svg{width:100%;height:100%;max-width:64px;max-height:64px;opacity:.85;transition:all .5s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.carousel-card.active .effect-icon svg{transform:scale(1.15);opacity:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}

/* 效果编号 */
.effect-num{position:absolute;top:12px;right:14px;font-size:10px;color:rgba(255,255,255,.18);font-weight:700;letter-spacing:.02em;z-index:3;transition:color .3s ease;font-family:'SF Mono','Menlo',monospace}
.carousel-card.active .effect-num{color:rgba(255,255,255,.4)}

/* 效果名称和描述 */
.carousel-card .effect-name{font-size:14px;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:0;padding:0 20px 6px;text-align:center;transition:all .4s ease;font-family:inherit;position:relative;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.carousel-card.active .effect-name{color:rgba(255,255,255,.95);transform:translateY(-3px);text-shadow:0 4px 16px rgba(0,0,0,.4)}
.carousel-card .effect-desc{font-size:11px;font-weight:400;color:rgba(255,255,255,.35);letter-spacing:.02em;padding:0 24px 24px;text-align:center;line-height:1.5;transition:all .4s ease;font-family:inherit;position:relative;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.carousel-card.active .effect-desc{color:rgba(255,255,255,.55);transform:translateY(-3px)}
.carousel-dots{display:none}