/* Stoxa — holo stock card (Higgsfield frame + real logo) and pack images */
.scard { --w: 220px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; width: var(--w); aspect-ratio: 520 / 785; flex: none;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.scard.live { transition: transform .08s linear; }
.sc-frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .65)); }
.sc-win { position: absolute; left: 7%; right: 7%; top: 10.5%; height: 46%; display: grid; place-items: center; border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(215, 255, 47, .14), transparent 65%); }
.sc-logo { width: 54%; height: auto; border-radius: 18%; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); transform: translateZ(30px); }
.sc-plate { position: absolute; left: 10%; right: 10%; top: 71.5%; height: 16%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 2%; }
.sc-plate b { font: 900 calc(var(--w) * .085)/1 var(--f-display); color: #fff; letter-spacing: .01em; }
.sc-plate span { font: 600 calc(var(--w) * .045)/1.1 var(--f-body); color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-plate em { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); font: 600 calc(var(--w) * .045)/1 var(--f-mono); font-style: normal; color: var(--volt); }
.sc-plate em:empty { display: none; }
.sc-holo { position: absolute; inset: 1.5%; border-radius: 5%; pointer-events: none; mix-blend-mode: color-dodge; opacity: .22;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255, 60, 160, .3) 0%, rgba(60, 255, 200, .25) 6%, rgba(255, 225, 77, .25) 12%, rgba(120, 80, 255, .3) 18%, rgba(255, 60, 160, .3) 24%);
  background-size: 100% 100%, 300% 300%; background-position: center, var(--mx) var(--my); }
.scard.lift:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); }

/* pack image with a moving foil shine clipped to the pack shape */
.pimg { --mx: 50%; --rx: 0deg; --ry: 0deg; position: relative; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); }
.pimg.live { transition: transform .08s linear; }
.pimg > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.pimg .shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: overlay;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.pimg .shine::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%);
  transform: translateX(-110%); will-change: transform; animation: pshine 5s ease-in-out infinite; animation-delay: var(--sd, 0s); }
@keyframes pshine { 0%, 55% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }