.opening{--fx:#ff5b1f;background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--fx) 26%, transparent), transparent 62%), radial-gradient(circle at 50% 120%, #ff5b1f1f, transparent 50%), #0f0c0a}.pack3d-scene{--w:min(60vw, 230px);--h:calc(var(--w) * 1.6);--t:14px;--flap:calc(var(--h) * .13);--hint:#ff5b1f;--pack-body:#1b1714;--pack-s1:#ff5b1f;--pack-s2:#ffb21f;--pack-s3:#e8336b;--pack-accent:#ff5b1f;--pack-ink:#f3e9d6;width:var(--w);height:var(--h);perspective:1100px;touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.pack3d{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,translate .7s ease-in,opacity .6s;animation:4.5s ease-in-out infinite pack-idle;position:absolute;inset:0}.pack3d-scene[data-leaving] .pack3d{opacity:0;transition:translate .4s ease-in,opacity .35s ease-in;translate:0 30vh}.pack3d-scene[data-torn] .pack3d{animation:.45s ease-out pack-jolt}@keyframes pack-idle{0%,to{translate:0;rotate:y -7deg}50%{translate:0 -8px;rotate:y 7deg}}@keyframes pack-jolt{0%{scale:1}30%{scale:1.06}60%{scale:.98}to{scale:1}}.pack3d__face{left:0;right:0;top:var(--flap);backface-visibility:hidden;clip-path:polygon(0 0,100% 0,100% 98.5%,95% 100%,90% 98.5%,85% 100%,80% 98.5%,75% 100%,70% 98.5%,65% 100%,60% 98.5%,55% 100%,50% 98.5%,45% 100%,40% 98.5%,35% 100%,30% 98.5%,25% 100%,20% 98.5%,15% 100%,10% 98.5%,5% 100%,0 98.5%);position:absolute;bottom:0}.pack3d__front{transform:translateZ(calc(var(--t) / 2));background:linear-gradient(90deg, transparent 0 10%, #0000004d 10% 11%, transparent 11%), linear-gradient(180deg, var(--pack-s1) 0 4%, var(--pack-s2) 4% 8%, var(--pack-s3) 8% 12%, var(--pack-body) 12% 100%);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14;container-type:inline-size}.pack3d__pattern{pointer-events:none;position:absolute;inset:12% 0 0}.pack3d__back{transform:rotateY(180deg) translateZ(calc(var(--t) / 2));color:var(--pack-accent);font-family:var(--font-display);text-transform:uppercase;background:repeating-linear-gradient(45deg,#ffffff0a 0 8px,#0000 8px 16px),linear-gradient(165deg,#241d17,#110e0b);flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:1.6rem;display:flex}.pack3d__back small{font-family:var(--font-sans);color:var(--color-paper);letter-spacing:.08em;font-size:.7rem}.pack3d__side{background:linear-gradient(color-mix(in srgb, var(--pack-body) 88%, #fff), color-mix(in srgb, var(--pack-body) 75%, #000));backface-visibility:hidden;position:absolute}.pack3d__side--left,.pack3d__side--right{top:var(--flap);width:var(--t);bottom:0;left:calc(50% - var(--t) / 2)}.pack3d__side--left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));filter:brightness(.7)}.pack3d__side--right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2));filter:brightness(.85)}.pack3d__side--bottom{height:var(--t);left:0;right:0;top:calc(var(--flap) + (var(--h) - var(--flap)) / 2 - var(--t) / 2);transform:rotateX(-90deg) translateZ(calc((var(--h) - var(--flap)) / 2));filter:brightness(.5)}.pack3d__perfs{background:repeating-linear-gradient(#0000 0 3.2cqw,#0a0d1173 3.2cqw 6cqw) padding-box content-box;width:7cqw;padding:0 1.6cqw;position:absolute;top:0;bottom:0}.pack3d__perfs--left{left:0}.pack3d__perfs--right{right:0}.pack3d__emblem{width:42cqw;color:var(--pack-accent);filter:drop-shadow(0 0 4cqw color-mix(in srgb, var(--pack-accent) 50%, transparent));position:absolute;top:16%;left:50%;translate:-50%}.pack3d__emblem[data-spin]{animation:9s linear infinite reel-spin}@keyframes reel-spin{to{rotate:360deg}}.pack3d__title{text-align:center;font-family:var(--font-display);text-transform:uppercase;color:var(--pack-ink);text-shadow:.05em .05em #0009;font-size:19cqw;line-height:.95;position:absolute;top:52%;left:0;right:0}.pack3d__title[data-long]{font-size:16cqw}.pack3d__title small{letter-spacing:.4em;color:var(--pack-accent);font-size:8cqw;display:block}.pack3d__badge{white-space:nowrap;background:var(--color-paper);color:var(--color-paper-ink);letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:1.6cqw 5cqw;font-size:5cqw;font-weight:800;position:absolute;bottom:9%;left:50%;translate:-50%}.pack3d__sheen{pointer-events:none;background:linear-gradient(105deg,#0000 30%,#ffffff80 46%,#0000 62%) 0 0/260% 100%;background-position:var(--shine,50%) 0;mix-blend-mode:overlay;transition:background-position .2s;position:absolute;inset:0}.pack3d__flap{height:var(--flap);transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(calc(var(--cut) * 16deg)) translateY(calc(var(--cut) * -4px));position:absolute;top:0;left:0;right:0}.pack3d__flap-face{backface-visibility:hidden;clip-path:polygon(0 18%,5% 0,10% 18%,15% 0,20% 18%,25% 0,30% 18%,35% 0,40% 18%,45% 0,50% 18%,55% 0,60% 18%,65% 0,70% 18%,75% 0,80% 18%,85% 0,90% 18%,95% 0,100% 18%,100% 100%,0 100%);position:absolute;inset:0}.pack3d__flap-front{transform:translateZ(calc(var(--t) / 2));background:var(--color-paper)}.pack3d__flap-back{transform:rotateY(180deg) translateZ(calc(var(--t) / 2));background:#1b1714}.pack3d__tearline{border-bottom:2px dashed #2a1c108c;position:absolute;bottom:3px;left:5%;right:5%}.pack3d__cutline{height:4px;width:calc(var(--cut) * 90%);box-shadow:0 0 8px #fff, 0 0 18px var(--hint), 0 0 30px var(--hint);background:#fff;border-radius:4px;position:absolute;bottom:2px;left:5%}.pack3d-scene[data-torn] .pack3d__flap{animation:.75s cubic-bezier(.2,.7,.3,1) forwards flap-fly}@keyframes flap-fly{to{opacity:0;transform:translate3d(110px,-220px,120px)rotate(42deg)rotateX(85deg)}}.pack3d__light{background:radial-gradient(ellipse 50% 70% at 50% 100%, var(--hint), transparent 72%);filter:blur(8px);opacity:0;pointer-events:none;height:120%;position:absolute;bottom:30%;left:4%;right:4%;transform:translateZ(0)}.pack3d-scene[data-torn] .pack3d__light{animation:1.4s ease-out .15s forwards light-rise}@keyframes light-rise{0%{opacity:0;transform-origin:bottom;scale:1 .3}40%{opacity:1;scale:1.15 1}to{opacity:.85;scale:1}}.pack3d__cards{left:8%;right:8%;top:calc(var(--flap) + 6px);aspect-ratio:63/88;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.18,.9,.25,1.05) .45s;position:absolute;transform:translateY(0)}.pack3d-scene[data-torn] .pack3d__cards{transform:translateY(-64%)}.pack3d__card{transform:translateZ(calc((var(--i) - 2) * 1.8px));background:radial-gradient(circle,#ff5b1f40,#0000 45%),repeating-linear-gradient(45deg,#ffffff0a 0 6px,#0000 6px 12px),linear-gradient(160deg,#241d17,#110e0b);border:3px solid #3b3128;border-radius:6%;position:absolute;inset:0}.pack3d__hint{left:8%;right:8%;top:calc(var(--flap) - 8px);pointer-events:none;height:16px;position:absolute}.pack3d__hint span{width:16px;height:16px;box-shadow:0 0 12px #fff, 0 0 24px var(--hint);background:#fff;border-radius:50%;animation:1.8s ease-in-out infinite hint-slide;position:absolute;top:0}@keyframes hint-slide{0%{opacity:0;left:0}15%{opacity:1}80%{opacity:1}to{opacity:0;left:calc(100% - 16px)}}.stack-area{cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;outline:none}.stack-stage{aspect-ratio:63/88;width:min(72vw,320px,71.5909dvh - 178.977px);position:relative}.stack-card{perspective:1200px;animation:.5s cubic-bezier(.2,.8,.2,1) backwards stack-deal;animation-delay:calc(var(--k,0) * 80ms);transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s;position:absolute;inset:0}@keyframes stack-deal{0%{opacity:0;translate:0 55%;scale:.6}}.stack-card[data-pos=top]{z-index:10}.stack-card[data-pos=under-1]{z-index:9;transform:translateY(4%)scale(.96)rotate(-2deg)}.stack-card[data-pos=under-2]{z-index:8;transform:translateY(7.5%)scale(.92)rotate(2.5deg)}.stack-card[data-pos=under-3]{z-index:7;transform:translateY(10.5%)scale(.88)rotate(-3deg)}.stack-card[data-pos=under-4]{z-index:6;transform:translateY(13%)scale(.84)rotate(3deg)}.stack-card[data-pos=gone]{z-index:11;transform:translate3d(calc(var(--dir,-1) * 140%), -8%, 0) rotate(calc(var(--dir,-1) * 24deg));opacity:0;pointer-events:none}.stack-tilt{width:100%;height:100%;transform-style:preserve-3d;transition:transform .15s ease-out}.reveal-haptic{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.reveal-lift{width:100%;height:100%;transform-style:preserve-3d}.stack-card .flip__inner{transition-duration:.5s}.stack-card .flip[data-slow] .flip__inner{transition-duration:.95s}.stack-card[data-pos=top] .flip[data-flipped]{animation:.6s ease-out reveal-lift}.stack-card[data-pos=top] .flip[data-slow][data-flipped]{animation-duration:1s}@keyframes reveal-lift{0%{transform:translateZ(0)scale(1)}45%{transform:translateZ(140px)scale(1.07)}to{transform:translateZ(0)scale(1)}}.reveal-lift[data-charging]{animation:charge-shake var(--charge,1s) ease-in forwards}@keyframes charge-shake{0%{filter:drop-shadow(0 0 0 var(--fx));transform:translate(0)scale(1)}20%{transform:translate(-1px,1px)scale(1.01)}35%{transform:translate(2px,-1px)scale(1.02)}50%{filter:drop-shadow(0 0 18px var(--fx));transform:translate(-3px,2px)scale(1.03)}62%{transform:translate(4px,-2px)scale(1.04)}74%{transform:translate(-5px,2px)scale(1.05)}86%{transform:translate(6px,-3px)scale(1.06)}to{filter:drop-shadow(0 0 40px var(--fx));transform:translate(0)scale(1.08)}}.flip__face[data-aura]{animation:1.6s ease-in-out infinite aura-pulse}.flip__face[data-aura="3"]{--aura-size:10px}.flip__face[data-aura="4"]{--aura-size:16px}.flip__face[data-aura="5"]{--aura-size:22px}.flip__face[data-aura="6"]{--aura-size:30px;animation-duration:.9s}@keyframes aura-pulse{0%,to{filter:drop-shadow(0 0 calc(var(--aura-size,10px) * .6) var(--aura))}50%{filter:drop-shadow(0 0 var(--aura-size,10px) var(--aura)) drop-shadow(0 0 calc(var(--aura-size,10px) * 1.6) var(--aura))}}.reveal-new{z-index:1;pointer-events:none;padding:3px 10px;font-size:26px;position:absolute;top:-3%;left:-4%}.reveal-rays{pointer-events:none;background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fx) 60%, transparent) 0deg 5deg, transparent 5deg 16deg);opacity:0;transition:opacity .4s;animation:14s linear infinite rays-spin;position:absolute;inset:-70%;-webkit-mask:radial-gradient(circle,#000 12%,#0000 58%);mask:radial-gradient(circle,#000 12%,#0000 58%)}.reveal-rays[data-on]{opacity:1}@keyframes rays-spin{to{rotate:360deg}}.spark{width:var(--s);height:var(--s);margin:calc(var(--s) / -2);background:var(--c);box-shadow:0 0 10px var(--c);pointer-events:none;animation:spark-fly var(--d) cubic-bezier(.1, .8, .3, 1) forwards;border-radius:50%;position:absolute;top:50%;left:50%}@keyframes spark-fly{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx), var(--dy)) scale(0);opacity:0}}.confetti{top:-20px;left:var(--x);background:var(--c);pointer-events:none;width:8px;height:14px;animation:confetti-fall var(--d) linear var(--delay) forwards;position:fixed}@keyframes confetti-fall{to{transform:translate3d(var(--drift), 110vh, 0) rotate(var(--r))}}.tier-stamp{font-family:var(--font-display);text-transform:uppercase;color:var(--fx);text-shadow:0 0 18px color-mix(in srgb, var(--fx) 70%, transparent);font-size:2.4rem;line-height:1;animation:.5s cubic-bezier(.2,1.6,.4,1) both stamp}@keyframes stamp{0%{opacity:0;transform:scale(2.4)rotate(-14deg)}to{opacity:1;transform:scale(1)rotate(-3deg)}}.screen-flash--soft{animation-name:screen-flash-soft!important}@keyframes screen-flash-soft{0%{opacity:.4}to{opacity:0}}.screen-flash{pointer-events:none;background:radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--fx) 60%, #fff) 40%, transparent 75%);animation:.6s ease-out forwards screen-flash;position:fixed;inset:0}.recap-card{animation:.55s cubic-bezier(.2,.9,.3,1.2) both recap-in;animation-delay:calc(var(--i) * 80ms)}@keyframes recap-in{0%{opacity:0;transform:perspective(600px)rotateY(90deg)translateY(20px)}to{opacity:1;transform:perspective(600px)rotateY(0)translateY(0)}}@media (prefers-reduced-motion:reduce){.pack3d__hint span,.tier-stamp,.recap-card,.pack3d,.pack3d__emblem,.reveal-rays,.confetti,.spark{animation:none!important}.reveal-lift[data-charging],.flip__face[data-aura],.stack-card[data-pos=top] .flip[data-flipped],.stack-card{animation:none}.stack-card{transition:opacity .25s}.screen-flash--soft{animation-name:screen-flash-soft!important}@keyframes screen-flash-soft{0%{opacity:.4}to{opacity:0}}.screen-flash,.confetti,.spark{display:none}}
