.cards-container{opacity:0;pointer-events:none;width:100%;height:700px;transform:translateY(15%)scale(1.1)scale(var(--container-scale,1.1));z-index:0;perspective:1000px;transition:transform .2s ease-in-out;position:absolute;top:0;left:0}.cards-container.pack-opened{animation:1s ease-in-out both cardsOpened}@keyframes cardsOpened{0%{transform:translateY(25%)scale(1.1)scale(var(--container-scale,1.1))}to{transform:translateY(0)scale(.9)scale(var(--container-scale,.9));opacity:1}}.card img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}.card{pointer-events:auto;cursor:pointer;perspective:1000px;width:70%;max-width:320px;height:auto;transition:filter .3s;position:absolute;top:2%;left:50%}.card:not(.card-fallen){transition:transform .6s ease-in-out 1.3s,filter .3s}.card-fallen{animation-fill-mode:both}.card-fall-0{animation:1.6s cubic-bezier(.34,1.56,.64,1) .2s both cardJumpAndFall2}.card-fall-1{animation:1.7s cubic-bezier(.34,1.56,.64,1) .5s both cardJumpAndFall1}.card-fall-2{animation:1.2s cubic-bezier(.34,1.56,.64,1) .25s both cardJumpAndFall3}.card-fall-3{animation:1.3s cubic-bezier(.34,1.56,.64,1) .35s both cardJumpAndFall0}.card-fall-4{animation:1.6s cubic-bezier(.34,1.56,.64,1) .4s both cardJumpAndFall4}@media (max-width:767px){.card-fall-3{animation:1.6s cubic-bezier(.34,1.56,.64,1) .2s both cardJumpAndFall0-m}.card-fall-1{animation:1.7s cubic-bezier(.34,1.56,.64,1) .5s both cardJumpAndFall1-m}.card-fall-2{animation:1.3s cubic-bezier(.34,1.56,.64,1) .35s both cardJumpAndFall3-m}.card-fall-4{animation:1.6s cubic-bezier(.34,1.56,.64,1) .4s both cardJumpAndFall4-m}}@keyframes cardJumpAndFall0-m{0%{transform:translate(-50%)translateY(50px)rotate(-1deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(-144%)translateY(-100%)rotate(-5deg)rotateX(0)rotateY(-360deg)translateZ(0)}}@keyframes cardJumpAndFall0{0%{transform:translate(-50%)translateY(50px)rotate(-1deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(-310%)translateY(110px)rotate(-10deg)rotateX(0)rotateY(-360deg)translateZ(0)}}@keyframes cardJumpAndFall1-m{0%{transform:translate(calc(2px - 50%))translateY(47px)rotate(-.5deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(-120%)translateY(120%)rotate(-10deg)rotateX(0)rotateY(-360deg)translateZ(0)}}@keyframes cardJumpAndFall1{0%{transform:translate(calc(2px - 50%))translateY(47px)rotate(-.5deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(-180%)translateY(50px)rotate(-5deg)rotateX(0)rotateY(-360deg)translateZ(0)}}@keyframes cardJumpAndFall2{0%{transform:translate(calc(4px - 50%))translateY(44px)rotate(0)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(-50%)translateY(30px)rotate(0)rotateX(360deg)rotateY(0)translateZ(0)}}@keyframes cardJumpAndFall3-m{0%{transform:translate(calc(6px - 50%))translateY(41px)rotate(.5deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(43%)translateY(-100%)rotate(5deg)rotateX(0)rotateY(360deg)translateZ(0)}}@keyframes cardJumpAndFall3{0%{transform:translate(calc(6px - 50%))translateY(41px)rotate(.5deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(80%)translateY(50px)rotate(5deg)rotateX(0)rotateY(360deg)translateZ(0)}}@keyframes cardJumpAndFall4-m{0%{transform:translate(calc(8px - 50%))translateY(38px)rotate(1deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(43%)translateY(115%)rotate(7deg)rotateX(0)rotateY(360deg)translateZ(0)}}@keyframes cardJumpAndFall4{0%{transform:translate(calc(8px - 50%))translateY(38px)rotate(1deg)rotateX(0)rotateY(0)translateZ(0)}to{transform:translate(210%)translateY(110px)rotate(10deg)rotateX(0)rotateY(360deg)translateZ(0)}}.card-wrapper{-webkit-user-select:none;user-select:none;width:100%;height:auto;transform-style:preserve-3d;transform-origin:50%;will-change:transform;cursor:pointer;border-radius:29px;transition:transform .3s ease-in-out,box-shadow .3s}.card-shadow{transform-origin:50%;transition:transform .3s ease-in-out}.card-wrapper.rotated{transform-style:preserve-3d;animation:.75s cubic-bezier(.34,1.7,.64,1) both card-flip-smooth}@keyframes card-flip-smooth{0%{transform:rotateY(0)translateZ(0)}to{transform:rotateY(180deg)translateZ(0)}}.card-front{z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%;top:0;left:0}.card-back{z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0;transform:rotateY(180deg)}.foil{--red:#f80e35;--yellow:#eedf10;--green:#21e985;--blue:#0dbde9;--violet:#c929f1;--scanlines-space:1px;--scanlines-light:#666;--scanlines-dark:black;pointer-events:none;background-image:repeating-linear-gradient(110deg,var(--violet),var(--blue),var(--green),var(--yellow),var(--red),var(--violet),var(--blue),var(--green),var(--yellow),var(--red),var(--violet),var(--blue),var(--green),var(--yellow),var(--red)),repeating-linear-gradient(90deg,var(--scanlines-dark)calc(var(--scanlines-space)*0),var(--scanlines-dark)calc(var(--scanlines-space)*2),var(--scanlines-light)calc(var(--scanlines-space)*2),var(--scanlines-light)calc(var(--scanlines-space)*4));background-blend-mode:overlay;filter:brightness(1.1)contrast(1.1)saturate(1.2);mix-blend-mode:color-dodge;opacity:.75;-webkit-mask-image:var(--pattern-url,url(/pattern.svg));mask-image:var(--pattern-url,url(/pattern.svg));-webkit-mask-image:var(--pattern-url,url(/pattern.svg));background-size:400% 400%,cover;border-radius:29px;position:absolute;inset:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@supports (-moz-orient:inline){.foil{mix-blend-mode:normal}}@keyframes smoothGoldGlow{0%,to{box-shadow:0 0 25px #ffb964cc,0 0 40px #f5aa5580,0 0 55px #eb9b464d}50%{box-shadow:0 0 50px #ffc36e,0 0 80px #f5af5fb3,0 0 110px #eba05080}}@keyframes smoothPurpleGlow{0%,to{box-shadow:0 0 20px #af91cd99,0 0 40px #af91cd59}50%{box-shadow:0 0 40px #b698d4cc,0 0 60px #b698d480,0 0 80px #b698d44d}}@keyframes smoothBlueGlow{0%,to{box-shadow:0 0 15px #69b0edcc,0 0 30px #61a9e980,0 0 40px #78aad74d}50%{box-shadow:0 0 30px #78bcf4e6,0 0 50px #65abe5a6,0 0 70px #82b4dc66}}@keyframes smoothSilverGlow{0%,to{box-shadow:0 0 10px #dce6f08c,0 0 15px #c8d2dc80,0 0 25px #b4bec84d}50%{box-shadow:0 0 20px #f0faffbf,0 0 30px #dce6f099,0 0 50px #c8d2dc66}}.card.glow-gold:hover:not(.flipped):not(.flipping) .card-shadow,.card.glow-purple:hover:not(.flipped):not(.flipping) .card-shadow,.card.glow-blue:hover:not(.flipped):not(.flipping) .card-shadow,.card.glow-silver:hover:not(.flipped):not(.flipping) .card-shadow{transform:scale(1.05)}.card.glow-gold:hover .card-wrapper{box-shadow:0 0 20px #ffd700e6,0 0 30px #ffd700b3,0 0 40px #ffd70080}.card.glow-purple:hover .card-wrapper{box-shadow:0 0 20px #8a2be2e6,0 0 30px #8a2be2b3,0 0 40px #8a2be280}.card.glow-blue:hover .card-wrapper{box-shadow:0 0 20px #17b8ed99,0 0 30px #6bceef80,0 0 40px #54c1e666}.card.glow-gold:hover:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothGoldGlow}.card.glow-purple:hover:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothPurpleGlow}.card.glow-blue:hover:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothBlueGlow}.card.glow-silver:hover:not(.flipped):not(.flipping) .card-wrapper img{animation:6s ease-in-out infinite smoothSilverGlow}.card.glow-gold.flipping .card-wrapper img,.card.glow-gold.flipped .card-wrapper img{animation:3s ease-in-out infinite smoothGoldGlow}.card.glow-purple.flipping .card-wrapper img,.card.glow-purple.flipped .card-wrapper img{animation:3s ease-in-out infinite smoothPurpleGlow}.card.glow-blue.flipping .card-wrapper img,.card.glow-blue.flipped .card-wrapper img{animation:3s ease-in-out infinite smoothBlueGlow}.card.glow-silver.flipping .card-wrapper img,.card.glow-silver.flipped .card-wrapper img{animation:6s ease-in-out infinite smoothSilverGlow}@media (hover:none){.card.glow-gold:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothGoldGlow}.card.glow-purple:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothPurpleGlow}.card.glow-blue:not(.flipped):not(.flipping) .card-wrapper img{animation:3s ease-in-out infinite smoothBlueGlow}.card.glow-silver:not(.flipped):not(.flipping) .card-wrapper img{animation:6s ease-in-out infinite smoothSilverGlow}}.card.flipping .card-shadow,.card.flipped .card-shadow,.card.flipping:hover .card-shadow,.card.flipped:hover .card-shadow{transform:scale(1)}.card-wrapper img{border-radius:29px;width:100%;height:auto;transition:box-shadow .3s;display:block}.card-back img{filter:blur(20px)grayscale()}.card-wrapper.rotated .card-back img{filter:none;transition:none}.card-container{transform:rotateX(0)rotateY(0)}
.app{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100dvh;padding:2rem;display:flex;overflow:hidden}.tilt-wrapper{z-index:2;margin:0 auto;display:inline-block;position:relative}.image-container{cursor:pointer;display:inline-block;position:relative}.hover-image{width:auto;max-width:100%;height:auto;max-height:80vh;display:block}.wrapper{width:100%;display:inline-block;position:relative}@keyframes pack-open-btn-pulse{0%,to{transform:scale(1);box-shadow:0 4px 12px #ffa85266,0 2px 4px #ff96324d}50%{transform:scale(1.03);box-shadow:0 6px 20px #ffa85280,0 3px 8px #ff963266}}.pack-open-btn-pulse{animation:2s ease-in-out infinite pack-open-btn-pulse}.tilt-wrapper:active{cursor:grabbing}.peel-container{pointer-events:none;width:100%;height:100%;position:relative}.top{width:calc(100% - var(--angle-size,36px));z-index:100;pointer-events:auto;will-change:transform,clip-path,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:grab;background-image:url(/pack-top.png);background-position:100% 100%;background-repeat:no-repeat;background-size:cover;height:5%;position:absolute;top:0;right:0}.top.pack-opened{transform-origin:50%;transition:transform .6s ease-in-out!important;transform:translate(1200px)translateY(-50px)rotate(-10deg)!important}.top:active{cursor:grabbing}.angle-container{width:var(--angle-size,36px);transform-origin:100% 0;z-index:1000;cursor:grab;height:100%;transition:filter .3s ease-in-out;position:absolute;top:0;left:0;transform:translate(-100%)}.angle-container.active,.parallax-effect:hover .angle-container{filter:drop-shadow(5px 5px 5px #00000080)}.angle-container.active{cursor:grabbing}.angle{width:100%;height:100%;transform-style:preserve-3d;transform-origin:100% 100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);cursor:grab;z-index:1000;background-image:url(/pack-top.png);background-position:0;background-repeat:no-repeat;background-size:cover;transition:all .3s ease-in-out}.angle.active{cursor:grabbing}.angle:before{content:"";z-index:1000;background-image:var(--volume-gradient,linear-gradient(135deg,#ffffffb3,#f3f3f399 45%,#dddddd80 50%,#aaa6 50%,#bbbbbb80 56%,#ccc9 62%,#f3f3f399 80%,#ffffffb3 100%)),url("/pack-top copy.png");background-position:0,0;background-repeat:no-repeat,no-repeat;background-size:cover,cover;width:10%;height:10%;transition:width .3s ease-in-out,height .3s ease-in-out;position:absolute;top:0;left:0}.parallax-effect:hover .angle-container .angle:before{width:100%;height:100%}.parallax-effect:hover .angle-container .angle{clip-path:polygon(50% 50%,100% 0,100% 100%,0% 100%)}.angle.active{clip-path:polygon(50% 50%,100% 0,100% 100%,0% 100%);transition:none}.angle.active:before{width:100%;height:100%}.bottom{z-index:100;background-repeat:no-repeat;background-size:contain;flex-direction:column;justify-content:center;align-items:center;width:100%;height:95%;display:flex;position:absolute;bottom:0;left:0}.bottom:active{cursor:grabbing}.parallax-effect{aspect-ratio:473/718;background-image:var(--pack-parallax-bottom-bg,url(/pack-bottom-3.png));color:#fff;width:min(400px,100vw - 4rem);height:auto;transform-style:preserve-3d;background-position:bottom;background-repeat:no-repeat;background-size:contain;flex-direction:column;justify-content:center;align-items:center;display:flex}.inner-element{color:#fff;flex-direction:column;justify-content:center;align-items:center;font-size:35px;font-style:italic;display:flex;transform:translateZ(60px)}.glow-effect{top:var(--angle-size,36px);pointer-events:none;z-index:1;width:600px;height:600px;position:absolute;left:50%;transform:translate(-50%,-50%);transition:transform .5s ease-in-out,opacity .3s ease-out .1s!important}.animation-container{z-index:1;position:relative;transform:translateY(0)scale(1);transition:transform .3s ease-in-out,opacity .3s ease-out .1s!important}.animation-container.pack-opened{z-index:1;transform:translateY(1250px)scale(1.1)}.glow-center{width:calc(400*var(--angle-size,36px)/36);height:calc(25*var(--angle-size,36px)/36);background:radial-gradient(ellipse calc(200*var(--angle-size,36px)/36)calc(25*var(--angle-size,36px)/36)at center,#fff 0%,#ffffdcf2 15%,#fff096e6 25%,#ffdc78d9 35%,#ffc864cc 45%,#ffb450b3 55%,#ff963299 65%,#ff781e80 75%,#ff640066 85%,#ff500033 95%,transparent 100%);filter:blur(3px)brightness(1.2);z-index:10;animation:2s ease-in-out infinite centerPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes centerPulse{0%,to{filter:blur(3px)brightness(1.2);opacity:1;transform:translate(-50%,-50%)scaleY(1)}50%{filter:blur(3px)brightness(1.5);opacity:.95;transform:translate(-50%,-50%)scaleY(1.4)}}.glow-backlight{pointer-events:none;z-index:3;opacity:1;width:600px;height:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)scale(1)}.glow-backlight.pack-opened{will-change:transform,opacity;animation:1.5s ease-out both flash-burst}@keyframes flash-burst{0%{opacity:1;transform:translate(-50%,-100%)scale(1)}15%{opacity:1;transform:translate(-50%,-50%)scale(4.2)}35%{opacity:1;transform:translate(-50%,-50%)scale(4)}to{opacity:0;transform:translate(-50%,-50%)scale(5)}}.glow-ellipse-1{filter:blur(200px);z-index:1;background:#ffa852;border-radius:50%;width:100%;height:66%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.glow-ellipse-2{filter:blur(140px);z-index:2;background:#ffd152;border-radius:50%;width:100%;height:66%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.glow-ellipse-3{filter:blur(35px)brightness(1.2);z-index:3;background:radial-gradient(85% 66%,#fff 0%,#ffffdcf2 15%,#fff096e6 25%,#ffdc78d9 35%,#ffc864cc 45%,#ffb450b3 55%,#ff963299 65%,#ff781e80 75%,#ff640066 85%,#ff500033 95%,#0000 100%);border-radius:50%;width:85%;height:66%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.glow-backlight-particles{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-95%)}.glow-backlight-particles.pack-opened{animation:2s ease-in-out both glow-backlight-particles}@keyframes glow-backlight-particles{0%{opacity:1;transform:translate(-50%,-100%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1)}85%{opacity:.8;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.2)}}.backlight-particle{opacity:0;filter:brightness(1.3);z-index:10;background:radial-gradient(circle,#fff 0%,#ffffdc 20%,#fff096f2 40%,#ffdc78e6 60%,#ffc864cc 80%,#ffb450b3 100%);border-radius:50%;width:15px;height:15px;animation:2s ease-out infinite backlightParticleFlyOut;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #fff,0 0 30px #ffffc8e6,0 0 45px #ffdc78cc,0 0 60px #ffc86499,0 0 75px #ff963266}.backlight-particle-1{--translate-x:400px;--translate-y:-250px;animation-duration:2s;animation-delay:0s}.backlight-particle-2{--translate-x:-350px;--translate-y:-280px;animation-duration:2.2s;animation-delay:.2s}.backlight-particle-3{--translate-x:420px;--translate-y:200px;animation-duration:2.4s;animation-delay:.4s}.backlight-particle-4{--translate-x:-380px;--translate-y:230px;animation-duration:2.1s;animation-delay:.6s}.backlight-particle-5{--translate-x:280px;--translate-y:-360px;animation-duration:2.3s;animation-delay:.8s}.backlight-particle-6{--translate-x:-320px;--translate-y:340px;animation-duration:2.5s;animation-delay:1s}.backlight-particle-7{--translate-x:450px;--translate-y:-150px;animation-duration:2.2s;animation-delay:1.2s}.backlight-particle-8{--translate-x:-400px;--translate-y:-180px;animation-duration:2.4s;animation-delay:1.4s}@keyframes backlightParticleFlyOut{0%{opacity:1;filter:brightness(1.5);transform:translate(-50%,-50%)translate(0)scale(2)}15%{opacity:1;filter:brightness(1.3)}50%{opacity:.9;filter:brightness(1.1)}85%{transform:translate(-50%,-50%)translate(var(--translate-x),var(--translate-y))scale(1);opacity:.7;filter:brightness()}to{transform:translate(-50%,-50%)translate(var(--translate-x),var(--translate-y))scale(1);opacity:0;filter:brightness(.8)}}