/* A stack of cards, for the Puzzles and Arena hubs. Each card floats gently at
   rest, and grows a little when hovered (or tapped, on phones), so it's clearly
   the one you're pointing at.
   Only transform properties are animated, which keeps the work off the page's
   main paint path. Reduced-motion visitors get the cards without the motion. */
.card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.card-stack > .stack-card {
  position: relative;
  width: 100%;
  min-height: 190px;
  margin: 0;
  padding: 22px 20px;
  background-color: #07080c;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  animation: cardFloat 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 350ms);
  transition: scale 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: translate, rotate, scale;
}
.card-stack > .stack-card:hover,
.card-stack > .stack-card.is-open {
  scale: 1.06;
  animation: cardFloat 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 350ms);
  z-index: 20;
}
@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-stack > .stack-card,
  .card-stack > .stack-card:hover,
  .card-stack > .stack-card.is-open { animation: none; translate: none; }
}