/* Curiosity session UI — stacked cards */

.curiosity-page {
  max-width: 44rem;
}

.curiosity-panel {
  min-height: 8rem;
}

.curiosity-stack {
  --stack-depth: 14px;
  --stack-scale-step: 0.03;
  display: grid;
  margin: 0.5rem 0 1.25rem;
  perspective: 900px;
}

.curiosity-card {
  grid-area: 1 / 1;
  z-index: calc(40 - var(--card-index, 0));
  padding: 1.25rem 1.2rem 1.35rem;
  background: var(--mos-paper);
  border: 1px solid var(--mos-line);
  border-radius: var(--mos-radius);
  box-shadow:
    0 0 0 1px var(--mos-line),
    0 0 20px var(--mos-glow-faint);
  transform:
    translateY(calc(var(--card-index, 0) * var(--stack-depth)))
    scale(calc(1 - var(--card-index, 0) * var(--stack-scale-step)));
  transform-origin: center top;
  transition:
    transform 0.4s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease;
  pointer-events: none;
}

.curiosity-card[data-index="0"] { --card-index: 0; }
.curiosity-card[data-index="1"] { --card-index: 1; }
.curiosity-card[data-index="2"] { --card-index: 2; }
.curiosity-card[data-index="3"] { --card-index: 3; }
.curiosity-card[data-index="4"] { --card-index: 4; }
.curiosity-card[data-index="5"] { --card-index: 5; }
.curiosity-card[data-index="6"] { --card-index: 6; }
.curiosity-card[data-index="7"] { --card-index: 7; }
.curiosity-card[data-index="8"] { --card-index: 8; }
.curiosity-card[data-index="9"] { --card-index: 9; }

.curiosity-card--top {
  pointer-events: auto;
  box-shadow:
    0 0 0 1px var(--mos-line),
    0 0 28px var(--mos-glow);
}

.curiosity-card.is-exiting {
  opacity: 0;
  transform: translateY(-1.5rem) translateX(1.25rem) rotate(4deg) scale(0.96);
  pointer-events: none;
}

.curiosity-card__text {
  margin-bottom: 1rem;
  font-family: var(--mos-font-body);
  font-size: calc(var(--mos-text-body) * 1.15);
}

.curiosity-card__preview {
  color: var(--mos-ink-muted);
  font-family: var(--mos-font-body);
  font-size: calc(var(--mos-text-body) * 0.95);
}

.curiosity-batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  opacity: 0;
  animation: curiosity-actions-fade 0.55s ease forwards;
}

@keyframes curiosity-actions-fade {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.curiosity-reward-shape {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--mos-accent);
  transform: scale(0.35) rotate(-20deg);
  opacity: 0;
  animation: curiosity-reward-settle 1.4s ease-out forwards;
  box-shadow: 0 0 20px var(--mos-glow-faint);
}

@keyframes curiosity-reward-settle {
  0% {
    opacity: 0;
    border-radius: 50%;
    transform: scale(0.35) rotate(-20deg);
  }

  45% {
    opacity: 1;
    border-radius: 22%;
    transform: scale(1.08) rotate(8deg);
  }

  70% {
    border-radius: 18%;
    transform: scale(0.96) rotate(-3deg);
  }

  100% {
    opacity: 1;
    border-radius: 28% 28% 22% 22%;
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 0.35rem var(--mos-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .curiosity-card,
  .curiosity-card.is-exiting {
    opacity: 1;
    transform:
      translateY(calc(var(--card-index, 0) * var(--stack-depth)))
      scale(calc(1 - var(--card-index, 0) * var(--stack-scale-step)));
    transition: none;
  }

  .curiosity-batch-actions,
  .curiosity-reward-shape {
    opacity: 1;
    animation: none;
    transform: none;
  }
}