/* #79 card stack modelled on the Google Wallet payment-card stack.
   Both cards share one grid cell, so they are always the same size; the back card sits one "peek" higher.
   Switching uses transform only; reduced motion swaps instantly. */
.card-stack {
  --peek: 58px;
  --stack-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: grid;
  padding-top: var(--peek);
  isolation: isolate;
}
.card-stack > .stack-card { grid-area: 1 / 1; transform-origin: 50% 0; }
.card-stack > .is-front { z-index: 2; transform: none; box-shadow: 0 -10px 22px -16px rgba(60, 35, 12, 0.55); }
.card-stack > .is-back { z-index: 1; transform: translateY(calc(-1 * var(--peek))) scale(0.96); }
.card-stack > .is-back .stack-head { opacity: 0.92; }

.stack-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.stack-head .eyebrow { white-space: nowrap; }
.stack-head .gold-badge { margin-top: 0; }
.stack-figure { font: 600 12px/1.4 var(--cc-font-body); letter-spacing: 0.2px; white-space: nowrap; }
.coffee-card > .stack-head > .eyebrow { font: 500 11px/1.4 var(--cc-font-body); letter-spacing: 1.3px; }
.gold-card.is-gold > .stack-head > .eyebrow { font-weight: 700; letter-spacing: 1.6px; color: var(--gold-ink); }

/* The gold card's body. */
.gold-card { display: flex; flex-direction: column; }
.gold-card .gold-note { margin: auto 0 22px; font: 400 14px/1.45 var(--cc-font-body); max-width: 26ch; }
.gold-card .coffee-count { min-height: 1em; }

/* Empty gold card: a pale, outlined gold that reads as "ready to fill". */
.gold-card.is-empty {
  background: linear-gradient(135deg, #fbf3dc 0%, #f1dfae 60%, #ead29a 100%);
  border: 1px dashed var(--gold-edge);
  color: var(--gold-ink);
}
.gold-card.is-empty .card-cup { opacity: 0.45; filter: grayscale(0.4); }
.stack-buy { color: var(--gold-ink); }

/* The whole back card is one big tap target; the front card has none. */
.stack-select {
  position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.is-front > .stack-select { display: none; }
.stack-select:focus-visible { outline: 3px solid var(--cc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card-stack > .is-back { transition: transform 200ms var(--stack-ease); }
  .card-stack > .is-back:hover { transform: translateY(calc(-1 * var(--peek) - 4px)) scale(0.96); }
}
.card-stack > .is-back:has(> .stack-select:active) { transform: translateY(calc(-1 * var(--peek) + 2px)) scale(0.955); }

/* Tap to switch: the chosen card lifts out from behind, then settles in front; the old front slides back up. */
.card-stack > .stack-in { animation: stack-in 520ms var(--stack-ease) both; }
.card-stack > .stack-out { animation: stack-out 520ms var(--stack-ease) both; }
@keyframes stack-in {
  0% { z-index: 1; transform: translateY(calc(-1 * var(--peek))) scale(0.96); }
  45% { z-index: 1; transform: translateY(calc(-1 * var(--peek) - 38%)) scale(0.98); }
  46% { z-index: 3; }
  100% { z-index: 3; transform: none; }
}
@keyframes stack-out {
  0% { z-index: 2; transform: none; }
  45% { z-index: 2; transform: translateY(6%) scale(0.98); }
  46% { z-index: 1; }
  100% { z-index: 1; transform: translateY(calc(-1 * var(--peek))) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .card-stack > .stack-card, .card-stack > .is-back:hover { transition: none; }
  .card-stack > .stack-in, .card-stack > .stack-out { animation: none; }
}

/* "Show your QR code" now sits under the stack, so it gets its own outline. */
.card-stack + .show-card {
  margin-top: 14px; padding: 0 18px; border: 1px solid var(--cc-divider); border-radius: 20px; background: var(--cc-card);
}

/* Wallet already added on this device: an "Open in" button instead of the "Add to" badge. */
.wallet-button.is-added {
  gap: 10px; padding: 0 18px; background: #1f1f1f; color: #fff; border-radius: 28px;
  font: 600 15px/1 var(--cc-font-body); white-space: nowrap;
}
.wallet-button.is-added img { height: 22px; width: 22px; }

/* The cup sits under the header strip so it never covers the stamp count or gold badge; behind, only the strip shows. */
.stack-card .card-cup { top: 40px; width: 120px; height: 120px; transition: opacity 200ms var(--stack-ease); }
.card-stack > .is-back .card-cup { opacity: 0; }