/* UNPACK opening effects (stages U2-U5),ported from poc/cards.css:
   idle float and hover shake,tension,diagonal tear with curling foil,blast and particles. */
.opening-light {position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.charge-aura,.light-column,.impact-flash,.shockwave {position:absolute;pointer-events:none;opacity:0;}
.charge-aura {width:74%;aspect-ratio:1;left:50%;top:46%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--accent-rgb),.05) 20%,rgba(var(--accent-rgb),.18) 40%,transparent 65%);}
.light-column {left:50%;top:-8%;width:62%;height:125%;transform:translateX(-50%);filter:blur(8px);mask-image:radial-gradient(ellipse,#000 25%,transparent 70%);background:conic-gradient(from 165deg at 50% 48%,transparent 0deg,rgba(var(--accent-rgb),.25) 12deg,#b5e8ff53 15deg,rgba(var(--accent-rgb),.25) 18deg,transparent 30deg,transparent 180deg,rgba(var(--accent-rgb),.28) 192deg,#b5e8ff45 195deg,rgba(var(--accent-rgb),.28) 198deg,transparent 210deg);}
.shockwave {left:50%;top:46%;width:210px;aspect-ratio:1;border:2px solid rgba(var(--accent-rgb),.85);border-radius:50%;transform:translate(-50%,-50%) scale(.15);box-shadow:0 0 18px rgba(var(--accent-rgb),.32),inset 0 0 16px rgba(var(--accent-rgb),.2);}
.shockwave-late {border-width:1px;border-style:dashed;}
.impact-flash {inset:0;background:radial-gradient(ellipse at 50% 46%,#e0f2ffc9,rgba(var(--accent-rgb),.25) 24%,transparent 62%);}
.tear-light {position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;filter:drop-shadow(0 0 7px #69d0ff);}
.tear-light::before {content:'';position:absolute;inset:0;background:#e0f2ff;clip-path:var(--seam-outline);}
.sleeve::after {content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--pack-outline);opacity:0;mix-blend-mode:soft-light;background:linear-gradient(116deg,transparent 30%,#02061165 39%,#e0f2ff66 41%,transparent 46%,#ffffff44 61%,#03071155 63%,transparent 70%);background-size:150% 100%;}

/* Torn foil:each fragment is a row of folds that clone the whole pack print. */
.foil-fragments {position:absolute;inset:0;display:none;pointer-events:none;transform-style:preserve-3d;}
.foil-fragment {position:absolute;inset:0;transform-style:preserve-3d;transform-origin:6% 7%;will-change:transform,opacity;}
.foil-fold {position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fold-origin);will-change:transform;}
.foil-face {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.foil-front {clip-path:var(--face-outline);transform:translateZ(.2px);}
.foil-edge {position:absolute;inset:0;clip-path:var(--foil-edge-outline);opacity:.9;background:linear-gradient(110deg,#9299a3,#e0f2ff 30%,#a6aeb8 47%,#fff 64%,#929ba7);}
.foil-inner {clip-path:var(--inner-outline);transform-origin:var(--fold-axis) 50%;transform:rotateY(180deg) translateZ(.2px);}
.foil-inner::before {content:'';position:absolute;inset:0;clip-path:var(--pack-outline);transform:scaleX(-1);transform-origin:var(--fold-axis) 50%;background:repeating-linear-gradient(96deg,#fff2 0 1px,#15192318 1px 3px),linear-gradient(115deg,#616875,#d7dce1 23%,#e0f2ff 38%,#858e9c 44%,#e8eaf0 63%,#697482 85%,#d8dce4);}

/* Sequence phases,driven by data-opening on the showcase. */
.showcase[data-opening] .collectible,.showcase[data-opening] .card-flipper {transition:none;}
.showcase[data-opening] .sleeve-float {animation:none;transition:none;translate:0 0;rotate:0deg;transform:translate(-50%,-47%) rotate(-11deg) scale(1.045);}
.showcase[data-state=opening] .tear-strip {visibility:hidden;pointer-events:none;}
.showcase[data-state=opening] .seal-hint {display:none;}
.showcase[data-opening=charge] .sleeve-float {animation:pack-charge .62s linear both;}
.showcase[data-opening=charge] .charge-aura {animation:aura-charge .62s ease-in both;}
.showcase[data-opening=charge] .sleeve::after {animation:foil-tension .62s ease-in-out both;}
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .tear-light {animation:diagonal-seam .62s linear both;}
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .sleeve > .sleeve-shell,
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .sleeve-depth {visibility:hidden;}
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .foil-fragments {display:block;}
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .foil-top {animation:foil-rip-top 1.65s linear both;}
.showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .foil-bottom {animation:foil-rip-bottom 1.72s linear both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .shockwave {animation:shock-expand 1.15s cubic-bezier(.12,.65,.2,1) both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .shockwave-late {animation-delay:.12s;animation-duration:1.4s;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .impact-flash {animation:impact-light .72s ease-out both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .light-column {animation:column-release 2.1s ease-out both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .stage {animation:stage-impact .46s ease-out;}
.showcase[data-opening=reveal] .active .card-shine {animation:hero-shine .9s ease-out both;}
.showcase[data-opening] .ground-shadow {opacity:.32;transform:scale(.7);}

/* Particles */
.burst {position:absolute;inset:0;pointer-events:none;z-index:35;overflow:hidden;}
.confetti {position:absolute;left:50%;top:46%;width:4px;height:9px;border-radius:1px;background:var(--accent);transform:translate(-50%,-50%);animation:particle 1.3s var(--ease) both;}
.opening-particle {position:absolute;left:50%;top:46%;pointer-events:none;background:var(--accent);opacity:0;will-change:transform,opacity;}
.opening-particle.foil-speck {width:7px;height:13px;clip-path:polygon(12% 0,100% 16%,77% 100%,0 72%);background:linear-gradient(125deg,#e0f2ff,var(--accent) 35%,#20435a 48%,#bcd4de 65%,var(--accent));filter:drop-shadow(0 0 3px #69d0ff77);animation:foil-spray var(--life) linear both;}
.opening-particle.foil-speck:nth-child(4n) {width:4px;height:8px;}
.opening-particle.streak {width:84px;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#69d0ff,#e0f2ff);box-shadow:0 0 7px #029ee666;animation:light-streak .6s cubic-bezier(.08,.7,.2,1) both;}
.opening-particle.ember {width:5px;height:5px;border-radius:50%;background:#e0f2ff;box-shadow:0 0 5px #b5e8ff,0 0 14px #69d0ff;animation:foil-spray var(--life) linear both;}

/* Front-facing blast,fired once the wrapper has opened. */
.opening-explosion {position:absolute;inset:0;z-index:32;pointer-events:none;mix-blend-mode:screen;mask-image:linear-gradient(180deg,transparent,#000 7%,#000 91%,transparent);}
.opening-explosion > div {position:absolute;left:50%;top:46%;opacity:0;pointer-events:none;will-change:transform,opacity;}
.explosion-core {width:min(440px,92%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e0f2ff 0 8%,#b5e8ff 13%,#69d0ff 20%,#029ee6aa 30%,rgba(var(--accent-rgb),.48) 42%,transparent 66%);}
.explosion-cloud {width:min(580px,110%);aspect-ratio:1;filter:blur(9px);background:radial-gradient(ellipse at 34% 37%,#029ee6af,transparent 28%),radial-gradient(ellipse at 66% 35%,#b5e8ff99,transparent 27%),radial-gradient(ellipse at 68% 63%,rgba(var(--accent-rgb),.7),transparent 29%),radial-gradient(ellipse at 32% 64%,#69d0ff99,transparent 30%),radial-gradient(circle,#b5e8ff66,transparent 55%);}
.explosion-rays {width:min(640px,125%);aspect-ratio:1;background:repeating-conic-gradient(from 7deg,transparent 0deg 10deg,#b5e8ffb0 11deg,#e0f2ff 12deg,transparent 13deg 20deg);mask-image:radial-gradient(circle,transparent 9%,#000 23%,#0008 41%,transparent 65%);}
.explosion-ring {width:min(380px,82%);aspect-ratio:1;border:4px solid #e0f2ff;border-radius:50%;box-shadow:0 0 16px 4px #69d0ff99,inset 0 0 18px 2px rgba(var(--accent-rgb),.65);}
.explosion-ring-late {border-width:1px;border-color:var(--accent);box-shadow:0 0 20px 3px rgba(var(--accent-rgb),.7),inset 0 0 12px #b5e8ff66;}
.explosion-flare {width:min(720px,130%);height:4px;background:linear-gradient(90deg,transparent,#69d0ff 20%,#fff 50%,#69d0ff 80%,transparent);box-shadow:0 0 13px 3px #b5e8ff66;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-core {animation:explosion-core .68s ease-out both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-cloud {animation:explosion-cloud 1.15s ease-out both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-rays {animation:explosion-rays .82s cubic-bezier(.1,.65,.2,1) both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-ring {animation:explosion-ring .95s cubic-bezier(.08,.65,.2,1) both;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-ring-late {animation-delay:.1s;animation-duration:1.12s;}
.showcase:is([data-opening=flight],[data-opening=reveal]) .explosion-flare {animation:explosion-flare .48s ease-out both;}

@keyframes pack-idle-float {0%,100% {translate:0 0;rotate:0deg;} 50% {translate:0 -9px;rotate:1.2deg;}}
@keyframes pack-hover-shake {
  0%,100% {translate:0 0;rotate:0deg;}
  16% {translate:-2px -.5px;rotate:-.7deg;}
  33% {translate:2px .5px;rotate:.7deg;}
  50% {translate:-1.5px -1px;rotate:-.5deg;}
  67% {translate:1.5px .5px;rotate:.5deg;}
  84% {translate:-1px -.5px;rotate:-.3deg;}
}
@keyframes pack-charge {
  0% {transform:var(--pack-start-transform);translate:var(--pack-start-translate);rotate:var(--pack-start-rotate);animation-timing-function:cubic-bezier(.4,0,.65,1);}
  38% {transform:translate(-48%,-41%) rotate(-6deg) scale(.965,1.02);translate:0 0;rotate:0deg;animation-timing-function:cubic-bezier(.18,.7,.22,1);}
  100% {transform:translate(-50%,-47%) rotate(-11deg) scale(1.045);translate:0 0;rotate:0deg;}
}
@keyframes foil-tension {0% {opacity:0;background-position:100% 50%;} 60% {opacity:.85;} 100% {opacity:0;background-position:0% 50%;}}
@keyframes aura-charge {0% {opacity:0;transform:translate(-50%,-50%) scale(1.25);} 65% {opacity:.35;} 100% {opacity:.75;transform:translate(-50%,-50%) scale(.7);}}
@keyframes diagonal-seam {0% {opacity:0;clip-path:inset(0 0 0 100%);} 10% {opacity:.9;clip-path:inset(0 0 0 82%);} 78% {opacity:.9;clip-path:inset(0 82% 0 0);} 100% {opacity:0;clip-path:inset(0 100% 0 0);}}
@keyframes foil-rip-top {
  0% {transform:translate(0,0) rotate(0) rotateY(0);opacity:1;animation-timing-function:ease-in;}
  22% {transform:translate(-1%,-1%) rotate(-7deg) rotateY(2deg);opacity:1;}
  32% {transform:translate(-3%,-2%) rotate(-13deg) rotateY(4deg);opacity:1;animation-timing-function:cubic-bezier(.12,.7,.2,1);}
  56% {transform:translate(-40%,-30%) rotate(-25deg) rotateY(14deg);opacity:1;}
  78% {transform:translate(-70%,-26%) rotate(-46deg) rotateY(-4deg);opacity:.7;animation-timing-function:ease-in;}
  100% {transform:translate(-92%,8%) rotate(-74deg) rotateY(20deg);opacity:0;}
}
@keyframes foil-rip-bottom {
  0% {transform:translate(0,0) rotate(0) rotateY(0);opacity:1;animation-timing-function:ease-in;}
  22% {transform:translate(0,1%) rotate(4deg) rotateY(-2deg);opacity:1;}
  30% {transform:translate(2%,3%) rotate(8deg) rotateY(-4deg);opacity:1;animation-timing-function:cubic-bezier(.15,.65,.2,1);}
  56% {transform:translate(30%,26%) rotate(22deg) rotateY(-16deg);opacity:1;}
  78% {transform:translate(60%,57%) rotate(42deg) rotateY(-8deg);opacity:.6;animation-timing-function:ease-in;}
  100% {transform:translate(82%,95%) rotate(62deg) rotateY(-26deg);opacity:0;}
}
@keyframes shock-expand {0% {opacity:.85;transform:translate(-50%,-50%) scale(.2) rotateX(35deg);} 100% {opacity:0;transform:translate(-50%,-50%) scale(3.3) rotateX(60deg);}}
@keyframes impact-light {0% {opacity:0;} 10% {opacity:.8;} 100% {opacity:0;}}
@keyframes column-release {0% {opacity:0;transform:translateX(-50%) scaleX(.15);} 16% {opacity:1;transform:translateX(-50%) scaleX(1);} 65% {opacity:.5;} 100% {opacity:0;transform:translateX(-50%) scaleX(1.4);}}
@keyframes stage-impact {0%,100% {transform:translate(0,0);} 15% {transform:translate(-4px,4px);} 33% {transform:translate(4px,-2px);} 55% {transform:translate(-2px,1px);} 76% {transform:translate(1px,0);}}
@keyframes particle {0% {opacity:0;transform:translate(0,0) rotate(0);} 12% {opacity:1;} 100% {opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr));}}
@keyframes foil-spray {
  0% {opacity:0;transform:translate(0,0) rotate(0) scale(.5);}
  5% {opacity:1;}
  24% {opacity:1;transform:translate(calc(var(--dx) * .72),calc(var(--dy) * .72)) rotate(calc(var(--dr) * .45)) scale(1);animation-timing-function:ease-out;}
  65% {opacity:.85;}
  100% {opacity:0;transform:translate(var(--dx),calc(var(--dy) + var(--fall))) rotate(var(--dr)) scale(.25);}
}
@keyframes light-streak {0% {opacity:0;transform:rotate(var(--angle)) translateX(12px) scaleX(.15);} 14% {opacity:1;} 100% {opacity:0;transform:rotate(var(--angle)) translateX(var(--streak-end)) scaleX(1.2);}}
@keyframes hero-shine {0% {background-position:110% 50%;opacity:.35;} 40% {opacity:.85;} 100% {background-position:-10% 50%;opacity:.44;}}
@keyframes explosion-core {0% {opacity:0;transform:translate(-50%,-50%) scale(.08);} 14% {opacity:1;transform:translate(-50%,-50%) scale(.75);} 36% {opacity:.85;} 100% {opacity:0;transform:translate(-50%,-50%) scale(1.5);}}
@keyframes explosion-cloud {0% {opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-8deg);} 18% {opacity:.9;} 100% {opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(8deg);}}
@keyframes explosion-rays {0% {opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-7deg);} 16% {opacity:1;} 100% {opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(7deg);}}
@keyframes explosion-ring {0% {opacity:0;transform:translate(-50%,-50%) scale(.08);} 10% {opacity:1;} 55% {opacity:.7;} 100% {opacity:0;transform:translate(-50%,-50%) scale(1.9);}}
@keyframes explosion-flare {0% {opacity:0;transform:translate(-50%,-50%) scaleX(.04);} 18% {opacity:1;transform:translate(-50%,-50%) scaleX(.8);} 100% {opacity:0;transform:translate(-50%,-50%) scaleX(1.25);}}

@media (max-width:760px) {
  .shockwave {width:140px;}
  .opening-particle.streak {width:42px;}
  .showcase:is([data-opening=burst],[data-opening=flight],[data-opening=reveal]) .stage {animation:none;}
  .explosion-ring {border-width:2px;}
  .explosion-ring-late {border-width:1px;}
  .explosion-cloud {filter:blur(6px);}
}
/* Reduced motion:no float,shake,tilt,tear,blast or particles;the pack opens straight to the first card. */
@media (prefers-reduced-motion:reduce) {
  /* No inherited visibility transition may delay the completed card's hit area. */
  .experience,.experience *,.experience *::before,.experience *::after {transition:none !important;}
  .sleeve,.card-rotator {transform:none !important;}
  .confetti,.opening-light,.opening-explosion,.opening-particle,.tear-light,.foil-fragments {display:none !important;}
}