/* "New card arrived!" — foil packs you cut open, and the card you flick into the binder. */

.reveal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
  opacity: 0; transition: opacity var(--t-med);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Pictures never start the browser's own drag (it would cancel the gesture). */
.reveal img { -webkit-user-drag: none; }
.reveal.is-open { opacity: 1; }
.reveal__scrim {
  position: absolute; inset: 0; background: var(--c-overlay);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: opacity var(--t-slow);
}
/* While the card flies to its tab, the binder shows through. */
.reveal__scrim.is-faint { opacity: 0.2; }
.reveal__scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.reveal__title {
  color: var(--c-accent); font-weight: var(--fw-bold); text-align: center; line-height: 1.15;
  font-size: clamp(var(--fs-lg), 5dvh, var(--fs-xxl));
  text-shadow: 0 3px 0 var(--c-shade);
  animation: pop-in var(--t-slow) var(--ease-bounce) both;
}
.reveal__title .bi, .reveal__help .bi, .reveal__text .bi, .reveal__more .bi { align-items: center; }
.reveal__help, .reveal__text, .reveal__more { color: var(--c-on-primary); font-weight: var(--fw-semi); text-align: center; }
.reveal__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; animation: pop-in var(--t-med) var(--ease-bounce) both; }

/* ---------- The pack ---------- */
.pack {
  position: relative; width: var(--pack-w); aspect-ratio: 5 / 7;
  touch-action: none; cursor: grab;
  animation: drop-in var(--t-slow) var(--ease-bounce) both;
}
.pack__strip, .pack__body {
  position: absolute; left: 0; right: 0;
  color: var(--g-ink);
  background:
    linear-gradient(115deg, transparent 15%, var(--c-shine) 32%, transparent 45%, var(--c-shine-soft) 68%, transparent 80%),
    radial-gradient(circle at 30% 20%, var(--c-shine-soft), transparent 60%),
    var(--g);
  box-shadow: var(--shadow-2);
}
.pack__strip { top: 0; height: var(--pack-strip); z-index: 3; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.pack__body {
  top: var(--pack-strip); bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-align: center;
}
/* Crimped foil edges top and bottom. */
.pack__strip::before, .pack__body::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--s-3);
  background: repeating-linear-gradient(90deg, var(--c-shade-faint) 0 var(--s-hair), transparent var(--s-hair) calc(var(--s-1) * 1.5));
}
.pack__strip::before { top: 0; }
.pack__body::after { bottom: 0; }
.pack__cutline { position: absolute; left: 4%; right: 4%; bottom: 0; border-bottom: var(--bw-thin) dashed currentColor; opacity: 0.6; }
.pack__scissors { position: absolute; right: 2%; bottom: 0; transform: translateY(50%); font-size: var(--fs-md); }
.pack__emoji { font-size: var(--emoji-xl); line-height: 1; filter: drop-shadow(0 4px 0 var(--c-shade)); }
.pack__brand { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.pack__brand .bi, .pack__group .bi { align-items: center; }
.pack__group { font-size: var(--fs-sm); font-weight: var(--fw-semi); opacity: 0.85; }
.pack__tear { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pack__tear-line { fill: none; stroke: var(--c-tear); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pack__hand {
  position: absolute; z-index: 5; top: calc(var(--pack-strip) - 6%); left: 6%;
  font-size: var(--fs-xl); pointer-events: none;
  animation: swipe-hint 2.2s ease-in-out 0.8s infinite both;
}
.pack.is-cutting .pack__hand, .pack.is-cut .pack__hand { display: none; }
.pack.is-cut { cursor: default; }
.pack.is-empty .pack__body { animation: pack-drop 0.5s ease-in forwards; }

/* The card waits inside the pack, behind the foil. */
.pack__card { position: absolute; z-index: 1; transform-origin: 50% 50%; }
/* Laid out at design size and enlarged with CSS zoom (set in reveal.js), so it renders at real size. */
.pack__card-inner { position: absolute; left: 0; top: 0; width: var(--card-w); height: var(--card-h); }
.pack__card-inner .cpage { border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.pack__card.is-out { z-index: 6; cursor: grab; touch-action: none; }
.pack__card.is-shining::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-md); pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, var(--c-shine) 50%, transparent 65%) 0 0 / 250% 100%;
  animation: shine 1.3s ease-out 0.1s both;
}
.pack__tap { font-size: var(--fs-sm); }

/* A weekly drop mixes groups, so the foil is the brand colour, with the groups' emojis. */
.pack--drop { --g: var(--c-primary); --g-ink: var(--c-on-primary); }
.pack__emojis { font-size: var(--emoji-sm); line-height: 1; letter-spacing: var(--s-1); filter: drop-shadow(0 3px 0 var(--c-shade)); }
/* Sealed and waiting, on the Packs page. */
.pack--still { width: var(--pack-w-sm); cursor: inherit; animation: none; }
.pack--still .pack__brand { font-size: var(--fs-sm); }
.pack--still .pack__group { font-size: var(--fs-xs); }

/* After the last card: every card from the pack. */
.reveal__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, var(--summary-tile))); gap: var(--s-3);
  width: min(100%, calc(3 * var(--summary-tile) + 2 * var(--s-3)));
  animation: pop-in var(--t-slow) var(--ease-bounce) both;
}
.reveal__cards .tile { animation: none; }

@keyframes swipe-hint {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateX(calc(var(--pack-w) * 0.7)); opacity: 1; }
  100% { transform: translateX(calc(var(--pack-w) * 0.7)); opacity: 0; }
}
@keyframes pack-drop { to { transform: translateY(70%); opacity: 0; } }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }