/* PACKHUNT pack opening: a lit stage, a foil pack that follows the pointer, a tear with foil fragments,
   three cards drawn out of the pack, turned one by one, the best one last in the centre. */
#rip{position:fixed;inset:0;z-index:100;display:none;background:radial-gradient(90% 70% at 50% 45%,#13213a,#070d18 75%);overflow:hidden}
#rip.show{display:block}
.op-stage{position:absolute;inset:0;--lx:50%;--ly:40%;touch-action:none;user-select:none;-webkit-user-select:none}
.op-light{position:absolute;inset:-20%;background:radial-gradient(28% 28% at var(--lx) var(--ly),#2a4a7a66,transparent 70%);pointer-events:none}
/* the bloom behind the best card: a wide, slow wash of the tier's colour, never a hard ring */
.op-bloom{position:absolute;left:50%;top:50%;width:140vmin;height:140vmin;transform:translate(-50%,-52%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tc,#4fa9ff) 28%,transparent),color-mix(in srgb,var(--tc,#4fa9ff) 8%,transparent) 45%,transparent 72%);opacity:0;transition:opacity 1.4s ease;pointer-events:none;z-index:1}
.op-bloom.on{opacity:1}
.op-bloom.strong{opacity:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--tc,#4fa9ff) 42%,transparent),color-mix(in srgb,var(--tc,#4fa9ff) 12%,transparent) 45%,transparent 72%)}
.op-vignette{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,transparent 40%,#04070e 100%);pointer-events:none}
.op-close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;background:#ffffff12;color:var(--ink);font-size:20px;display:grid;place-items:center;z-index:20}
.op-title{position:absolute;left:0;right:0;top:max(26px,6vh);text-align:center;font-size:15px;color:var(--ink2);padding:0 60px;transition:opacity .3s;z-index:12}
.op-title.big{font-size:clamp(20px,3.2vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.op-hint{position:absolute;left:0;right:0;bottom:max(30px,8vh);text-align:center;font-size:14px;color:var(--ink2);animation:opBreathe 2.2s ease-in-out infinite;z-index:12;transition:opacity .25s}
@keyframes opBreathe{0%,100%{opacity:.55}50%{opacity:1}}

/* the pack */
.op-pack-wrap{position:absolute;left:50%;top:50%;width:min(300px,62vw);aspect-ratio:1000/1096;transform:translate(-50%,-52%);perspective:1400px;z-index:2}
.op-pack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;cursor:pointer;filter:drop-shadow(0 40px 50px #000c)}
.op-pack.in{animation:opPackIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes opPackIn{from{opacity:0;transform:translateY(40px) scale(.9) rotateY(-25deg)}to{opacity:1}}
.op-layer{position:absolute;inset:0;background:url(/assets/pack_front.png) center/contain no-repeat}
.op-top{clip-path:polygon(0% 0%,100% 0%,100% 13.5%,95% 12.2%,89% 13.8%,82% 12.0%,75% 13.6%,68% 11.7%,61% 13.9%,54% 12.3%,47% 13.7%,40% 11.8%,33% 14.0%,26% 12.1%,19% 13.6%,12% 11.9%,6% 13.9%,0% 12.2%);transform-origin:4% 100%;z-index:3}
.op-body{clip-path:polygon(0% 12.2%,6% 13.9%,12% 11.9%,19% 13.6%,26% 12.1%,33% 14.0%,40% 11.8%,47% 13.7%,54% 12.3%,61% 13.9%,68% 11.7%,75% 13.6%,82% 12.0%,89% 13.8%,95% 12.2%,100% 13.5%,100% 100%,0% 100%);z-index:2}
.op-glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(40% 30% at var(--gx,30%) var(--gy,20%),#ffffff55,transparent 70%),linear-gradient(calc(100deg + var(--ga,0deg)),transparent 42%,#ffffff22 50%,transparent 58%);-webkit-mask:url(/assets/pack_front.png) center/contain no-repeat;mask:url(/assets/pack_front.png) center/contain no-repeat;mix-blend-mode:screen;opacity:.8}
.op-pack.shake{animation:opShake .4s ease-in-out}
@keyframes opShake{0%,100%{translate:0 0}20%{translate:-5px 1px;rotate:-1deg}40%{translate:5px -1px;rotate:1deg}60%{translate:-3px 0}80%{translate:3px 0}}
.op-pack.torn .op-top{animation:opTear 1s cubic-bezier(.5,0,.5,1) forwards}
.op-pack.torn .op-body{animation:opBodyPop .55s cubic-bezier(.3,1.4,.5,1)}
.op-pack.torn .op-glare{opacity:0;transition:opacity .3s}
@keyframes opTear{0%{transform:rotate(0)}14%{transform:rotate(-2deg) translate(1%,-1%)}24%{transform:rotate(-1deg) translate(.5%,-.5%)}100%{transform:rotate(-46deg) translate(-30%,-90%);opacity:0}}
@keyframes opBodyPop{0%{transform:scale(1)}35%{transform:scale(1.03,.985) translateY(.6%)}100%{transform:scale(1)}}
.op-pack.drop{animation:opDrop .6s cubic-bezier(.5,0,.8,.4) forwards;pointer-events:none}
@keyframes opDrop{to{transform:translateY(90vh) rotateZ(10deg) rotateY(25deg);opacity:0}}
.op-frag{position:absolute;width:10px;height:7px;border-radius:2px;background:linear-gradient(135deg,#3a5a92,#15284a);box-shadow:0 0 6px #6a8ac2aa;pointer-events:none;animation:opFrag .9s cubic-bezier(.2,.6,.4,1) forwards;z-index:6}
@keyframes opFrag{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}

/* the cards: one layer over the stage, each card absolutely centred and placed by transform */
.op-cards{position:absolute;inset:0;z-index:1;perspective:1500px;pointer-events:none}
.op-cards.clip{clip-path:inset(0 0 var(--clipB,0px) 0)}
.op-cards.front{z-index:5}
.op-card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:591/1000;margin-left:calc(var(--cw) * -.5);margin-top:calc(var(--cw) * -.846);transform-style:preserve-3d;will-change:transform;container-type:inline-size;pointer-events:auto}
.op-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.7,.2,1)}
.op-flip.flipped{transform:rotateY(180deg)}
.op-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.5%/3.3%;overflow:hidden}
.op-front{transform:rotateY(180deg);background:#0a0f1a;box-shadow:0 24px 50px -18px #000d,0 2px 8px #0009,0 0 0 1px #00000066}
.op-front img{width:100%;height:100%;object-fit:cover;display:block}
.op-front .sheen{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,#ffffff70 50%,transparent 58%);transform:translateX(-80%);mix-blend-mode:screen;pointer-events:none}
.op-flip.flipped .op-front .sheen{animation:opSheen 1.1s .25s cubic-bezier(.4,0,.2,1) both}
@keyframes opSheen{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
.op-front .holo{position:absolute;inset:0;opacity:0;background:linear-gradient(calc(115deg + var(--ga,0deg)),#ff6a2b 0%,#ffd866 20%,#58d38b 40%,#4fa9ff 60%,#b47cff 80%,#ff6a2b 100%);background-size:300% 300%;background-position:var(--gx,50%) var(--gy,50%);mix-blend-mode:overlay;pointer-events:none;transition:opacity .6s}
.op-card.holo .op-flip.flipped .holo{opacity:.16}
/* the real card back */
.cback{width:100%;height:100%;border-radius:4.5%/3.3%;background:url(/assets/card_back.webp) center/cover no-repeat;box-shadow:0 24px 50px -18px #000d,0 2px 8px #0009,0 0 0 1px #00000066;position:relative;overflow:hidden}
.cback b{display:none}
.op-card.best.lit .op-front{box-shadow:0 0 0 1px #ffffff55,0 30px 80px -20px #000,0 0 110px -10px color-mix(in srgb,var(--tc) 38%,transparent)}
.op-ring{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;border:3px solid var(--tc);transform:translate(-50%,-50%) scale(1);opacity:.9;pointer-events:none;animation:opRing 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes opRing{to{transform:translate(-50%,-50%) scale(14);opacity:0}}
.op-price{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font-family:var(--mono);font-size:14px;color:var(--ink);background:#0b1424e0;border:1px solid #ffffff22;padding:4px 11px;border-radius:999px;opacity:0;transition:opacity .4s,transform .4s;white-space:nowrap}
.op-price small{color:var(--tc);margin-left:6px;font-size:11px;letter-spacing:.06em}
.op-card.lit .op-price{opacity:1;transform:translateX(-50%) translateY(0)}
.op-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--tc,#fff);box-shadow:0 0 8px var(--tc,#fff);pointer-events:none;animation:opSpark 1.1s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes opSpark{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.2);opacity:0}}

/* the end */
.op-sum{position:absolute;left:0;right:0;bottom:max(90px,15vh);text-align:center;color:var(--ink2);font-size:14px;opacity:0;transition:opacity .5s;z-index:12;padding:0 20px}
.op-sum.on{opacity:1}
.op-sum b{font-family:var(--mono);color:var(--ink);font-size:24px;display:block;margin-bottom:4px}
.op-actions{position:absolute;left:0;right:0;bottom:max(30px,6vh);display:flex;gap:10px;justify-content:center;opacity:0;transition:opacity .5s;z-index:12}
.op-actions.on{opacity:1}
@media(max-width:720px){.op-price{font-size:12px;bottom:-30px}.op-sum{bottom:max(84px,14vh)}.op-sum b{font-size:20px}}