/* /style/deck.css */
/* Generic card deck behavior (no theme). */
/* Depth is expressed via transform + brightness (NOT opacity). */
/* Opacity is reserved for explicit animation states (exit/reentry). */

.deck {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  user-select: none;
}

.deck-entry {
  position: absolute;
  top: 0;
  left: 0;

  width: 80%;
  height: 80%;

  cursor: pointer;

  /* Keep motion smooth + consistent. Avoid opacity transitions for baseline. */
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    filter 220ms ease,
    box-shadow 220ms ease;

  will-change: transform;
  filter: brightness(0.75);
}

/* Stack positions */
.deck-entry:nth-child(1) {
  transform: translate(0, 50px);
  z-index: 3;
  filter: brightness(1);
}

.deck-entry:nth-child(2) {
  transform: translate(25px, 25px);
  z-index: 2;
  filter: brightness(0.85);
}

.deck-entry:nth-child(3) {
  transform: translate(50px, 0px);
  z-index: 1;
  filter: brightness(0.75);
}

/* Everything past 3 just piles underneath */
.deck-entry:nth-child(n + 4) {
  transform: translate(50px, 50px);
  z-index: 0;
  filter: brightness(0.65);
}

/* Active card */
.deck-entry.active {
  filter: brightness(1.05);
  /* box-shadow:
    0 0 0 2px rgba(0,255,0,0.4),
    0 12px 30px rgba(0,0,0,0.6); */
}

/* Hover affordance */
.deck-entry:hover {
  filter: brightness(0.9);
}

/* -------------------------------------------------- */
/* Animation-only states */
/* -------------------------------------------------- */

.deck-entry.exiting {
  animation: deck-exit 400ms ease-in forwards;
  pointer-events: none;
}

.deck-entry.reentering {
  opacity: 0;
}

/* Top card exits upward with a little rotation */
@keyframes deck-exit {
  0% {
    transform: translate(0, 50px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, -140vh) rotate(-18deg);
    opacit