/* Même illustration que la maquette validée, cadrée par CSS sans altérer l'asset. */
#boosterOpening { width:min(1100px,96vw); background:radial-gradient(ellipse at 50% 80%,#124b5e66,transparent 65%),#050b14; }
#boosterOpening #tearBooster { display:block; position:relative; width:min(410px,64vw,49vh); height:auto; aspect-ratio:666/793; margin:20px auto 24px; border:0; padding:0; background:none; box-shadow:none; clip-path:none; animation:pack-float 4s ease-in-out infinite; touch-action:none; }
#boosterOpening #tearBooster::before { display:none; }
.foil-packet { position:absolute; inset:0; background:url('assets/booster-genesis-illustrated.png') no-repeat; background-size:251.05% 118.66%; background-position:52.29% 33.78%; pointer-events:none; }
.foil-body { clip-path:inset(14% 0 0); }.foil-cap { clip-path:inset(0 0 86%); transform:translateX(var(--tear-distance,0px)); }
#boosterOpening[data-stage="tearing"] #tearBooster { animation:none; }
[data-stage="tearing"] .foil-cap { animation:foil-tear .65s ease-in both; }
[data-stage="tearing"] .foil-body { animation:foil-release .65s ease-in both; }
#boosterOpening[data-stage="opened"] #tearBooster { display:none; }
#shopProduct .sealed-booster { width:210px; height:auto; min-height:0; aspect-ratio:666/793; padding:0; border:0; transform:none; background:url('assets/booster-genesis-illustrated.png') no-repeat; background-size:251.05% 118.66%; background-position:52.29% 33.78%; box-shadow:0 12px 24px #0008; }
#shopProduct .sealed-booster>* { visibility:hidden; }
@keyframes foil-tear { to { transform:translate(160px,-100px) rotate(22deg); opacity:0; } }
@keyframes foil-release { 50% { filter:brightness(1.8); transform:translateY(4px); } to { transform:translateY(65px) scale(.92); opacity:0; } }
@media(prefers-reduced-motion:reduce) { #boosterOpening #tearBooster,[data-stage="tearing"] .foil-cap,[data-stage="tearing"] .foil-body { animation:none; } }