/* Shared physical footprint: the foil wrapper and the revealed card. */
:root{--opening-width:min(300px,72vw)}
.pack,.card-stack{width:var(--opening-width);aspect-ratio:390/594;height:auto}
.pack{display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 22px 25px #0008);transform:none}
.pack:hover{transform:translateY(-5px)}
.pack:before,.pack:after,.pack-rip{display:none}
.pack-body,.pack-tear{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 5px),linear-gradient(115deg,#555664,#192230 34%,#53515b 52%,#19222e 73%,#343b49);box-shadow:inset 0 0 0 1px #c7ad7b}
.pack-body{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20% 7% 9%;overflow:hidden}
.pack-body:after{content:'';position:absolute;bottom:0;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,#a39d8733 0 2px,#e5d7a166 2px 3px)}
.pack-tear{z-index:2;transform-origin:100% 10%;background:repeating-linear-gradient(90deg,#eadcaf33 0 2px,#24263744 2px 4px),linear-gradient(120deg,#a58e63,#393f4d 45%,#d1b77d)}
.pack-tear span{margin:5% 0 0;font-size:9px;letter-spacing:2px}
.pack-brand{font-size:9px}.pack-symbol{font-size:110px}.pack-title{font-size:31px}.pack-bottom{font-size:9px}
.opening .pack{animation:wrapper-steady 1.15s both}
.opening .pack-body{animation:wrapper-fall 1.15s both}
.opening .pack-tear{animation:toothed-peel 1.15s both}
.opening .pack-aura,.opening .particles i{animation:none;opacity:0}
@keyframes wrapper-steady{0%,100%{transform:none}14%{transform:rotate(-1.5deg)}24%{transform:rotate(1deg)}35%,65%{transform:none}}
@keyframes toothed-peel{0%,15%{transform:none}32%{transform:translate(1%,-1%) rotate(1deg)}52%{transform:translate(9%,-10%) rotate(12deg)}73%{transform:translate(25%,-26%) rotate(28deg);opacity:1}100%{transform:translate(45%,-45%) rotate(40deg);opacity:0}}
@keyframes wrapper-fall{0%,62%{transform:none;opacity:1}100%{transform:translateY(100px) rotate(-7deg);opacity:0}}
/* Five distinct reveal signatures. */
body{overflow-x:clip}
.rarity-fx{position:absolute;inset:-15%;pointer-events:none;z-index:10;color:var(--reveal-color);animation:fx-finish var(--reveal-duration) forwards}
.reveal-r{--reveal-color:#c7d7e6;--reveal-duration:0.21s}
.reveal-sr{--reveal-color:#6bbcff;--reveal-duration:0.35s}
.reveal-ssr{--reveal-color:#bd83ff;--reveal-duration:0.55s}
.reveal-ur{--reveal-color:#ffd574;--reveal-duration:0.8s}
.reveal-lr{--reveal-color:#ffdcab;--reveal-duration:1.45s}
.rarity-enter .stack-front{animation:reveal-soft 0.21s ease-out both}
.reveal-sr.rarity-enter .stack-front{animation:reveal-blue 0.35s cubic-bezier(.15,.8,.2,1) both}
.reveal-ssr.rarity-enter .stack-front{animation:reveal-purple 0.55s cubic-bezier(.15,.8,.2,1) both}
.reveal-ur.rarity-enter .stack-front{animation:reveal-gold 0.8s cubic-bezier(.15,.8,.2,1) both}
.reveal-lr.rarity-enter .stack-front{animation:reveal-legend 1.45s cubic-bezier(.16,.8,.2,1) both;z-index:8}
.stack-front.departing{animation:stack-leave 0.215s ease-in forwards!important}
.reveal-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--reveal-color),transparent 40%),transparent 65%);opacity:0;animation:halo-grow var(--reveal-duration) both}
.reveal-ring{position:absolute;left:50%;top:50%;width:95%;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 24px currentColor;animation:ring-expand var(--reveal-duration) both}
.ring-two{animation-delay:0.06s}
.reveal-rays{position:absolute;inset:-25%;background:repeating-conic-gradient(from 20deg,transparent 0 14deg,#ffdda54d 15deg 16deg,transparent 17deg 30deg);mask-image:radial-gradient(circle,transparent 15%,#000 35%,transparent 65%);animation:ray-bloom var(--reveal-duration) both}
.reveal-streak{position:absolute;inset:10%;background:linear-gradient(115deg,transparent 35%,#bfe9ff99 49%,transparent 63%);animation:blue-sweep 0.35s both;mix-blend-mode:screen}
.reveal-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;background:currentColor;box-shadow:0 0 10px currentColor;animation:spark-flight var(--reveal-duration) both;animation-delay:calc(var(--n)*0.004s);border-radius:1px}
.rarity-announcement{position:absolute;left:-15%;right:-15%;top:4%;text-align:center;font-size:60px;font-weight:800;letter-spacing:14px;text-shadow:0 0 24px currentColor;animation:rarity-title var(--reveal-duration) both}
.rarity-announcement small{display:block;font-size:9px;letter-spacing:3px;margin-top:5px}
.reveal-r .rarity-fx{display:none}
.reveal-sr .reveal-ring,.reveal-sr .reveal-rays,.reveal-sr .reveal-spark,.reveal-sr .rarity-announcement{display:none}
.reveal-ssr .reveal-rays,.reveal-ssr .reveal-streak,.reveal-ssr .rarity-announcement{display:none}
.reveal-ur .reveal-streak{display:none}
.reveal-lr .reveal-streak{display:none}
.reveal-lr .reveal-rays{inset:-70%;animation-duration:1.45s}
.reveal-lr .reveal-ring{border-width:2px}.reveal-lr .rarity-announcement{font-size:86px;top:-3%;color:#fff3ce}
.lr-celebration:before{content:'';position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#1b103122,#05020ddd 75%);animation:cinema-veil 1.45s both}
.lr-celebration .card-stack{z-index:40}
@keyframes reveal-soft{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes reveal-blue{from{opacity:0;transform:translateX(-25px) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes reveal-purple{0%{opacity:0;transform:rotateY(-70deg) scale(.9)}65%{opacity:1;transform:rotateY(5deg) scale(1.02)}100%{transform:none}}
@keyframes reveal-gold{0%,12%{opacity:0;transform:scale(.65) translateY(50px)}50%{opacity:1;transform:scale(1.09);filter:brightness(1.35)}100%{opacity:1;transform:none;filter:none}}
@keyframes reveal-legend{0%,22%{opacity:0;transform:scale(.45) rotateY(-70deg) translateY(80px)}47%{opacity:1;transform:scale(1.13) rotateY(8deg);filter:brightness(1.6) drop-shadow(0 0 45px #ffdc9b)}68%{transform:scale(1.04) rotateY(-3deg);filter:brightness(1.1) drop-shadow(0 0 25px #e2a8ff)}100%{opacity:1;transform:none;filter:none}}
@keyframes halo-grow{0%{opacity:0;transform:scale(.3)}38%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes ring-expand{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.3)}40%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes ray-bloom{0%,20%{opacity:0;transform:scale(.3) rotate(-20deg)}45%{opacity:.9}100%{opacity:0;transform:scale(1.5) rotate(25deg)}}
@keyframes spark-flight{0%,25%{opacity:0;transform:rotate(var(--angle)) translateX(20px)}40%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(330px) rotate(100deg)}}
@keyframes blue-sweep{from{opacity:0;transform:translateX(-80%)}45%{opacity:.7}to{opacity:0;transform:translateX(80%)}}
@keyframes rarity-title{0%,23%{opacity:0;transform:translateY(25px) scale(.7)}45%,64%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-20px)}}
@keyframes cinema-veil{0%{opacity:0}18%,75%{opacity:1}100%{opacity:0}}
@keyframes fx-finish{0%,99%{visibility:visible}100%{visibility:hidden}}
@media(max-width:500px){:root{--opening-width:min(280px,72vw)}.pack,.card-stack{width:var(--opening-width)}.rarity-announcement{font-size:48px}.reveal-lr .rarity-announcement{font-size:65px}}
@media(prefers-reduced-motion:reduce){.opening .pack,.opening .pack-body,.opening .pack-tear,.rarity-enter .stack-front{animation:none!important}.rarity-fx,.lr-celebration:before{display:none}.opening .pack-tear{opacity:0}.stack-front.departing{opacity:0}}

.pack-tear{clip-path:polygon(0 0,100% 0,100% 9%,96% 11%,92% 9%,88% 11%,84% 9%,80% 11%,76% 9%,72% 11%,68% 9%,64% 11%,60% 9%,56% 11%,52% 9%,48% 11%,44% 9%,40% 11%,36% 9%,32% 11%,28% 9%,24% 11%,20% 9%,16% 11%,12% 9%,8% 11%,4% 9%,0% 11%)}
.pack-body{clip-path:polygon(0% 11%,4% 9%,8% 11%,12% 9%,16% 11%,20% 9%,24% 11%,28% 9%,32% 11%,36% 9%,40% 11%,44% 9%,48% 11%,52% 9%,56% 11%,60% 9%,64% 11%,68% 9%,72% 11%,76% 9%,80% 11%,84% 9%,88% 11%,92% 9%,96% 11%,100% 9%,100% 100%,0 100%)}

/* Continuous SVG strip; no solid wrapper remains behind the lifted teeth. */
.pack-tear{clip-path:none;background:none;box-shadow:none;overflow:visible;pointer-events:none}
.tear-svg{display:block;width:100%;height:100%;overflow:visible}
.opening .pack-tear{animation:none;transform:none}
.opening .pack{animation-duration:2.7s}
.opening .pack-body{animation:wrapper-fall-progressive 2.7s both}
@keyframes wrapper-fall-progressive{0%,74%{transform:none;opacity:1}100%{transform:translateY(100px) rotate(-7deg);opacity:0}}

/* Let the full tear finish before the empty wrapper leaves. */
.opening .pack-body{animation:none}
.opening.tear-finished .pack-body{animation:wrapper-exit .65s both}
@keyframes wrapper-exit{0%,20%{transform:none;opacity:1}100%{transform:translateY(100px) rotate(-7deg);opacity:0}}
/* Shared card/booster size, including the readable mobile layout. */
:root{--opening-width:min(360px,78vw)}
@media(max-width:500px){:root{--opening-width:min(330px,82vw)}}