/* Buy extra (js/bulk.js): the second button under a pack, the sheet where you pick how many,
   and the quick opening. Every animation here moves only transform or opacity, and none of
   them runs for ever (see Tests in the README). */

/* ---------- the button on the shelf ---------- */
.extra {
  max-width: 100%; margin-top: -2px; padding: .5em 1.15em .44em; border-radius: 8px;
  font-size: .92rem; font-weight: 700; color: var(--gilt-hi);
  background: rgba(10, 4, 5, .45); box-shadow: inset 0 0 0 1.5px rgba(217, 180, 90, .75);
  transition: transform .12s, background-color .12s;
}
.extra:hover { background: rgba(217, 180, 90, .2); transform: translateY(-1px); }
.extra:active { background: rgba(217, 180, 90, .32); transform: translateY(1px); }

/* ---------- the sheet ---------- */
#bulk.is-sheet { justify-content: safe center; padding: 20px 16px; overflow-y: auto; background: rgba(12, 4, 5, .88); }
.bulk-sheet {
  display: flex; align-items: center; gap: 34px; flex: none; width: min(100%, 660px); padding: 32px 36px;
  border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 24px 70px rgba(0, 0, 0, .6);
  animation: bulk-rise .28s var(--ease) both;
}
@keyframes bulk-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.bulk-pack { flex: none; }
.bulk-pack .pack { --pw: 158px; pointer-events: none; }
.bulk-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bulk-form h2 { margin: 0; font-size: 1.7rem; line-height: 1.05; color: var(--gilt-hi); text-shadow: none; }
.bulk-form .note { font-size: .95rem; line-height: 1.4; text-shadow: none; }
.bulk-step { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.bulk-step button, .bulk-picks button {
  border-radius: 8px; color: var(--gilt-hi); font-weight: 700;
  background: rgba(10, 4, 5, .45); box-shadow: inset 0 0 0 1.5px rgba(217, 180, 90, .75);
  transition: transform .12s, background-color .12s;
}
.bulk-step button { flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.bulk-step svg { width: 22px; height: 22px; }
.bulk-step button:hover, .bulk-picks button:hover { background: rgba(217, 180, 90, .2); }
.bulk-step button:active, .bulk-picks button:active { transform: translateY(1px); }
.bulk-step button:disabled { opacity: .32; cursor: default; background: none; transform: none; }
.bulk-many { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: .5em; min-width: 0; }
.bulk-n { font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.bulk-unit { font-size: 1.1rem; color: var(--muted); }
.bulk-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-picks button { flex: 1 1 auto; min-width: 3.2em; padding: .5em .8em .44em; font-size: .98rem; white-space: nowrap; }
.bulk-picks button.on { background: var(--gilt); color: var(--ink); box-shadow: none; }
.bulk-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.bulk-cards { color: var(--cream); }
.bulk-cost { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.bulk-left { margin-top: -8px; text-align: right; }
.bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.bulk-sheet .bulk-actions { margin-top: 6px; }
.bulk-sheet .bulk-go { flex: 1 1 auto; }

/* ---------- the quick opening ---------- */
#bulk.is-run { align-items: stretch; }
.bulk-run { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; width: min(100%, 1120px); margin: 0 auto; }
.bulk-head { display: flex; align-items: center; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 22px 12px; }
.bulk-icon { flex: none; }
.bulk-icon .pack { --pw: 46px; pointer-events: none; }
.bulk-icon.rip { animation: bulk-rip .24s var(--ease); }
@keyframes bulk-rip { 35% { transform: scale(1.2) rotate(-7deg); } }
.bulk-text { flex: 1; min-width: 0; }
.bulk-name { font-size: 1.3rem; font-weight: 700; line-height: 1.1; color: var(--gilt-hi); }
.bulk-count { margin-top: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bulk-bar { flex: none; height: 4px; margin: 0 22px; border-radius: 2px; overflow: hidden; background: rgba(243, 234, 216, .14); }
.bulk-bar i { display: block; height: 100%; background: var(--gilt); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.is-done .bulk-bar { visibility: hidden; }
.bulk-haul {
  --cw: clamp(76px, 21vw, 124px);
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cw), 1fr)); gap: 16px 12px;
  align-content: start; justify-items: center;
}
.bulk-haul .card.in { animation: bulk-in .36s var(--ease) var(--d, 0ms) backwards; }
@keyframes bulk-in { from { opacity: 0; transform: translateY(-28px) scale(.5) rotate(-8deg); } }
.bulk-haul .card.hit { z-index: 2; animation: bulk-hit .7s var(--ease); }
@keyframes bulk-hit { 22% { transform: scale(1.34) rotate(2.5deg); } }
.bulk-haul.settle { animation: bulk-settle .35s ease-out; }
@keyframes bulk-settle { from { opacity: 0; transform: translateY(8px); } }
.is-done .bulk-haul .card { cursor: pointer; }
.bulk-stamp {
  position: absolute; left: 0; right: 0; top: 40%; z-index: 3; pointer-events: none; text-align: center; opacity: 0;
  font-size: clamp(2.4rem, 9vw, 5.4rem); font-weight: 700; line-height: 1; color: var(--stamp, #fff);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
}
.bulk-stamp.go { animation: bulk-stamp .95s var(--ease) both; }
@keyframes bulk-stamp { 0% { opacity: 0; transform: scale(2.3); } 18% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.95); } }
.bulk-foot {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 14px 20px max(22px, env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--line);
}
.bulk-total { font-size: 1.2rem; font-weight: 700; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.bulk-note { color: var(--muted); max-width: 60ch; line-height: 1.4; }
.bulk-note:empty, .bulk-total:empty { display: none; }
.bulk-foot .bulk-actions { justify-content: center; margin-top: 6px; }

/* ---------- small screens and fingers ---------- */
@media (max-width: 620px) {
  .bulk-sheet { flex-direction: column; gap: 14px; padding: 22px 20px 20px; }
  .bulk-pack .pack { --pw: 96px; }
  .bulk-form { align-self: stretch; }
  .bulk-form h2, .bulk-each { text-align: center; }
  .bulk-n { font-size: 3.1rem; }
  .bulk-actions { justify-content: center; }
  .bulk-sheet .bulk-go { flex: 1 1 100%; }
  .bulk-head { padding-left: 16px; padding-right: 16px; }
  .bulk-bar { margin: 0 16px; }
  .bulk-haul { padding: 16px 16px 20px; gap: 12px 8px; }
  .bulk-foot { gap: 6px; padding-top: 12px; }
  .bulk-total { font-size: 1.08rem; }
  .bulk-note { font-size: .9rem; line-height: 1.35; }
}
@media (pointer: coarse) {
  .extra { min-height: 44px; -webkit-user-select: none; user-select: none; }
  .bulk-picks button { min-height: 44px; }
  .bulk-sheet { margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); }
}
@media (prefers-reduced-motion: reduce) {
  .bulk-sheet, .bulk-icon.rip, .bulk-haul .card.in, .bulk-haul .card.hit, .bulk-haul.settle { animation: none; }
  .bulk-stamp.go { animation: none; opacity: 0; }
}