@property --spread{syntax:"<number>";inherits:true;initial-value:1}.SwatchFan-module__T4bMeW__deck{--spread:1;perspective:900px;height:100%;min-height:170px;display:block;position:relative}.SwatchFan-module__T4bMeW__chip{--mid:calc((var(--n) - 1) / 2);width:112px;height:132px;transform:translateX(calc((var(--i) - var(--mid)) * 34px * var(--spread))) rotateY(calc(-22deg * var(--spread))) rotateZ(calc((var(--i) - var(--mid)) * 5deg * var(--spread))) translateZ(calc(var(--i) * 10px));background-color:#d8cbb8;background-repeat:no-repeat;background-size:cover;border-radius:8px;margin:-66px 0 0 -56px;position:absolute;top:50%;left:50%;box-shadow:0 14px 26px #10202b2e,inset 0 0 0 1px #ffffff80}[dir=rtl] .SwatchFan-module__T4bMeW__chip{transform:translateX(calc((var(--mid) - var(--i)) * 34px * var(--spread))) rotateY(calc(22deg * var(--spread))) rotateZ(calc((var(--mid) - var(--i)) * 5deg * var(--spread))) translateZ(calc(var(--i) * 10px))}html[data-motion] .SwatchFan-module__T4bMeW__deck{transition:--spread .5s cubic-bezier(.2,.8,.2,1)}:is(html[data-motion] a:hover .SwatchFan-module__T4bMeW__deck,html[data-motion] a:focus-visible .SwatchFan-module__T4bMeW__deck){--spread:1.45}@keyframes SwatchFan-module__T4bMeW__fan{0%{--spread:0}to{--spread:1}}@supports (animation-timeline:view()){html[data-motion] .SwatchFan-module__T4bMeW__deck{animation:linear both SwatchFan-module__T4bMeW__fan;animation-timeline:view();animation-range:entry 10% cover 40%}:is(html[data-motion] a:hover .SwatchFan-module__T4bMeW__deck,html[data-motion] a:focus-visible .SwatchFan-module__T4bMeW__deck){animation:none}}