/* Écran du booster : bandeau d'extension, paquet 3D, réserve, et la déchirure d'ouverture. */
/* ============ Écran booster ============ */
.packzone{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100%;width:100%;gap:4px}

.setbar{position:relative;text-align:center;width:100%;max-width:520px}
.setlogo{display:block;width:min(250px,58vw);margin:0 auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.7))}
.setmeta{margin:8px 0 0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em}
.edition{position:absolute;right:2%;top:2%;width:clamp(38px,11vw,52px);height:auto;rotate:8deg;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}

.packstage{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1300px;padding:8px 0 0}
.packglow{position:absolute;top:44%;left:50%;width:min(620px,124vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(137,54,255,.24),rgba(169,92,242,.1) 40%,transparent 68%)}
/* `translate` est une propriété à part : le flottement se compose avec la rotation posée par le script. */
.pack3d{position:relative;transform-style:preserve-3d;will-change:transform;animation:packbob 5.4s ease-in-out infinite}
@keyframes packbob{50%{translate:0 -10px}}
.pack{position:relative;display:block;width:min(66vw,calc((100dvh - 420px) * .665),340px);height:auto;aspect-ratio:368/553;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transform-style:preserve-3d;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.72));transition:filter .25s}
.pack:active{cursor:grabbing}
.pack-art{display:block;width:100%;height:100%;object-fit:contain}
.pack-foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(112deg,transparent 33%,rgba(255,255,255,.55) 48%,transparent 63%);background-size:280% 100%;
  background-position:var(--fx,50%) 0}
/* Paquet ouvrable : un halo respire derrière lui, le geste est évident sans ligne d'explication. */
.pack.ready::after{content:'';position:absolute;inset:-8% -10%;border-radius:22px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(137,54,255,.36),transparent 72%);animation:packpulse 2.8s ease-in-out infinite}
@keyframes packpulse{50%{opacity:.3}}
.pack.ready:hover{filter:drop-shadow(0 28px 40px rgba(0,0,0,.72)) drop-shadow(0 0 26px rgba(169,92,242,.6))}
.packshadow{width:min(190px,44vw);height:18px;margin-top:14px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(closest-side,rgba(0,0,0,.78),transparent)}

/* ============ Réserve ============ */
.packfoot{flex:0 0 auto;width:100%;max-width:390px;padding-top:14px;display:flex;flex-direction:column;gap:12px;align-items:center}
.packrail{display:flex;gap:10px;justify-content:center;width:100%}
.rchip{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border-radius:999px;padding:9px 16px;
  box-shadow:0 3px 0 #0c0810,inset 0 0 0 1px var(--line)}
.rchip .ic{width:19px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(137,54,255,.45))}
.rchip svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.rchip b{font-family:var(--display);font-weight:900;font-style:italic;font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.rchip small{font-size:11px;font-weight:700;color:var(--muted);margin-left:-4px}
.rchip.time b{color:var(--subtle)}
.rchip.time.full b{color:var(--accent-soft)}
/* Jauge de recharge : un liseré qui se remplit sous la pastille. */
.rfill{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .9s linear}
.rchip.time.full .rfill{background:var(--accent-soft)}
.packbtn{max-width:340px}

/* ============ Départ de l'ouverture ============ */
/* Le paquet plonge vers la caméra, le théâtre prend le relais avec la déchirure. */
.pack.tear{animation:packdive .34s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes packdive{to{scale:1.35;opacity:0;filter:brightness(1.6) blur(3px)}}
.pack.tear::after{animation:none;opacity:0}

/* ============ Déchirure (le paquet vit dans la même scène que la pile) ============ */
/* Posé par-dessus la pile : tant qu'il est là, les cartes sont « dedans ». */
.packrip{position:absolute;left:50%;top:50%;z-index:5;width:113%;aspect-ratio:368/553;translate:-50% -50%;
  transform-style:preserve-3d;pointer-events:none;filter:drop-shadow(0 26px 38px rgba(0,0,0,.75))}
.rp-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Bord déchiré : la même ligne en dents de scie sur les deux moitiés du paquet. */
.rip-open .rp-body{clip-path:polygon(0.0% 9.6%, 2.9% 11.9%, 5.9% 9.6%, 8.8% 11.9%, 11.8% 9.6%, 14.7% 11.9%, 17.6% 9.6%, 20.6% 11.9%, 23.5% 9.6%, 26.5% 11.9%, 29.4% 9.6%, 32.4% 11.9%, 35.3% 9.6%, 38.2% 11.9%, 41.2% 9.6%, 44.1% 11.9%, 47.1% 9.6%, 50.0% 11.9%, 52.9% 9.6%, 55.9% 11.9%, 58.8% 9.6%, 61.8% 11.9%, 64.7% 9.6%, 67.6% 11.9%, 70.6% 9.6%, 73.5% 11.9%, 76.5% 9.6%, 79.4% 11.9%, 82.4% 9.6%, 85.3% 11.9%, 88.2% 9.6%, 91.2% 11.9%, 94.1% 9.6%, 97.1% 11.9%, 100.0% 9.6%, 100% 100%, 0% 100%)}
.rp-top{position:absolute;inset:0;clip-path:polygon(0% 0%, 100% 0%, 100.0% 9.6%, 97.1% 11.9%, 94.1% 9.6%, 91.2% 11.9%, 88.2% 9.6%, 85.3% 11.9%, 82.4% 9.6%, 79.4% 11.9%, 76.5% 9.6%, 73.5% 11.9%, 70.6% 9.6%, 67.6% 11.9%, 64.7% 9.6%, 61.8% 11.9%, 58.8% 9.6%, 55.9% 11.9%, 52.9% 9.6%, 50.0% 11.9%, 47.1% 9.6%, 44.1% 11.9%, 41.2% 9.6%, 38.2% 11.9%, 35.3% 9.6%, 32.4% 11.9%, 29.4% 9.6%, 26.5% 11.9%, 23.5% 9.6%, 20.6% 11.9%, 17.6% 9.6%, 14.7% 11.9%, 11.8% 9.6%, 8.8% 11.9%, 5.9% 9.6%, 2.9% 11.9%, 0.0% 9.6%);transform-origin:50% 11%;transform-style:preserve-3d}
.rp-top img{display:block;width:100%;height:100%;object-fit:contain}
/* La bande s'assombrit en basculant vers l'arrière : c'est ce qui donne le volume. */
.rp-top::after{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0) 72%)}
.rip-open .rp-top{animation:riptop 1.05s cubic-bezier(.24,.72,.3,1) forwards}
.rip-open .rp-top::after{animation:ripshade 1.05s ease-out forwards}
@keyframes riptop{
  20%{transform:translateY(-3%) rotateX(58deg)}
  58%{transform:translate(9%,-42%) rotateX(112deg) rotateZ(9deg);opacity:1}
  100%{transform:translate(28%,-126%) rotateX(168deg) rotateZ(25deg);opacity:0}}
@keyframes ripshade{35%{opacity:.95}100%{opacity:1}}

.rp-line{position:absolute;left:3%;right:3%;top:10.5%;height:3px;border-radius:3px;background:#fff;transform-origin:left center;scale:0 1;
  box-shadow:0 0 12px #fff,0 0 26px var(--accent)}
.rip-cut .rp-line{animation:ripcut .32s ease-out forwards}
.god .rp-line{box-shadow:0 0 12px #fff,0 0 30px var(--r-l)}
@keyframes ripcut{0%{scale:0 1;opacity:1}70%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}

.rip-shake .packrip{animation:ripshake .38s ease-in-out}
@keyframes ripshake{
  15%{transform:rotateZ(-1.6deg) rotateY(-6deg)}
  40%{transform:rotateZ(1.6deg) rotateY(6deg)}
  65%{transform:rotateZ(-1.1deg) rotateY(-3deg)}
  85%{transform:rotateZ(.7deg) rotateY(2deg)}}

/* ---- Godpack : la lumière monte dans le paquet avant même la déchirure ---- */
/* La couture s'allume peu à peu et le paquet tremble de plus en plus : on sent que ça va lâcher. */
.god .rp-leak{position:absolute;left:6%;right:6%;top:10.4%;height:4px;border-radius:99px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff 26%,#fff 74%,transparent);
  box-shadow:0 0 10px #fff,0 0 30px #ffe08a,0 0 80px rgba(255,199,59,.95),0 0 150px rgba(255,150,0,.55)}
/* Le paquet s'assombrit pendant que la couture s'allume : la seule lumière vient de l'intérieur. */
.rip-wake .rp-body,.rip-wake .rp-top img{animation:goddim 1.5s ease-in forwards}
@keyframes goddim{to{filter:brightness(.52) saturate(.65)}}
.rip-cut .rp-body,.rip-cut .rp-top img{animation:godlight .6s ease-out forwards}
@keyframes godlight{0%{filter:brightness(.52) saturate(.65)}45%{filter:brightness(1.7) saturate(1.1)}100%{filter:none}}
.rip-wake .rp-leak{animation:leakwake 1.5s cubic-bezier(.4,0,.55,1) forwards}
@keyframes leakwake{0%{opacity:0;scale:.15 1}55%{opacity:.7;scale:.82 1}100%{opacity:1;scale:1 1.7}}
.rip-cut .rp-leak{animation:leakflash .55s ease-out forwards}
@keyframes leakflash{0%{opacity:1;scale:1 1.7}40%{opacity:1;scale:1 5}100%{opacity:0;scale:1 9}}
.rip-wake .packrip{animation:godtremble 1.5s cubic-bezier(.4,0,.6,1)}
@keyframes godtremble{
  0%{transform:none}
  30%{transform:rotateZ(-.4deg) rotateY(-2deg)}
  50%{transform:rotateZ(.7deg) rotateY(3deg)}
  68%{transform:rotateZ(-1deg) rotateY(-4deg)}
  82%{transform:rotateZ(1.4deg) rotateY(5deg)}
  92%{transform:rotateZ(-1.9deg) rotateY(-6deg)}
  100%{transform:rotateZ(1.2deg) rotateY(4deg)}}
/* Faisceau qui s'échappe de la fente : un cône flou qui s'évase vers le haut et se dissout.
   La découpe en trapèze + le flou + le masque radial lui donnent du volume ; sans ça c'est un bloc blanc. */
.god .rp-beam{position:absolute;left:50%;bottom:89.4%;width:200%;height:155%;translate:-50% 0;transform-origin:50% 100%;
  opacity:0;pointer-events:none;filter:blur(20px);
  clip-path:polygon(47.5% 100%,52.5% 100%,90% 0,10% 0);
  background:linear-gradient(180deg,rgba(255,206,96,0),rgba(255,224,150,.5) 50%,rgba(255,246,214,.98));
  -webkit-mask:radial-gradient(78% 100% at 50% 100%,#000 3%,rgba(0,0,0,.5) 44%,transparent 90%);
  mask:radial-gradient(78% 100% at 50% 100%,#000 3%,rgba(0,0,0,.5) 44%,transparent 90%)}
.rip-open .rp-beam{animation:beamup 1.9s cubic-bezier(.14,.78,.3,1) forwards}
@keyframes beamup{
  0%{opacity:0;transform:scale(.3,.06)}
  14%{opacity:1;transform:scale(1,1)}
  46%{opacity:.8;transform:scale(1.06,1.08)}
  100%{opacity:0;transform:scale(1.4,1.28)}}

/* On tire les cartes vers soi : le paquet vide bascule et descend hors champ. */
.rip-pull .packrip{animation:packaway 1.05s cubic-bezier(.32,.76,.36,1) forwards}
@keyframes packaway{
  28%{transform:translateY(9%) rotateX(9deg) rotateZ(-2deg)}
  100%{transform:translateY(128%) rotateX(32deg) rotateZ(-9deg);opacity:0}}