.hero-showcase{isolation:isolate;overflow:visible}.showcase-top,.showcase-caption{position:relative;z-index:2}.showcase-particles{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}.showcase-particles i,.card-particles i{position:absolute;font-style:normal;color:var(--particle-color,var(--rarity,#efc36e));text-shadow:0 0 12px currentColor;font-size:var(--size);left:var(--x);bottom:-30px;opacity:0;animation:showcaseRise var(--duration) linear infinite;animation-delay:var(--delay)}.treasures{position:relative;z-index:1;gap:34px;padding:45px 0 20px;perspective:1400px;align-items:stretch}.treasure.live-card{--tilt-x:0deg;--tilt-y:0deg;--rest-angle:-5deg;position:relative;display:flex;flex-direction:column;width:250px;min-width:0;overflow:visible;isolation:isolate;background:linear-gradient(0deg,color-mix(in srgb,var(--aura) 20%,#141a1b),color-mix(in srgb,var(--aura) 27%,#18201f) 55%,#18201f);border:1px solid color-mix(in srgb,var(--rarity) 40%,#26303a);border-radius:18px;box-shadow:0 18px 35px #0005,0 0 15px color-mix(in srgb,var(--rarity) 12%,transparent);transform:rotate(var(--rest-angle)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .18s ease-out,box-shadow .25s;outline-offset:7px}.treasure.live-card:nth-child(2){--rest-angle:0deg;translate:0 -10px}.treasure.live-card:nth-child(3){--rest-angle:5deg}.live-card:hover,.live-card:focus-visible{z-index:5;box-shadow:0 22px 48px #0007,-14px 0 32px -12px color-mix(in srgb,var(--rarity) 68%,transparent),14px 0 32px -12px color-mix(in srgb,var(--rarity) 68%,transparent),0 0 22px color-mix(in srgb,var(--rarity) 20%,transparent)}.live-card .item-art{height:210px;position:relative;display:block;background:none;border-radius:17px 17px 0 0;clip-path:inset(0 0 0 0);overflow:visible;transition:clip-path .2s;z-index:2}.live-card .item-art img{display:block;width:100%;height:100%;padding:9px;object-fit:var(--image-fit,contain);transform:translate(var(--image-x),var(--image-y)) scale(var(--image-scale));filter:drop-shadow(0 0 9px color-mix(in srgb,var(--art-glow) 80%,transparent)) drop-shadow(0 0 24px color-mix(in srgb,var(--art-glow) 50%,transparent));mask-image:linear-gradient(#000 0%,#000 63%,transparent 100%);transition:transform .25s ease-out;pointer-events:none}.live-card:hover .item-art,.live-card:focus-visible .item-art{clip-path:inset(-150px 0 0 0)}.live-card:hover .item-art img,.live-card:focus-visible .item-art img{transform:translate(calc(var(--image-x) + var(--art-dx,0px)),calc(var(--image-y) + var(--art-dy,0px))) scale(calc(var(--image-scale)*1.07))}.live-card .item-label{position:relative;z-index:3;border:0;background:none;padding:0 20px 22px;margin-top:-18px;min-height:86px}.live-card .item-label small{font-size:10px;letter-spacing:.6px;color:var(--rarity);text-transform:none}.live-card .item-label h3{font-size:18px;line-height:1.3;letter-spacing:-.025em;margin:8px 0 0}.live-card .item-stat{position:absolute;right:13px;top:14px;z-index:3;padding:5px 9px;font-size:11px;line-height:1.4;color:#e5ebef;background:#10191fc9;border:1px solid color-mix(in srgb,var(--rarity) 30%,transparent);border-radius:8px;backdrop-filter:blur(8px)}.live-card .item-stat b{color:var(--rarity)}.card-particles{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:4}.card-particles i{bottom:-22px;animation-name:cardRise;font-size:var(--size)}.live-card .orbit-glow{position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;z-index:-1;filter:drop-shadow(0 0 9px var(--rarity)) drop-shadow(0 0 19px var(--rarity));opacity:.45}.live-card .orbit-glow:before{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;background:conic-gradient(from var(--orbit-angle),transparent 0deg,var(--rarity) 55deg,transparent 110deg,transparent 180deg,var(--rarity) 235deg,transparent 290deg);mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);animation:orbitFlow 12s linear infinite}.live-card:hover .orbit-glow{opacity:.75}@property --orbit-angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes orbitFlow{to{--orbit-angle:360deg}}@keyframes showcaseRise{0%{opacity:0;transform:translateY(0) rotate(-12deg) scale(.6)}15%{opacity:.25}65%{opacity:.4}100%{opacity:0;transform:translateY(-470px) translateX(var(--drift)) rotate(22deg) scale(1)}}@keyframes cardRise{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:.65}70%{opacity:.5}100%{opacity:0;transform:translateY(-350px) rotate(12deg) scale(1)}}@media(max-width:850px){.treasures{gap:22px}.treasure.live-card{width:30%}.live-card .item-art{height:175px}.live-card .item-label{padding:0 13px 18px}.live-card .item-label h3{font-size:15px}}@media(max-width:600px){.treasures{flex-direction:column;align-items:center;gap:40px;padding:40px 0 20px}.treasure.live-card{width:min(250px,85%)}.live-card .item-art{height:210px}.live-card .item-label{padding:0 20px 22px;min-height:86px}.live-card .item-label h3{font-size:18px}.live-card .item-label small{font-size:10px}.treasure.live-card:nth-child(2){translate:0 0}.showcase-particles i{animation-duration:14s}.showcase-top>span{font-size:12px}.live-card .item-label p{display:none}}@media(prefers-reduced-motion:reduce){.showcase-particles,.card-particles{display:none}.live-card .orbit-glow:before{animation:none}.treasure.live-card{transform:rotate(var(--rest-angle));transition:none}.live-card .item-art,.live-card .item-art img{transition:none}.live-card:hover .item-art img{transform:translate(var(--image-x),var(--image-y)) scale(var(--image-scale))}}

@media(max-width:600px){.hero-showcase{overflow:hidden}.live-card .item-stat{max-width:calc(100% - 26px);font-size:10px}}
/* Wide artwork needs lift and side clearance to visibly leave the frame. */
.live-card:nth-child(2){--hover-lift:-12px;--hover-scale:1.07}
.live-card:nth-child(3){--hover-lift:-16px;--hover-scale:1.07}
.live-card:nth-child(n+2):hover .item-art,.live-card:nth-child(n+2):focus-visible .item-art{clip-path:inset(-150px -12px 0 -12px)}
.live-card:nth-child(n+2):hover .item-art img,.live-card:nth-child(n+2):focus-visible .item-art img{transform:translate(calc(var(--image-x) + var(--art-dx,0px)),calc(var(--image-y) + var(--hover-lift) + var(--art-dy,0px))) scale(calc(var(--image-scale)*var(--hover-scale)));mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%)}
@media(prefers-reduced-motion:reduce){.live-card:nth-child(n+2):hover .item-art img,.live-card:nth-child(n+2):focus-visible .item-art img{transform:translate(var(--image-x),var(--image-y)) scale(var(--image-scale))}}
.hero-showcase{overflow:clip}