.drop-sidebar .feed-item{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 48%,#111923) 0%,color-mix(in srgb,var(--tone) 24%,#111923) 38%,#121b27 88%)}

/* Follow document height without letting feed items increase page height. */
.drop-sidebar{bottom:auto;min-height:0;display:flex;flex-direction:column}
.drop-sidebar .sidebar-label,.drop-sidebar .drop-feed-tabs{flex-shrink:0}
#drop-feed{flex:1;min-height:0;overflow:hidden}
.drop-sidebar .feed-item{position:relative;height:118px;overflow:hidden;outline-offset:-3px}
.feed-skin{transition:opacity .25s ease,transform .35s ease}
.drop-sidebar .feed-origin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 8px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--tone) 24%,#10151f),#0c111bf5);opacity:0;transform:translateY(15px) scale(.9);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.drop-sidebar .feed-origin img{width:100%;height:82px;object-fit:contain;margin:0;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--tone) 30%,transparent))}
.drop-sidebar .feed-origin span{font-size:11px;line-height:14px;color:#ffe1b3;text-align:center;max-width:100%;overflow-wrap:anywhere}
.feed-item:is(:hover,:focus-visible) .feed-skin{opacity:0;transform:translateY(-12px) scale(.92)}
.feed-item:is(:hover,:focus-visible) .feed-origin{opacity:1;transform:none}
.drop-sidebar .feed-item:is(:hover,:focus-visible) .feed-origin img{transform:none}
@media(max-width:720px){.drop-sidebar{display:none}}
@media(prefers-reduced-motion:reduce){.feed-skin,.drop-sidebar .feed-origin{transition:none}}

/* Animate the actual case artwork, independently of its caption. */
.drop-sidebar .feed-origin{padding:0 5px 3px;perspective:500px;isolation:isolate}
.drop-sidebar .feed-origin img{position:relative;z-index:1;width:100%;height:101px;flex-shrink:0;transform-origin:50% 75%;filter:drop-shadow(0 5px 5px #0008) drop-shadow(0 0 12px color-mix(in srgb,var(--tone) 50%,transparent));will-change:transform}
.drop-sidebar .feed-origin span{position:relative;z-index:2;font-size:10px;line-height:12px;margin-top:-2px;text-shadow:0 1px 4px #000}
.drop-sidebar .feed-origin:before{content:'';position:absolute;inset:5px 15px 14px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tone) 55%,transparent),transparent 67%);opacity:0;z-index:0}
.drop-sidebar .feed-origin:after{content:'';position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 40%,#ffffff22 49%,transparent 58%);transform:translateX(-100%);z-index:2}
.drop-sidebar .feed-item:is(:hover,:focus-visible) .feed-origin img{animation:feed-case-arrive .65s cubic-bezier(.16,1,.3,1) both,feed-case-float 2.4s .65s ease-in-out infinite}
.drop-sidebar .feed-item:is(:hover,:focus-visible) .feed-origin:before{animation:feed-case-halo .7s ease-out both}
.drop-sidebar .feed-item:is(:hover,:focus-visible) .feed-origin:after{animation:feed-case-shine .8s .15s ease-out both}
@keyframes feed-case-arrive{0%{opacity:0;transform:translateY(42px) scale(.4) rotate(-17deg) rotateY(-35deg)}65%{opacity:1;transform:translateY(-5px) scale(1.05) rotate(3deg) rotateY(7deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0) rotateY(0)}}
@keyframes feed-case-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes feed-case-halo{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.2)}100%{opacity:.6;transform:scale(1)}}
@keyframes feed-case-shine{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.drop-sidebar .feed-item:is(:hover,:focus-visible) .feed-origin img,.drop-sidebar .feed-origin:before,.drop-sidebar .feed-origin:after{animation:none!important}.drop-sidebar .feed-origin img{will-change:auto}}