.pack{--ink:#1a0b3d;--aura:#a855f78c;width:var(--pack-w);height:calc(var(--pack-w) * 1.5);cursor:pointer;perspective:900px;background:0 0;border:none;padding:0;transition:filter .2s;position:relative;container-type:inline-size}@media (hover:hover){.pack:hover:not(:disabled){filter:brightness(1.08)}}.pack:focus-visible{box-shadow:var(--focus);border-radius:18px;outline:none}.pack:disabled{cursor:not-allowed}.pack:disabled:not(.pack--charging,.pack--tearing){filter:grayscale(.85)brightness(.55)}.pack:disabled:not(.pack--charging,.pack--tearing) *,.pack:disabled:not(.pack--charging,.pack--tearing) :before{animation:none}.pack:disabled:not(.pack--charging,.pack--tearing) .pack__spark{opacity:0}.pack--still:not(:hover,.pack--charging) *{animation-play-state:paused}.pack__aura{background:radial-gradient(closest-side, var(--aura), transparent 82%);pointer-events:none;border-radius:50%;animation:4.2s ease-in-out infinite pack-aura;position:absolute;inset:-24cqw -34cqw}.pack__ground{background:#00000061;border-radius:50%;height:9cqw;animation:4.2s ease-in-out infinite pack-ground;position:absolute;bottom:-11cqw;left:14%;right:14%}.pack__float{transform-style:preserve-3d;animation:4.2s ease-in-out infinite pack-float;position:absolute;inset:0}.pack__tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0}.pack__foil{position:absolute;inset:0}.pack__ink{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.pack__ink path{fill:var(--ink);stroke:var(--ink);stroke-width:2.2px;stroke-linejoin:miter}.pack__cast{opacity:.38;transform:translate(2.4px,3.2px)}.pack__cast path{fill:#000;stroke:#000}.pack__ink--cap{transform-origin:97% 100%;height:13%}.pack__cap{z-index:2;clip-path:polygon(0% 20%,4.17% 0%,8.33% 20%,12.5% 0%,16.67% 20%,20.83% 0%,25% 20%,29.17% 0%,33.33% 20%,37.5% 0%,41.67% 20%,45.83% 0%,50% 20%,54.17% 0%,58.33% 20%,62.5% 0%,66.67% 20%,70.83% 0%,75% 20%,79.17% 0%,83.33% 20%,87.5% 0%,91.67% 20%,95.83% 0%,100% 20%,100% 58%,94% 74%,100% 90%,100% 100%,0% 100%,0% 90%,6% 74%,0% 58%);transform-origin:97% 100%;height:13%;position:absolute;top:0;left:0;right:0;overflow:hidden}.pack__body{z-index:1;clip-path:polygon(0% 0%,100% 0%,100% 97%,95.83% 100%,91.67% 97%,87.5% 100%,83.33% 97%,79.17% 100%,75% 97%,70.83% 100%,66.67% 97%,62.5% 100%,58.33% 97%,54.17% 100%,50% 97%,45.83% 100%,41.67% 97%,37.5% 100%,33.33% 97%,29.17% 100%,25% 97%,20.83% 100%,16.67% 97%,12.5% 100%,8.33% 97%,4.17% 100%,0% 97%);position:absolute;inset:12.6% 0 0;overflow:hidden}.pack__base{background:var(--pack-bg);position:absolute;left:0;right:0}.pack__body>.pack__base{height:114.42%;top:-14.42%}.pack__cap>.pack__base{height:769.2%;top:0}.pack__body>.pack__sheen,.pack__body>.pack__strokes{height:114.42%;top:-14.42%;bottom:auto}.pack__cap>.pack__sheen,.pack__cap>.pack__strokes{height:769.2%;top:0;bottom:auto}.pack__dots{background:radial-gradient(circle,#ffffff29 0 .9cqw,#0000 1cqw) 0 0/4.4cqw 4.4cqw;position:absolute;inset:0;-webkit-mask:linear-gradient(170deg,#0000 30%,#000 85%);mask:linear-gradient(170deg,#0000 30%,#000 85%)}.pack__rays{background:repeating-conic-gradient(var(--rays,#ffffff24) 0 10deg, transparent 10deg 30deg);will-change:transform;width:150cqw;height:150cqw;margin:-75cqw 0 0 -75cqw;animation:50s linear infinite pack-rays;position:absolute;top:34%;left:50%;-webkit-mask:radial-gradient(closest-side,#000 40%,#0000 41%);mask:radial-gradient(closest-side,#000 40%,#0000 41%)}.pack__seal{background:repeating-linear-gradient(90deg, var(--seal,#0003) 0 1.4cqw, transparent 1.4cqw 4.2cqw);position:absolute;left:0;right:0}.pack__seal--top{border-bottom:.9cqw solid var(--ink);height:62%;top:0}.pack__seal--bottom{border-top:.9cqw solid var(--ink);height:9%;bottom:0}.pack__hint{font:700 2.4cqw/1 var(--font);letter-spacing:.22em;color:var(--hint,#ffffffa6);align-items:center;gap:1cqw;display:flex;position:absolute;bottom:9%;left:9cqw}.pack__hint svg{width:3.4cqw;height:3.4cqw}.pack__perf{border-top:.8cqw dashed #ffffffb3;transition:box-shadow .3s,border-color .3s;position:absolute;top:1.1cqw;left:5cqw;right:5cqw}.pack__strokes{background:linear-gradient(90deg,#0000 7%,#ffffff4d 7% 11%,#0000 11% 13.5%,#ffffff4d 13.5% 15%,#0000 15%);position:absolute;inset:0;-webkit-mask:linear-gradient(#0000 6%,#000 10% 55%,#0000 60%);mask:linear-gradient(#0000 6%,#000 10% 55%,#0000 60%)}.pack__shade{background:linear-gradient(90deg,#ffffff2e 0 2.2cqw,#0000 2.2cqw 84%,#00000042 84%);position:absolute;inset:0}.pack__holo{mix-blend-mode:color-dodge;opacity:var(--holo-o,.1);background:var(--holo,repeating-linear-gradient(115deg, #ff6b9d 0%, #ffd36b 5%, #6bffb5 10%, #6bc8ff 15%, #b06bff 20%, #ff6b9d 25%));background-size:220% 220%;background-position:calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%);will-change:transform;animation:9s ease-in-out infinite pack-holo;position:absolute;inset:-25%}.pack__glare{mix-blend-mode:overlay;opacity:var(--glare,0);background:radial-gradient(22% 15% at calc(var(--mx,.5) * 100%) calc(var(--my,.4) * 100%), #ffffffe6 60%, transparent 62%);transition:opacity .3s;position:absolute;inset:0}.pack__sheen{will-change:transform;background:linear-gradient(105deg,#0000 44%,#ffffff59 44% 49%,#0000 49% 51%,#ffffff59 51% 52.5%,#0000 52.5%);animation:5.5s ease-in-out infinite pack-sheen;position:absolute;inset:-30%;transform:translate(-55%)}.pack__art{text-align:center;color:#fff;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:5% 0 17%}.pack__art--center{justify-content:center;gap:3cqw}.pack__group{flex-direction:column;align-items:center;gap:2.2cqw;display:flex}.pack__brand{font:800 10cqw/1 var(--font-brand);letter-spacing:-.03em;-webkit-text-stroke:1.6cqw var(--ink);paint-order:stroke fill;text-shadow:0 1.2cqw 0 var(--ink);align-items:center;gap:1.8cqw;display:flex}.pack__brand svg{width:9cqw;height:9cqw}.pack__brand--small{font-size:6.5cqw}.pack__brand--small svg{width:6cqw;height:6cqw}.pack__kicker{font:700 3.1cqw/1 var(--font);letter-spacing:.4em;text-transform:uppercase;color:var(--kicker,#fffc)}.pack__title{max-width:88cqw;font:italic 600 8.5cqw/1.05 var(--font-display);letter-spacing:-.01em;-webkit-text-stroke:1.2cqw var(--ink);paint-order:stroke fill;text-shadow:0 .9cqw 0 var(--ink)}.pack__count{background:var(--count-bg,#fff);color:var(--ink);box-shadow:0 0 0 .9cqw var(--ink), 0 1.6cqw 0 .9cqw var(--ink);border-radius:3cqw;align-items:baseline;gap:1.6cqw;padding:1.4cqw 4cqw 1.6cqw;display:inline-flex}.pack__count b{font:800 8cqw/1 var(--font-brand)}.pack__count span{font:700 2.9cqw/1 var(--font);letter-spacing:.16em;text-transform:uppercase}.pack__fan{width:70cqw;height:50cqw;display:block;position:relative}.pack__fan:before{content:"";background:radial-gradient(closest-side,#ffecc88c,#0000 75%);border-radius:50%;animation:3s ease-in-out infinite pack-aura;position:absolute;inset:-6cqw}.pack__back{aspect-ratio:63/88;width:30cqw;box-shadow:inset 0 0 0 .9cqw #e5c46d, inset 0 0 0 1.5cqw #2a1d5c, 0 0 0 .9cqw var(--ink), 1.4cqw 1.8cqw 0 .9cqw #0000004d;transform-origin:50% 110%;background:radial-gradient(circle at 50% 46%,#fde68a2e 0 9cqw,#0000 9.2cqw),repeating-linear-gradient(45deg,#ffffff0a 0 1cqw,#0000 1cqw 2cqw),radial-gradient(circle at 50% 40%,#3e2b86,#170f36 75%);border-radius:2.2cqw;justify-content:center;align-items:center;margin-left:-15cqw;display:flex;position:absolute;bottom:0;left:50%}.pack__back span{width:13cqw;height:13cqw;font:700 8cqw/1 var(--font-display);color:#fde68a;background:radial-gradient(circle at 40% 35%,#4b3699,#1d1442);border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 0 0 .6cqw #e5c46d}.pack__back:first-child{transform:rotate(-17deg)}.pack__back:nth-child(2){transform:rotate(17deg)}.pack__back:nth-child(3){transform:translateY(-2cqw)}.pack__window{width:70cqw;height:66cqw;box-shadow:0 0 0 1.1cqw color-mix(in srgb, var(--set-b) 85%, #fff), 0 0 0 2cqw var(--ink), 1.6cqw 2cqw 0 2cqw #0000004d;border-radius:35cqw 35cqw 3cqw 3cqw;display:block;position:relative;overflow:hidden}.pack__window span{position:absolute}.pack__sky{background:radial-gradient(circle at 64% 34%, #fff8dc 0 7cqw, color-mix(in srgb, var(--set-b) 70%, #fff) 7cqw 10cqw, transparent 10cqw), linear-gradient(180deg, color-mix(in srgb, var(--set-b) 35%, #9ec5ff) 0%, color-mix(in srgb, var(--set-b) 75%, #fff) 52%, var(--set-b) 64%);inset:0}.pack__hills{background:linear-gradient(180deg, color-mix(in srgb, var(--set-a) 60%, #6b8bbd), color-mix(in srgb, var(--set-a) 85%, #000));clip-path:polygon(0 55%,14% 30%,26% 48%,42% 12%,55% 40%,70% 22%,86% 46%,100% 30%,100% 100%,0 100%);height:22%;top:46%;left:0;right:0}.pack__water{background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--set-b) 70%, #fff) 0 1cqw, transparent 1cqw 4cqw), linear-gradient(180deg, color-mix(in srgb, var(--set-a) 60%, #3d6aa8), var(--set-a));height:34%;bottom:0;left:0;right:0}.pack__chip{border-radius:var(--pill);font:700 2.6cqw/1 var(--font);letter-spacing:.2em;color:color-mix(in srgb, var(--set-b) 30%, #fff);box-shadow:inset 0 0 0 .35cqw color-mix(in srgb, var(--set-b) 60%, transparent);background:#0000004d;padding:1cqw 2.6cqw}.pack__frame{border-radius:3cqw;position:absolute;inset:4cqw 4cqw 15cqw;box-shadow:inset 0 0 0 .45cqw #fde68a99,inset 0 0 0 1.4cqw #00000040,inset 0 0 0 1.8cqw #fde68a47}.pack__crown{filter:drop-shadow(0 0 3cqw #fde68a99);width:18cqw;height:18cqw}.pack__mega{font:800 21cqw/.9 var(--font-brand);letter-spacing:.04em;background:linear-gradient(#fff7d6 10%,#fcd34d 42%,#b45309 58%,#fde68a 78%,#92400e);color:#0000;filter:drop-shadow(.8cqw 0 #000)drop-shadow(-.8cqw 0 #000)drop-shadow(0 .8cqw #000)drop-shadow(0 -.8cqw #000)drop-shadow(0 1.4cqw #000);-webkit-background-clip:text;background-clip:text}.pack__ribbon{width:46cqw;font:800 3cqw/1 var(--font-brand);letter-spacing:.18em;text-align:center;color:#2a1b03;background:linear-gradient(90deg,#b45309,#fde68a 50%,#b45309);padding:1.3cqw 0;position:absolute;top:7cqw;right:-11cqw;transform:rotate(38deg);box-shadow:0 0 0 .8cqw #000}.pack__pips{justify-content:center;gap:2cqw;display:flex;position:absolute;bottom:12%;left:0;right:0}.pack__pips i{background:currentColor;border-radius:.4cqw;width:2.4cqw;height:2.4cqw;transform:rotate(45deg);box-shadow:0 0 1.5cqw}.pack__pips i:first-child{color:#9ca3af}.pack__pips i:nth-child(2){color:#60a5fa}.pack__pips i:nth-child(3){color:#c084fc}.pack__pips i:nth-child(4){color:#fbbf24}.pack__spark{z-index:3;aspect-ratio:1;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:6cqw;filter:drop-shadow(.6cqw 0 0 var(--ink)) drop-shadow(-.6cqw 0 0 var(--ink)) drop-shadow(0 .6cqw 0 var(--ink)) drop-shadow(0 -.6cqw 0 var(--ink));background:#fff3b0;animation:2.8s ease-in-out infinite pack-twinkle;position:absolute}.pack__spark--1{top:18%;left:-6%}.pack__spark--2{width:4.5cqw;animation-delay:.9s;top:34%;right:-8%}.pack__spark--3{width:4cqw;animation-delay:1.6s;bottom:14%;left:4%}.pack__spark--4{width:5cqw;animation-delay:2.2s;top:6%;right:2%}.pack__leak{z-index:3;filter:blur(1cqw);opacity:0;background:radial-gradient(closest-side,#fffbe8,#ffdc96b3 45%,#0000);border-radius:50%;height:6cqw;position:absolute;top:10.5%;left:3%;right:3%}.pack__beam{pointer-events:none;filter:blur(2.5cqw);clip-path:polygon(8% 100%,92% 100%,100% 0,0 0);opacity:0;background:linear-gradient(#0000 15%,#ffd2ff59 55%,#fff6d6f2);height:110cqw;position:absolute;bottom:86%;left:6%;right:6%}.pack__peek{opacity:0;height:50%;position:absolute;top:-9%;left:0;right:0;transform:translateY(26cqw)}.pack__peek .pack__back{width:36cqw;margin-left:-18cqw;top:0;bottom:auto}.pack__peek .pack__back:first-child{transform:translate(-16cqw)rotate(-12deg)}.pack__peek .pack__back:nth-child(2){transform:translate(16cqw)rotate(12deg)}.pack__peek .pack__back:nth-child(3){box-shadow:inset 0 0 0 .9cqw #e5c46d, inset 0 0 0 1.5cqw #2a1d5c, 0 0 0 .9cqw var(--ink), 0 0 6cqw 2cqw #ffecbed9;transform:translateY(-6cqw)}.pack--charging .pack__float{animation:.7s cubic-bezier(.4,0,.6,1) infinite pack-shake}.pack--charging .pack__tilt{transform:none}.pack--charging .pack__glare,.pack--tearing .pack__glare{opacity:0}.pack--charging .pack__perf{border-color:#fff7d6;border-top-style:solid;box-shadow:0 0 2cqw .8cqw #ffecbee6}.pack--charging .pack__aura{opacity:1;filter:brightness(1.4);animation:none;transform:scale(1.18)}.pack--tearing .pack__float{animation:none}.pack--tearing .pack__cap,.pack--tearing .pack__ink--cap{animation:.5s cubic-bezier(.3,.7,.4,1) forwards pack-rip}.pack--tearing .pack__cast-cap{opacity:0;transition:opacity .15s}.pack--tearing .pack__leak{animation:.5s ease-out forwards pack-leak}.pack--tearing .pack__beam{animation:.7s ease-out .15s forwards pack-beam}.pack--tearing .pack__peek{animation:.45s cubic-bezier(.2,.9,.3,1.2) .2s forwards pack-peek}.pack--tearing .pack__tilt{animation:.3s ease-in .5s forwards pack-drop}.pack--tearing .pack__spark,.pack--tearing .pack__ground{opacity:0}.pack--free{--pack-bg:radial-gradient(70% 38% at 10% 97%, #f59e0b99, transparent 70%), radial-gradient(80% 48% at 94% 90%, #db2777a6, transparent 70%), radial-gradient(120% 75% at 50% 30%, #a970ff 0%, #8b4cf6 35%, #6d28d9 70%, #4c1d95 100%)}.pack--set{--ink:color-mix(in srgb, var(--set-a) 45%, #000);--aura:color-mix(in srgb, var(--set-b) 50%, transparent);--pack-bg:radial-gradient(90% 50% at 50% 40%, color-mix(in srgb, var(--set-b) 45%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--set-a) 75%, #fff 18%), var(--set-a) 42%, color-mix(in srgb, var(--set-a) 55%, #000))}.pack--mega{--ink:#000;--aura:#facc156b;--rays:#fde68a1f;--seal:#fde68a4d;--hint:#fde68ab3;--kicker:#fde68ad9;--count-bg:linear-gradient(180deg, #fff3c4, #fcd34d);--holo-o:.14;--holo:repeating-linear-gradient(115deg, #fde68a 0%, #f59e0b 6%, #fff7d6 12%, #b45309 18%, #fde68a 24%);--pack-bg:repeating-radial-gradient(circle at 50% 40%, #fde68a1a 0 .3cqw, transparent .3cqw 2.2cqw), repeating-linear-gradient(60deg, #fde68a0a 0 .3cqw, transparent .3cqw 3cqw), radial-gradient(90% 60% at 50% 36%, #45351a, #18120a 68%, #0a0704)}@keyframes pack-float{0%,to{transform:translateY(0)rotate(-1.2deg)}50%{transform:translateY(-3.5cqw)rotate(1.2deg)}}@keyframes pack-aura{50%{opacity:.72;transform:scale(1.08)}}@keyframes pack-ground{50%{opacity:.55;transform:scale(.82)}}@keyframes pack-sheen{0%,45%{transform:translate(-55%)}to{transform:translate(55%)}}@keyframes pack-holo{0%,to{transform:translate(-7%,-5%)}50%{transform:translate(7%,5%)}}@keyframes pack-twinkle{0%,to{opacity:0;transform:scale(0)rotate(0)}50%{opacity:1;transform:scale(1)rotate(45deg)}}@keyframes pack-rays{to{transform:rotate(360deg)}}@keyframes pack-shake{0%,to{transform:translate(0)rotate(0)scale(1.03)}20%{transform:translate(-1.2cqw)rotate(-1.6deg)scale(1.03)}40%{transform:translate(1.4cqw,-.4cqw)rotate(1.6deg)scale(1.04)}60%{transform:translate(-1.6cqw)rotate(-2deg)scale(1.05)}80%{transform:translate(1.6cqw,-.4cqw)rotate(2deg)scale(1.05)}}@keyframes pack-rip{35%{transform:rotate(-17deg)translate(-1cqw,-5cqw)}to{opacity:0;transform:translate(40cqw,-70cqw)rotate(40deg)}}@keyframes pack-leak{30%{opacity:1}to{opacity:.4}}@keyframes pack-beam{30%{opacity:1}to{opacity:.85}}@keyframes pack-peek{to{opacity:1;transform:none}}@keyframes pack-drop{to{opacity:0;transform:translateY(40%)scale(.92)}}
