/* Five bounded, decorative scenes. Idle cards do not run any animation. */
#products .showcase-product{--sfx-color:#ffad68;--sfx-rgb:255 152 75;overflow:visible;isolation:isolate;transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .35s}
#products .showcase-product[data-showcase-theme=cyberpunk]{--sfx-color:#f9ed42;--sfx-rgb:249 237 66}
#products .showcase-product[data-showcase-theme=hades]{--sfx-color:#91ffd1;--sfx-rgb:92 242 184}
#products .showcase-product[data-showcase-theme=silksong]{--sfx-color:#ff637e;--sfx-rgb:255 77 111}
#products .showcase-product[data-showcase-theme=elden]{--sfx-color:#f6d68e;--sfx-rgb:239 192 103}
#products .showcase-product .artwork{border-radius:9px 9px 0 0;isolation:isolate}
#products .showcase-product .product-info{border-radius:0 0 9px 9px}
#products .showcase-product .choose-tickets{color:#171311;background:color-mix(in srgb,var(--sfx-color) 50%,#d5cbdc);border-color:rgb(var(--sfx-rgb)/.6);transition:background .25s,box-shadow .25s,border-color .25s}
#products .showcase-product:is(:hover,:focus-within) .choose-tickets,#products .showcase-product .choose-tickets:hover:not(:disabled){color:#171311;background:color-mix(in srgb,var(--sfx-color) 88%,#fff);border-color:var(--sfx-color);box-shadow:0 0 16px rgb(var(--sfx-rgb)/.2)}
#products .showcase-product .choose-tickets:focus-visible{outline-color:var(--sfx-color)}
#products .showcase-product .stock-meter{background:rgb(var(--sfx-rgb)/.13)}
#products .showcase-product .stock-meter::-webkit-meter-bar{background:rgb(var(--sfx-rgb)/.13)}
#products .showcase-product .stock-meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,color-mix(in srgb,var(--sfx-color) 58%,#53505b),var(--sfx-color))}
#products .showcase-product .stock-meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,color-mix(in srgb,var(--sfx-color) 58%,#53505b),var(--sfx-color))}
#products .showcase-product .stock-meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,color-mix(in srgb,var(--sfx-color) 58%,#53505b),var(--sfx-color))}
#products .showcase-product .stock-meter::-moz-meter-bar{background:linear-gradient(90deg,color-mix(in srgb,var(--sfx-color) 58%,#53505b),var(--sfx-color))}
#products .showcase-product::after{content:'';position:absolute;inset:-1px;z-index:5;border:1px solid rgb(var(--sfx-rgb)/.8);border-radius:inherit;box-shadow:0 0 18px rgb(var(--sfx-rgb)/.16),inset 0 0 16px rgb(var(--sfx-rgb)/.035);opacity:0;pointer-events:none;transition:opacity .3s}
#products .showcase-product:is(:hover,:focus-within){z-index:6;transform:translateY(-4px);border-color:rgb(var(--sfx-rgb)/.8);box-shadow:0 17px 40px #0007,0 0 25px rgb(var(--sfx-rgb)/.16)}
#products .showcase-product:is(:hover,:focus-within)::after{opacity:1}
#products .showcase-product:is(:hover,:focus-within) .cover{transform:none;filter:brightness(1.16) saturate(1.12)}
#products .showcase-product .artwork::after{background:radial-gradient(ellipse at 50% 75%,rgb(var(--sfx-rgb)/.18),transparent 70%)}
#products .showcase-product:is(:hover,:focus-within) .art-arrow{color:var(--sfx-color);border-color:var(--sfx-color);background:#121014e6}
.showcase-fx{position:absolute;inset:0 0 auto;height:var(--gallery-art-height,auto);aspect-ratio:4/5;z-index:4;overflow:clip;overflow-clip-margin:12px;clip-path:inset(-24px);pointer-events:none;user-select:none;color:var(--sfx-color);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.showcase-product:is(:hover,:focus-within) .showcase-fx{opacity:1;visibility:visible}
.showcase-fx *{box-sizing:border-box;pointer-events:none}
.sfx-aura{position:absolute;inset:-7px;border-radius:15px;background:radial-gradient(ellipse at 75% 65%,rgb(var(--sfx-rgb)/.34),transparent 70%);filter:blur(12px);opacity:0;transform:scale(.94);transition:opacity .45s,transform .8s cubic-bezier(.16,1,.3,1)}
.showcase-product:is(:hover,:focus-within) .sfx-aura{opacity:.9;transform:scale(1.035)}
.sfx-scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sfx-scene :is(path,circle,ellipse,polygon,line){fill:none}
.showcase-fx>i{position:absolute;display:block;--i:0}
.showcase-fx>i:nth-of-type(2){--i:1}.showcase-fx>i:nth-of-type(3){--i:2}.showcase-fx>i:nth-of-type(4){--i:3}.showcase-fx>i:nth-of-type(5){--i:4}.showcase-fx>i:nth-of-type(6){--i:5}

/* NBA: a three-dimensional ball leaves the cover along a court-light trail. */
.showcase-fx--nba .sfx-aura{background:radial-gradient(ellipse at 86% 75%,#ff883b88,transparent 62%)}
.sfx-nba-trail{stroke:#ffab68;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 4px #ff7624)}
.sfx-nba-trail--2{stroke:#ffe1a8;stroke-width:1.4}.sfx-nba-trail--3{stroke:#ff6e36;stroke-width:5;opacity:0}
.sfx-nba-arc{stroke:#ffc481;stroke-width:1;stroke-dasharray:5 9;opacity:0;transform-origin:50% 80%}
.sfx-ball{position:absolute;right:-15px;bottom:12%;display:block;width:clamp(52px,29%,88px);aspect-ratio:1;opacity:0;transform:translate(-18px,22px) scale(.3);filter:drop-shadow(0 12px 8px #0008) drop-shadow(0 0 10px #ff873c55)}
.sfx-ball::before{content:'';position:absolute;inset:-11px;border:1px solid #ffc37575;border-radius:50%;box-shadow:0 0 22px #ff892b33;opacity:.65}
.sfx-ball-spin{display:block;width:100%;height:100%;overflow:visible}
.sfx-nba-spark{right:calc(6% + var(--i)*12%);bottom:calc(18% + var(--i)*12%);width:2px;height:15px;border-radius:2px;background:#fff3ce;box-shadow:0 0 8px #ff983c;opacity:0;transform:rotate(-35deg)}
.showcase-product:is(:hover,:focus-within) .sfx-ball{animation:sfx-nba-pop .95s cubic-bezier(.16,1,.3,1) both,sfx-nba-float 6s .95s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-ball-spin{animation:sfx-nba-spin 5.6s .15s cubic-bezier(.2,.6,.4,1) infinite}
.showcase-product:is(:hover,:focus-within) .sfx-ball::before{animation:sfx-nba-ring 3.1s .3s ease-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-nba-trail{animation:sfx-nba-trail 2.9s .05s ease-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-nba-trail--2{animation-delay:.13s}.showcase-product:is(:hover,:focus-within) .sfx-nba-trail--3{animation-delay:.2s}
.showcase-product:is(:hover,:focus-within) .sfx-nba-arc{animation:sfx-court-arc 3.4s .1s ease-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-nba-spark{animation:sfx-nba-spark 2.5s calc(var(--i)*.13s) ease-out infinite}
@keyframes sfx-nba-pop{0%{opacity:0;transform:translate(-22px,30px) scale(.3) rotate(-28deg)}58%{opacity:1;transform:translate(0,-6px) scale(1.08) rotate(5deg)}100%{opacity:1;transform:none}}
@keyframes sfx-nba-float{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes sfx-nba-spin{0%{transform:rotate(-25deg)}65%,100%{transform:rotate(335deg)}}
@keyframes sfx-nba-ring{0%{opacity:.7;transform:scale(.88)}70%,100%{opacity:0;transform:scale(1.25)}}
@keyframes sfx-nba-trail{0%{opacity:0;stroke-dashoffset:1}15%{opacity:.95}52%{opacity:.7;stroke-dashoffset:0}75%,100%{opacity:0;stroke-dashoffset:-1}}
@keyframes sfx-court-arc{0%{opacity:0;transform:scale(.7)}25%{opacity:.55}78%,100%{opacity:0;transform:scale(1.07)}}
@keyframes sfx-nba-spark{0%,10%{opacity:0;transform:translate(8px,13px) rotate(-35deg) scaleY(.3)}24%{opacity:1}55%,100%{opacity:0;transform:translate(-12px,-25px) rotate(-35deg) scaleY(.7)}}

/* Cyberpunk: a cyan scanner, stuttering electric shards and tracking brackets. */
.showcase-fx--cyberpunk .sfx-aura{background:radial-gradient(ellipse at 20% 75%,#00e9fd55,transparent 58%),radial-gradient(ellipse at 85% 18%,#f9ed4266,transparent 52%);filter:blur(9px)}
.sfx-cyber-grid{stroke:#68f4ff;stroke-width:1;stroke-dasharray:3 12;opacity:.2}
.sfx-cyber-scan{fill:#b5fcff15;stroke:#91faff;stroke-width:1;opacity:0;filter:drop-shadow(0 0 5px #00edff)}
.sfx-cyber-reticle{stroke:#fff15c;stroke-width:2.5;transform-origin:50% 50%;opacity:.8;filter:drop-shadow(2px 0 0 #00cce999)}
.sfx-cyber-shard{stroke:#70faff;stroke-width:3;opacity:0;filter:drop-shadow(0 0 5px #00eaff);stroke-dasharray:1;stroke-dashoffset:1}
.sfx-cyber-shard--2{stroke:#fff24b;stroke-width:2}.sfx-cyber-shard--3{stroke:#e8feff;stroke-width:1.3}
.showcase-product:is(:hover,:focus-within) .sfx-cyber-scan{animation:sfx-cyber-scan 3.6s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-cyber-reticle{animation:sfx-cyber-lock 3.8s steps(1,end) infinite}
.showcase-product:is(:hover,:focus-within) .sfx-cyber-shard{animation:sfx-cyber-zap 4.4s .12s linear infinite}
.showcase-product:is(:hover,:focus-within) .sfx-cyber-shard--2{animation-delay:.2s}.showcase-product:is(:hover,:focus-within) .sfx-cyber-shard--3{animation-delay:.28s}
@keyframes sfx-cyber-scan{0%{opacity:0;transform:translateY(-32%)}12%{opacity:.8}68%{opacity:.7;transform:translateY(54%)}80%,100%{opacity:0;transform:translateY(60%)}}
@keyframes sfx-cyber-lock{0%{opacity:0;transform:scale(1.055)}8%{opacity:.9;transform:scale(1.055)}12%{opacity:.45;transform:scale(.97) translateX(2px)}17%,72%{opacity:.85;transform:scale(1)}75%{opacity:.35;transform:translateX(-2px)}78%{opacity:.8;transform:translateX(1px)}82%,100%{opacity:.85;transform:none}}
@keyframes sfx-cyber-zap{0%,4%{opacity:0;stroke-dashoffset:1}10%{opacity:.95;stroke-dashoffset:0}13%{opacity:.2}16%{opacity:1}22%{opacity:.5}29%,100%{opacity:0;stroke-dashoffset:-1}}

/* Hades: the sigil is inscribed, then a green satellite circles its runes. */
.showcase-fx--hades .sfx-aura{background:radial-gradient(ellipse at 50% 59%,#81ffd27a,transparent 65%)}
.sfx-hades-sigil{stroke:#b6ffe0;stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;filter:drop-shadow(0 0 5px #41eaa7)}
.sfx-hades-sigil circle{stroke-dasharray:3 5}.sfx-hades-sigil path{stroke-width:1.9}
.sfx-hades-orbit{stroke:#85ffd0;stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0;filter:drop-shadow(0 0 3px #4efaaf)}
.sfx-hades-orbit circle{fill:#e6fff5;stroke:none;filter:drop-shadow(0 0 4px #88ffcc)}
.sfx-hades-spark{left:calc(12% + var(--i)*15%);bottom:calc(12% + var(--i)*7%);width:3px;height:8px;background:#d2ffec;border-radius:50%;box-shadow:0 0 7px #53ffae;opacity:0}
.showcase-product:is(:hover,:focus-within) .sfx-hades-sigil{animation:sfx-hades-awaken 1.1s cubic-bezier(.16,1,.3,1) both,sfx-hades-breathe 4.8s 1.1s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-hades-orbit{animation:sfx-hades-orbit 7s linear infinite}
.showcase-product:is(:hover,:focus-within) .sfx-hades-spark{animation:sfx-hades-wisp 3.5s calc(var(--i)*.27s) ease-in-out infinite}
@keyframes sfx-hades-awaken{from{opacity:0;transform:scale(.7) rotate(-25deg)}to{opacity:.9;transform:scale(1) rotate(0)}}
@keyframes sfx-hades-breathe{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.55;transform:scale(1.045)}}
@keyframes sfx-hades-orbit{0%{opacity:0;transform:rotate(-30deg)}12%{opacity:.9}88%{opacity:.9}100%{opacity:0;transform:rotate(330deg)}}
@keyframes sfx-hades-wisp{0%{opacity:0;transform:translate(0,15px) scale(.4)}25%{opacity:.9}70%{opacity:.55}100%{opacity:0;transform:translate(9px,-40px) scale(.2)}}

/* Silksong: three red silk strokes follow a bright, rising needle slash. */
.showcase-fx--silksong .sfx-aura{background:radial-gradient(ellipse at 50% 72%,#ff254d6b,transparent 64%)}
.sfx-silk-thread{stroke:#ff6b87;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 4px #ff315b);transform-origin:50% 70%}
.sfx-silk-thread--2{stroke:#ffbecb;stroke-width:.85}.sfx-silk-thread--3{stroke:#da1743;stroke-width:4}
.sfx-silk-needle{position:absolute;right:19%;top:14%;width:clamp(10px,4.5%,18px);height:73%;max-height:190px;transform:rotate(30deg) translateY(22px);transform-origin:50% 80%;opacity:0;filter:drop-shadow(0 0 6px #ffb7cd99)}
.sfx-silk-needle svg{width:100%;height:100%;overflow:visible;color:#fff0f3}
.showcase-product:is(:hover,:focus-within) .sfx-silk-thread{animation:sfx-silk-draw 3.8s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-silk-thread--2{animation-delay:.09s}.showcase-product:is(:hover,:focus-within) .sfx-silk-thread--3{animation-delay:.17s}
.showcase-product:is(:hover,:focus-within) .sfx-silk-needle{animation:sfx-needle-strike 3.8s cubic-bezier(.22,.8,.2,1) infinite}
@keyframes sfx-silk-draw{0%{opacity:0;stroke-dashoffset:1;transform:translateY(10px)}12%{opacity:.95}46%{opacity:.8;stroke-dashoffset:0;transform:none}76%{opacity:.5;stroke-dashoffset:-.16;transform:translateY(-4px)}100%{opacity:0;stroke-dashoffset:-1;transform:translateY(-10px)}}
@keyframes sfx-needle-strike{0%{opacity:0;transform:rotate(36deg) translateY(25px) scale(.8)}15%{opacity:1;transform:rotate(29deg) translateY(-8px) scale(1.03)}26%,66%{opacity:.85;transform:rotate(26deg) translateY(-3px) scale(1)}83%,100%{opacity:0;transform:rotate(21deg) translateY(-17px) scale(.95)}}

/* Elden Ring: a golden seal resolves from embers, with long, quiet light rays. */
.showcase-fx--elden .sfx-aura{background:radial-gradient(ellipse at 50% 50%,#f5ca6975,transparent 66%)}
.sfx-elden-halo{stroke:#ffe2a1;stroke-width:1.6;transform-box:fill-box;transform-origin:center;opacity:0;filter:drop-shadow(0 0 4px #e9b04c)}
.sfx-elden-halo circle{stroke-width:1.3}.sfx-elden-halo path{stroke-width:2}
.sfx-elden-rays{stroke:#ffdf90;stroke-width:.9;opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 3px #ffd073)}
.sfx-elden-ember{left:calc(9% + var(--i)*16%);bottom:calc(5% + var(--i)*6%);width:2px;height:5px;border-radius:50%;background:#fff0b8;box-shadow:0 0 7px #eebc63;opacity:0}
.showcase-product:is(:hover,:focus-within) .sfx-elden-halo{animation:sfx-elden-reveal 1.35s cubic-bezier(.16,1,.3,1) both,sfx-elden-lustre 5.5s 1.35s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-elden-rays{animation:sfx-elden-rays 5s ease-in-out infinite}
.showcase-product:is(:hover,:focus-within) .sfx-elden-ember{animation:sfx-elden-ember 4.5s calc(var(--i)*.34s) ease-out infinite}
@keyframes sfx-elden-reveal{from{opacity:0;transform:translateY(15px) scale(.83);filter:drop-shadow(0 0 10px #e9b04c)}to{opacity:.9;transform:none;filter:drop-shadow(0 0 4px #e9b04c)}}
@keyframes sfx-elden-lustre{0%,100%{opacity:.9}50%{opacity:.52}}
@keyframes sfx-elden-rays{0%{opacity:0;transform:scale(.88)}26%{opacity:.65}75%{opacity:.15}100%{opacity:0;transform:scale(1.08)}}
@keyframes sfx-elden-ember{0%{opacity:0;transform:translate(0,8px) rotate(-12deg)}19%{opacity:1}68%{opacity:.65}100%{opacity:0;transform:translate(-12px,-65px) rotate(25deg)}}

@media(width >= 1200px){.showcase-fx{overflow-clip-margin:24px}}
@media(width < 540px){.showcase-fx{overflow-clip-margin:12px;clip-path:inset(-12px)}.sfx-ball{right:-8px}.sfx-aura{inset:-3px}#products .showcase-product:is(:hover,:focus-within){transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){
  #products .showcase-product,#products .showcase-product::after,.showcase-fx,.showcase-fx *{animation:none!important;transition:none!important}
  #products .showcase-product:is(:hover,:focus-within){transform:none!important}
  .showcase-fx .sfx-ball{opacity:1;transform:none;filter:drop-shadow(0 5px 7px #0006)}
  .showcase-fx .sfx-ball::before{animation:none!important;opacity:.35}
  .showcase-fx .sfx-nba-arc,.showcase-fx .sfx-cyber-reticle,.showcase-fx .sfx-hades-sigil,.showcase-fx .sfx-elden-halo{opacity:.6;transform:none}
  .showcase-fx .sfx-silk-thread{opacity:.5;stroke-dashoffset:0;transform:none}
  .showcase-fx .sfx-silk-needle{opacity:.65;transform:rotate(26deg)}
  .showcase-fx .sfx-nba-trail,.showcase-fx .sfx-cyber-scan,.showcase-fx .sfx-cyber-shard,.showcase-fx .sfx-hades-orbit,.showcase-fx .sfx-elden-rays,.showcase-fx>i{display:none}
}