:root{--index:calc(1vw + 1vh);--transition:cubic-bezier(.1, .7, 0, 1)}.items{perspective:calc(var(--index) * 90);flex-wrap:wrap;gap:.8rem;display:flex}.item{cursor:pointer;filter:grayscale()brightness(.4);transition:transform 1.25s var(--transition), filter 3s var(--transition);will-change:transform, filter, rotateY;background-color:#222;background-position:50%;background-size:cover;border-radius:6%}.items .item:hover{filter:inherit;transform:translateZ(calc(var(--index) * 10))}.items .item:hover+*{filter:inherit;transform:translateZ(calc(var(--index) * 8.5)) rotateY(35deg);z-index:-1}.items .item:hover+*+*{filter:inherit;transform:translateZ(calc(var(--index) * 5.6)) rotateY(40deg);z-index:-2}.items .item:hover+*+*+*{filter:inherit;transform:translateZ(calc(var(--index) * 2.5)) rotateY(30deg);z-index:-3}.items .item:hover+*+*+*+*{transform:translateZ(calc(var(--index) * .6)) rotateY(15deg);z-index:-4}.items .item:has(+:hover){filter:inherit;transform:translateZ(calc(var(--index) * 8.5)) rotateY(-35deg)}.items .item:has(+*+:hover){filter:inherit;transform:translateZ(calc(var(--index) * 5.6)) rotateY(-40deg)}.items .item:has(+*+*+:hover){filter:inherit;transform:translateZ(calc(var(--index) * 2.5)) rotateY(-30deg)}.items .item:has(+*+*+*+:hover){transform:translateZ(calc(var(--index) * .6)) rotateY(-15deg)}.item:before,.item:after{content:"";width:30px;height:100%;top:0;left:calc(var(--index) * -1);position:absolute}
.holo{--pointer-x:50%;--pointer-y:50%;--background-x:50%;--background-y:50%;--pointer-from-center:0;--card-opacity:0;--space:5%;--sunpillar-1:#ff7a75;--sunpillar-2:#ffed61;--sunpillar-3:#a8ff61;--sunpillar-4:#85fff7;--sunpillar-5:#7a95ff;--sunpillar-6:#d875ff;isolation:isolate;border-radius:.5rem;height:100%;display:grid;position:relative;overflow:hidden;transform:translateZ(.01px)}.holo__img,.holo__shine,.holo__glare{border-radius:inherit;grid-area:1/1;width:100%;height:100%}.holo__img{object-fit:cover;display:block}.holo__shine,.holo__glare{pointer-events:none;opacity:var(--card-opacity);transition:opacity .4s ease-out}.holo.is-interacting .holo__shine,.holo.is-interacting .holo__glare{transition:none}.holo__shine{background-image:repeating-linear-gradient(0deg, var(--sunpillar-1) calc(var(--space) * 1), var(--sunpillar-2) calc(var(--space) * 2), var(--sunpillar-3) calc(var(--space) * 3), var(--sunpillar-4) calc(var(--space) * 4), var(--sunpillar-5) calc(var(--space) * 5), var(--sunpillar-6) calc(var(--space) * 6), var(--sunpillar-1) calc(var(--space) * 7)), repeating-linear-gradient(133deg, #0e152e 0%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #0000001a 12%, #00000026 20%, #00000040 120%);background-position:0% var(--background-y), var(--background-x) var(--background-y), center center;background-blend-mode:hue, hard-light;filter:brightness(calc((var(--pointer-from-center) * .35) + .55)) contrast(1.8) saturate(1.1);mix-blend-mode:color-dodge;background-size:200% 700%,300% 300%,cover}.holo__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #ffffff8c 10%, #fff6 25%, #00000073 90%);mix-blend-mode:overlay;opacity:calc(var(--card-opacity) * .45)}@media (hover:none),(prefers-reduced-motion:reduce){.holo__shine,.holo__glare{display:none}}
.slider{width:100%;height:var(--height);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.slider .list{width:100%;min-width:calc(var(--width) * var(--quantity));display:flex;position:relative}.slider .list .marquee-item{width:var(--width);height:var(--height);animation:15s linear infinite autoRun;animation-delay:calc((15s / var(--quantity)) * var(--position) - 8s);transition:filter .5s;position:absolute;left:100%}@keyframes autoRun{0%{left:100%}to{left:calc(var(--width) * -1)}}.slider[reverse=true] .marquee-item{animation:10s linear infinite reversePlay}@keyframes reversePlay{0%{left:calc(var(--width) * -1)}to{left:100%}}.slider:hover .marquee-item{filter:grayscale();animation-play-state:paused!important}.slider .marquee-item:hover{filter:grayscale(0)}@media (prefers-reduced-motion:reduce){.slider .marquee-item{animation-play-state:paused!important}}