Holo Pack Opening

Anatomie : .hpo-scene (min-height: 470px, colonne flex, overflow: hidden, fond radial) fixe cinq variables — --hpo-pack-w: clamp(104px, 15vw, 138px), hauteur du sachet × 1,62, largeur de carte × 0,84, hauteur de carte × 1,4, --hpo-split = 13 % de la hauteur du sachet (la ligne de déchirure). .hpo-stage (2,9 largeurs de sachet) contient les cartes (absolues, invisibles, centrées dans le bas du sachet) et .hpo-pack : deux fenêtres .hpo-half (haute 13 %, basse 87 %) qui montrent chacune la même face complète .hpo-packface — base en dégradé, foil arc-en-ciel en screen à .26, texture de 1 px, reflet hpo-pack-sheen qui balaie toutes les 5,5 s, art (emoji 💠, marque, édition), deux sertissages de 15 px. Au repos les deux moitiés sont jointives : aucune couture. Le profil de déchirure — un polygone de 25 points « issu d'une marche aléatoire lissée » — n'est appliqué aux deux moitiés que pendant data-state="busy" ou une fois .hpo-gone.

Ouverture (openPack, état idle → busy) : le CSS fait les 450 premières millisecondes sur le sélecteur busy — .hpo-cutter (étincelle de 8 px et traînée de 30 px) court de left: -4% à 102% (hpo-cut .45 s), .hpo-tearline passe de scaleX(0) à 1 puis s'éteint à .78 s, les deux moitiés se pincent de ±1 px ; à .45 s, hpo-split-top (.95 s) arrache la languette vers le haut-gauche (−36 px, −58 px, rotation qui oscille de −4,5° à +9° puis 1,5°) et la fond ; .hpo-bloom (la lumière qui s'échappe) dure .85 s à partir de .44 s ; neuf étincelles i et trois traînées b, créées par le JS avec des --tx / --ty / --d / --s aléatoires, partent entre .46 et .61 s. Le JS ajoute le flash à 470 ms (.hpo-firing, .38 s), sort les cartes à 780 ms (hpo-out, une toutes les 130 ms, positions s0 / s1 / s2 = remontées de 74 à 78 % de la hauteur du sachet avec ±2,2° de rotation), passe à revealed à 1300 ms (libellé du bouton → data-again, message de la zone live → data-announce) et entre en inspection à 1560 ms.

Inspection : data-view="inspect" assombrit la scène (.hpo-dim rgba(6,5,14,.68), .4 s) ; la carte active remonte de 58 % de la hauteur du sachet et passe à scale(1.5), les autres vont derrière à ±0,92 largeur de carte, scale(.8), ±6°, brightness(.45). La carte Ultra (sans classe --common ni --rare) reçoit .hpo-card--glowing : un reflet arc-en-ciel de 4,5 s et une pulsation de drop-shadow de 2,8 s ; l'étoile pulse en 2 s. Un clic sur la carte active bascule .hpo-flipped → .hpo-flip3d tourne de 180° en .55 s (deux faces en backface-visibility: hidden, le dos est un panneau indigo avec 💠 et la marque). Un clic sur une carte de derrière, les boutons ‹ › (montrés seulement avec .hpo-has-nav, c'est-à-dire n > 1) ou les flèches changent la carte active ; chaque changement met à jour tabindex, data-pos et la zone live.

Nouveau sachet (bouton ou Échap, état revealed → busy) : le sachet déchiré est jeté à gauche (hpo-discard-pack .45 s : −96 px, +44 px, −11°), les cartes se dissolvent en lumière (hpo-card-dissolve .62 s, brightness 2,1 → 3, l'active en dernier, 90 ms d'écart), puis serveNew() remet les classes à zéro et fait glisser un sachet scellé depuis la droite (hpo-arrive-in .55 s) — 430 + (n − 1) × 90 + 660 ms, soit ≈ 1,1 s pour une carte. Sous prefers-reduced-motion, le JS saute tous les minuteurs (languette retirée, cartes empilées, inspection immédiate) et le CSS annule les 17 animations. Le HTML vendu contient une seule carte : la cascade, la pile et la navigation existent dans le code, mais demandent de dupliquer le bloc .hpo-card (classes de rareté hpo-card--common / hpo-card--rare). Deux restes du catalogue : @media (max-height: 360px) { .hpo-scene { transform: scale(.52) } }, écrit pour l'iframe d'aperçu, et .hpo-high-contrast, miroir d'un interrupteur de démo ; hpo-tearing est retiré par le JS sans jamais être ajouté.

Requiert clip-path: polygon(), clamp(), inset, backface-visibility, filter: drop-shadow() animé, mix-blend-mode et les variables CSS dans calc(). JavaScript ES5. Aucune bibliothèque.