/* Pack opening facelift. Scoped to the reveal overlay. */
#openOverlay #openStage { isolation:isolate; }
#openOverlay #openStage.pack-charging { animation:none; }
#openOverlay #openStage::after { content:none; }
#openOverlay #openStage::before {
  inset:0; border-radius:inherit; mix-blend-mode:normal;
  background:radial-gradient(ellipse at 50% 44%,rgba(255,183,222,.22),rgba(174,112,220,.09) 30%,transparent 65%);
}
#openOverlay #openStage.pack-charging::before { animation:cg-charge-light .65s ease-out both; }
#openOverlay #openStage.pack-burst::before { animation:cg-release-light .33s ease-out both; }
#openOverlay #openStage.impact-flash::before { animation:cg-card-light .65s ease-out both; }
#openOverlay #openStage.impact-heavy { animation:none; }
#openOverlay .suspense-pack { animation:cg-pack-float 4s ease-in-out infinite; will-change:transform; }
/* A stationary radial halo has no moving rectangular foil edges. */
#openOverlay .suspense-pack::before {
  inset:-16% -32%; z-index:-1; opacity:.65; border-radius:50%;
  background:radial-gradient(ellipse,rgba(229,116,191,.2),rgba(149,98,202,.08) 42%,transparent 70%);
  transform:none; animation:none; clip-path:none; mix-blend-mode:normal;
}
#openOverlay .suspense-pack::after {
  bottom:-6%; opacity:.35; animation:none;
  background:radial-gradient(ellipse,rgba(12,4,18,.5),transparent 70%); filter:none;
}
#openOverlay .suspense-pack img {
  filter:drop-shadow(0 14px 18px rgba(12,4,18,.4));
  transition:filter .3s ease;
}
#openOverlay .suspense-pack.pressed { animation:cg-pack-press .18s ease-out both; }
#openOverlay .suspense-pack.shaking { animation:cg-pack-charge .3s ease-in-out infinite; }
#openOverlay .suspense-pack.charged img {
  filter:brightness(1.06) drop-shadow(0 0 15px rgba(237,142,199,.32)) drop-shadow(0 16px 20px rgba(12,4,18,.4));
}
#openOverlay .suspense-pack.bursting { animation:cg-pack-release .33s cubic-bezier(.2,.7,.25,1) forwards; }
#openOverlay .suspense-pack.bursting::before { animation:none; }
#openOverlay .suspense-hint { animation:none; letter-spacing:.025em; }
#openOverlay .reveal-stage.cards-emerging .reveal-card {
  animation-name:cg-card-arrive; animation-duration:.62s;
  animation-timing-function:cubic-bezier(.2,.75,.25,1);
}
#openOverlay .reveal-card:not(.reveal-diamond-etched) .reveal-face-back {
  background:radial-gradient(ellipse at 30% 12%,rgba(255,177,220,.18),transparent 58%),linear-gradient(150deg,#713055,#40243e 60%,#2a203b);
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,213,237,.3),inset 0 0 0 7px rgba(255,213,237,.04);
}
#openOverlay .reveal-card.reveal-diamond-etched .reveal-face-back {
  border-color:rgba(173,225,255,.5);
  background:radial-gradient(ellipse at 30% 12%,rgba(143,221,255,.2),transparent 58%),linear-gradient(150deg,#285071,#213b60 60%,#222943);
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 0 0 1px rgba(173,225,255,.35),inset 0 0 0 7px rgba(173,225,255,.05);
}
#openOverlay .reveal-card.reveal-diamond-etched .reveal-face-back::before { opacity:.3; }
#openOverlay .reveal-card .reveal-face-back::after {
  content:""; width:66%; height:42%;
  background:url('../images/logo.png') center / contain no-repeat;
  opacity:.88; animation:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
#openOverlay .pack-xp-shine { display:none; }
@keyframes cg-pack-float { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-5px) rotate(.4deg); } }
@keyframes cg-pack-press { from { transform:scale(1); } to { transform:scale(.97); } }
@keyframes cg-pack-charge { 0%,100% { transform:translateY(-2px) rotate(-.7deg) scale(1.025); } 50% { transform:translateY(-4px) rotate(.7deg) scale(1.035); } }
@keyframes cg-pack-release { 0% { opacity:1; transform:translateY(-3px) scale(1.03); } 40% { opacity:1; transform:translateY(-8px) scale(1.07); } 100% { opacity:0; transform:translateY(-24px) scale(1.13); } }
@keyframes cg-charge-light { from { opacity:0; } to { opacity:.6; } }
@keyframes cg-release-light { 0% { opacity:.6; } 35% { opacity:.85; } 100% { opacity:0; } }
@keyframes cg-card-light { from { opacity:.16; } to { opacity:0; } }
@keyframes cg-card-arrive { from { opacity:0; transform:translateY(32px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) {
  #openOverlay .suspense-pack, #openOverlay .suspense-pack.shaking { animation:none; }
  #openOverlay .suspense-pack.bursting { animation:cg-reduced-release .2s ease-out forwards; }
  #openOverlay #openStage::before { animation:none!important; opacity:0!important; }
  #openOverlay .reveal-stage.cards-emerging .reveal-card { animation:none; opacity:1; transform:none; }
}
@keyframes cg-reduced-release { to { opacity:0; } }

/* Tear the actual wrapper into complementary pieces at its top seal. */
#openOverlay .suspense-pack {
  --tear-body:polygon(0 8%,8% 7%,16% 9%,24% 7%,32% 8%,40% 6%,48% 8%,56% 7%,64% 9%,72% 7%,80% 8%,88% 6%,100% 8%,100% 100%,0 100%);
  --tear-cap:polygon(0 0,100% 0,100% 8%,88% 6%,80% 8%,72% 7%,64% 9%,56% 7%,48% 8%,40% 6%,32% 8%,24% 7%,16% 9%,8% 7%,0 8%);
}
#openOverlay .suspense-pack img.pack-tear-cap {
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  object-fit:contain; clip-path:var(--tear-cap); visibility:hidden;
  pointer-events:none; transform-origin:85% 8%; z-index:3;
}
#openOverlay .suspense-pack.bursting { animation:none; }
#openOverlay .suspense-pack.bursting #suspensePackImg {
  clip-path:var(--tear-body); animation:cg-wrapper-drop .68s cubic-bezier(.2,.7,.25,1) forwards;
}
#openOverlay .suspense-pack.bursting .pack-tear-cap {
  visibility:visible; animation:cg-seal-rip .62s cubic-bezier(.25,.7,.3,1) forwards;
}
#openOverlay .pack-tear-light {
  position:absolute; top:7%; left:5%; width:90%; height:4%; border-radius:50%;
  background:radial-gradient(ellipse,#fff 0%,#ffe1f3 22%,rgba(255,131,206,.7) 42%,transparent 72%);
  box-shadow:0 0 25px rgba(255,150,216,.65); opacity:0; pointer-events:none; z-index:2;
}
#openOverlay .suspense-pack.bursting .pack-tear-light { animation:cg-seal-light .6s ease-out forwards; }
#openOverlay .suspense-pack.shaking { animation:cg-charge-intense .15s ease-in-out infinite; }
#openOverlay .suspense-pack.charged img {
  filter:brightness(1.12) drop-shadow(0 0 18px rgba(255,184,229,.65)) drop-shadow(0 16px 20px rgba(12,4,18,.4));
}
#openOverlay #openStage.pack-burst::before { animation:cg-release-light .68s ease-out forwards; }
#openOverlay #openStage.pack-charging::before {
  background:radial-gradient(ellipse at 50% 44%,rgba(255,151,214,.5),rgba(158,86,232,.2) 32%,transparent 65%);
}
#openOverlay .reveal-stage.cards-emerging .reveal-card { animation-name:cg-card-launch; }
#openOverlay .reveal-card:not(.reveal-diamond-etched) .reveal-face-back {
  background-image:var(--cg-normal-back,linear-gradient(145deg,#ffb5df,#ff76bf 46%,#ed3ba0));
  background-size:100% 100%; border:0; box-shadow:0 12px 28px rgba(0,0,0,.3);
}
#openOverlay .reveal-card.reveal-diamond-etched .reveal-face-back {
  background-image:var(--cg-diamond-back,linear-gradient(145deg,#dffcff,#63d8ff 24%,#367ce0 58%,#0a2459));
  background-size:100% 100%; border:0; box-shadow:0 12px 28px rgba(0,0,0,.3);
}
#openOverlay .reveal-card .reveal-face-back::before,
#openOverlay .reveal-card .reveal-face-back::after { content:none; }
@keyframes cg-charge-intense {
  0%,100% { transform:translate(-2px,-4px) rotate(-1.2deg) scale(1.04); }
  50% { transform:translate(2px,-6px) rotate(1.2deg) scale(1.055); }
}
@keyframes cg-seal-rip {
  0% { transform:translate(0,0) rotate(0); opacity:1; }
  24% { transform:translate(8px,-16px) rotate(10deg); opacity:1; }
  64% { transform:translate(65px,-70px) rotate(28deg); opacity:.95; }
  100% { transform:translate(120px,-120px) rotate(42deg); opacity:0; }
}
@keyframes cg-wrapper-drop {
  0% { transform:translateY(0) scale(1.04); opacity:1; }
  32% { transform:translateY(12px) rotate(-3deg) scale(1.04); opacity:1; }
  100% { transform:translateY(65px) rotate(-8deg) scale(.96); opacity:0; }
}
@keyframes cg-seal-light {
  0% { opacity:0; transform:scaleX(.3); }
  22% { opacity:1; transform:scaleX(1); }
  65% { opacity:.55; transform:translateY(-26px) scale(1.2,4); }
  100% { opacity:0; transform:translateY(-45px) scale(1.4,7); }
}
@keyframes cg-card-launch {
  from { opacity:0; transform:translate(var(--emerge-x,0),-55px) scale(.68) rotate(var(--emerge-r,0deg)); }
  72% { opacity:1; transform:translateY(4px) scale(1.025); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  #openOverlay .suspense-pack.shaking { animation:none; }
  #openOverlay .suspense-pack.bursting #suspensePackImg { animation:cg-reduced-release .2s ease-out forwards; clip-path:none; }
  #openOverlay .suspense-pack.bursting .pack-tear-cap { visibility:hidden; animation:none; }
  #openOverlay .suspense-pack.bursting .pack-tear-light { animation:none; opacity:0; }
}