/* GENERE par design/gen-vending-packs.mjs — copie de design/stage-fx.css.
   NE PAS EDITER ICI : editer la source puis relancer le generateur. */
/* ============================================================
   iGatcha — les effets de scene du reveal, a copier dans la page hote.
   Reference vivante : design/build-packs.mjs (le prototype). Ce fichier est
   l'extrait reutilisable ; en cas de doute, le prototype fait foi.

   ELEMENTS attendus (voir README.md pour la choreographie JS) :
     .stage > .stage__dim, .stage__spinglow, .stage__packwrap >
       .stage__pose > .stage__flip > (.face--front svg | .face--back svg |
       .tranche x18 — voir LA BOITE), .stage__slot, .stage__flash,
       .stage__rays, .stage__burst, .stage__carte
   ETATS poses par le JS sur .stage : on, turning, idle, grab, done.
   La classe .play se pose sur .stage__flip pour declencher l'ouverture
   (les animations du SVG ecoutent `.play .<classe>-<ns>`).
   ============================================================ */

/* -------- le fond qui s'assombrit quand le pack entre en scene -------- */
.stage__dim{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 42%,transparent 30%,#000 78%);
  opacity:0;transition:opacity .7s ease;pointer-events:none}
.stage.on .stage__dim{opacity:1}

/* -------- le halo pendant la rotation, puis la pulsation d'attente -------- */
.stage__spinglow{position:absolute;left:50%;top:44%;width:460px;height:460px;
  translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.12) 45%,transparent 68%)}
.stage.turning .stage__spinglow{animation:sg 4s ease-in-out forwards}
@keyframes sg{0%{opacity:0;transform:scale(.55)}22%{opacity:.95;transform:scale(.9)}
  48%{opacity:.55;transform:scale(1)}74%{opacity:.85;transform:scale(1.04)}
  100%{opacity:.3;transform:scale(1.02)}}
.stage.idle .stage__spinglow{animation:sgpulse 3s ease-in-out infinite}
@keyframes sgpulse{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.4;transform:scale(1.07)}}

/* -------- la pose 3/4 + la flottaison d'attente (respiration inclinee) -------- */
.stage__pose{transform:rotateX(5deg) rotateY(-15deg);transform-style:preserve-3d}
.stage.idle .stage__pose{animation:flotte 3s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotateX(3deg) rotateY(-15deg) rotateZ(.6deg)}
  50%{transform:translateY(-11px) rotateX(10deg) rotateY(-13.5deg) rotateZ(-.8deg)}}
.stage.idle{cursor:grab;touch-action:none}
.stage.grab{cursor:grabbing;touch-action:none}

/* -------- la rotation d'entree (3 tours, decel reguliere) --------
   MEME duree et MEME easing que sonRotation() de pack-sfx.mjs. */
.stage__flip{position:relative;transform-style:preserve-3d}
.stage__flip.spinning{animation:lat 4s cubic-bezier(.3,.45,.2,1) forwards}
@keyframes lat{from{transform:rotateY(1080deg)}to{transform:rotateY(0)}}

/* -------- LA BOITE : l'epaisseur reelle du pack en 3D --------
   v15 — l'epaisseur est un EMPILEMENT DE TRANCHES qui suivent la vraie
   silhouette du sachet (bosses ET dentelures) : des plaques rectangulaires
   depassent toujours quelque part sur un contour courbe, un empilement de
   la silhouette jamais. L'hote insere ~9 calques entre les faces, chacun =
   DEUX divs (translateZ regulierement espaces de -4.4px a 4.4px) :
     <div class="tranche tranche--bande"
          style="--clip:path('<bande>');transform:translateZ(<z>px)"></div>
     <div class="tranche tranche--corps"
          style="--clip:path('<corps>');--clip-ouvert:path('<corpsOuvert>');
                 transform:translateZ(<z>px)"></div>
   Les trois paths sortent de tranchePaths(scale) de pack.mjs (stage rendu
   a 300px -> scale .9375 ; les stops px ci-dessous supposent ce rendu).
   TEINTE : la tranche du corps lit --foil-deep (defaut = or), par ex. sur
   .stage__flip :  bleu #0b2440 · violet #241040 · argent #23272f */
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face--front{transform:translateZ(5.5px)}
.face--back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(5.5px)}
.tranche{position:absolute;inset:0;pointer-events:none}
.tranche--corps{clip-path:var(--clip);background:
  linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.07) 50%,rgba(0,0,0,.38)),
  linear-gradient(180deg,color-mix(in srgb,var(--foil-deep,#443008) 78%,#000) 0 318px,#D9D5E2 319px)}
.tranche--bande{clip-path:var(--clip);background:
  linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.10) 50%,rgba(0,0,0,.3)),
  linear-gradient(180deg,#F3F1F8,#CFCBDA)}
/* l'arrachage emporte les tranches de bande ET la bande du VERSO (classe
   dosband, generee dans le svg du dos) ; le corps se decapite sous les
   vallees de la dechirure (anti-fantome), couvert par le rouleau */
.play .tranche--bande,.play .dosband{opacity:0;transition:opacity .22s ease .34s}
.play .tranche--corps{clip-path:var(--clip-ouvert,var(--clip))}

/* -------- la fin : flash, rayons, eclat, la carte prend la scene -------- */
.stage.done .stage__packwrap{animation:sink .6s ease forwards}
@keyframes sink{from{transform:translateY(-13%) scale(1);opacity:1}
  to{transform:translateY(-2%) scale(.9);opacity:0}}
.stage__carte{position:absolute;left:50%;top:44%;translate:-50% -50%;
  opacity:0;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.stage.done .stage__carte{animation:pop .6s cubic-bezier(.2,.9,.3,1.18) .25s forwards}
@keyframes pop{from{opacity:0;transform:scale(.5) rotate(-5deg)}
  to{opacity:1;transform:scale(1) rotate(0)}}
.stage__burst{position:absolute;left:50%;top:44%;width:560px;height:560px;
  translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,240,190,.95),rgba(255,199,90,.5) 34%,rgba(255,77,157,.22) 55%,transparent 72%)}
.stage.done .stage__burst{animation:burst 1.1s ease-out .1s forwards}
@keyframes burst{from{opacity:0;transform:scale(.35)}30%{opacity:1}
  to{opacity:0;transform:scale(1.55)}}
.stage__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.stage.done .stage__flash{animation:flash .5s ease-out forwards}
@keyframes flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.stage__rays{position:absolute;left:50%;top:44%;width:620px;height:620px;
  translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,220,130,.16) 0 9deg,transparent 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 26%,transparent 68%);
  mask-image:radial-gradient(circle,#000 26%,transparent 68%)}
.stage.done .stage__rays{animation:raysin .7s ease-out .3s forwards,raysrot 14s linear .3s infinite}
@keyframes raysin{from{opacity:0}to{opacity:1}}
@keyframes raysrot{to{rotate:360deg}}

/* -------- accessibilite -------- */
@media (prefers-reduced-motion:reduce){
  .stage.idle .stage__pose{animation:none}
  .stage__flip.spinning{animation:none}
  .stage.turning .stage__spinglow{animation:none;opacity:.15}
  .stage.idle .stage__spinglow{animation:none;opacity:.2}
  .stage.done .stage__packwrap{animation:none;opacity:0}
  .stage.done .stage__carte{animation:none;opacity:1}
  .stage.done .stage__burst,.stage.done .stage__flash,.stage.done .stage__rays{animation:none}}