.carouselContainer{background:0 0;border-radius:16px;outline:none;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:100%;height:350px;display:flex;position:relative;overflow:hidden}.carouselFallback{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;justify-content:center;align-items:center;width:120px;height:120px;font-size:3rem;font-weight:700;display:flex;box-shadow:0 10px 40px #667eea4d}.carousel{perspective:1000px;width:100%;height:350px;transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:relative}.card{cursor:pointer;width:100%;height:100%;transform-style:preserve-3d;transform:translateX(calc(var(--offset) * 160px)) translateZ(calc(var(--abs-offset) * -240px)) rotateY(calc(var(--offset) * -45deg)) scale(calc(1 - var(--abs-offset) * .15));opacity:calc(1 - var(--abs-offset) * .4);z-index:calc(10 - var(--abs-offset));filter:grayscale(calc(var(--abs-offset) * .8)) brightness(calc(1 - var(--abs-offset) * .2));transition:all .6s cubic-bezier(.4,0,.2,1);position:absolute}.card:not(.active){pointer-events:none;opacity:0!important}.card.active{opacity:1;z-index:10;filter:grayscale(0)brightness();cursor:default;transform:translate(0)translateZ(0)rotateY(0)scale(1)}.cardInner{background:#fff;border-radius:20px;width:100%;height:100%;transition:box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #ffffff1a}.card:hover .cardInner{box-shadow:0 30px 60px -12px #0000004d,0 0 0 1px #fff3}.image{object-fit:cover;-webkit-box-reflect:below 0 linear-gradient(transparent, transparent, #00000026);width:100%;height:100%;display:block}.imageOverlay{pointer-events:none;background:linear-gradient(#0000 60%,#0000000d 100%);position:absolute;inset:0}.control{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#333;cursor:pointer;z-index:20;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 12px #00000026}.control:hover{background:#fff;transform:translateY(-50%)scale(1.1);box-shadow:0 6px 20px #0003}.control:active{transform:translateY(-50%)scale(.95)}.prev{left:20px}.next{right:20px}.indicators{z-index:20;gap:8px;display:flex;position:absolute;bottom:20px}.dot{cursor:pointer;background:#0003;border:none;border-radius:50%;width:8px;height:8px;padding:0;transition:all .3s}.dot:hover{background:#0006;transform:scale(1.2)}.activeDot{background:#667eea;border-radius:4px;width:24px}@media (max-width:768px){.carouselContainer{height:280px}.carousel{height:200px}.card{width:176px;height:176px;transform:translateX(calc(var(--offset) * 112px)) translateZ(calc(var(--abs-offset) * -160px)) rotateY(calc(var(--offset) * -35deg)) scale(calc(1 - var(--abs-offset) * .15))}.control{width:36px;height:36px;font-size:1.2rem}.prev{left:10px}.next{right:10px}}@media (max-width:480px){.carouselContainer{height:240px}.carousel{height:160px}.card{width:144px;height:144px;transform:translateX(calc(var(--offset) * 80px)) translateZ(calc(var(--abs-offset) * -120px)) rotateY(calc(var(--offset) * -30deg)) scale(calc(1 - var(--abs-offset) * .2))}}@media (prefers-reduced-motion:reduce){.card{transition:none}}@media (max-width:768px){.carouselContainer,.carousel{height:280px}.card{width:100%;height:100%;transform:translateX(calc(var(--offset) * 112px)) translateZ(calc(var(--abs-offset) * -160px)) rotateY(calc(var(--offset) * -35deg)) scale(calc(1 - var(--abs-offset) * .15))}.control{width:36px;height:36px;font-size:1.2rem}.prev{left:10px}.next{right:10px}}@media (max-width:480px){.carouselContainer{height:320px}.carousel{height:100%}.card{width:100%;height:100%;transform:translateX(calc(var(--offset) * 80px)) translateZ(calc(var(--abs-offset) * -120px)) rotateY(calc(var(--offset) * -30deg)) scale(calc(1 - var(--abs-offset) * .2))}}
