@layer components{.showcase-scene{--showcase-card-width:clamp(220px, 44vw, 300px);perspective:1800px;perspective-origin:50% 47%;width:100vw;max-width:1100px;height:380px;transform-style:preserve-3d;margin-top:62px;margin-bottom:12px;position:relative;left:50%;overflow:hidden;transform:translate(-50%)}.showcase-camera{z-index:1;transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.showcase-rail{width:100%;height:100%;transform-style:preserve-3d;position:relative;transform:translate(-4%,-3%)}.showcase-slot{z-index:var(--z);transform-style:preserve-3d;transform:translate(-50%,-50%);translate:var(--fan-x,0) var(--fan-y,0);transition:opacity .22s ease, transform .28s ease, translate .9s var(--ease-settle) calc(var(--fan-order,0) * 90ms);will-change:transform;outline:none;position:absolute;top:50%;left:50%}.showcase-slot.is-hovered{z-index:999}.showcase-slot.is-ahead{opacity:.08;pointer-events:none;transform:translate(-50%,-50%)translate(-220px,-56px)}@supports not (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.showcase-scene:not(.is-spread) .showcase-slot{translate:0}}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.showcase-scene{view-timeline:--showcase-fan block}.showcase-slot{animation:cubic-bezier(.33,1,.68,1) both showcase-fan;animation-timeline:--showcase-fan;animation-range:entry calc(30% + var(--fan-order,0) * 15%) cover 50%}}}@keyframes showcase-fan{0%{translate:0}}.showcase-card{width:var(--showcase-card-width);box-shadow:0 0 0 1px var(--border);transform-origin:50%;transform-style:preserve-3d;will-change:transform;background:#151515;border-radius:6px;transition:filter .22s,transform .28s,box-shadow .22s;position:relative;overflow:hidden;transform:rotateX(0)rotateY(-36deg)rotate(-6deg)scale(1)}.showcase-slot.is-hovered .showcase-card{transform:rotateX(0)rotateY(-36deg)rotate(-6deg)scale(1.12)}.showcase-slot:focus-visible .showcase-card{box-shadow:0 0 0 2px var(--accent)}.showcase-card>:is(img,video),.showcase-frame>:is(img,video){object-fit:cover;width:100%;height:100%;display:block}.showcase-track{scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px;margin:0 -24px;padding:0 24px;scroll-padding:0 24px;display:flex;overflow:auto hidden}.showcase-track::-webkit-scrollbar{display:none}@media (pointer:fine){.showcase-track{cursor:grab}.showcase-track.is-dragging{cursor:grabbing;scroll-snap-type:none}}}