/* 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, #f4faf5);
  border: 1px solid var(--mos-line, rgb(45 80 60 / 18%));
  border-radius: var(--mos-radius, 2px);
  box-shadow:
    0 0 0 1px var(--mos-line, rgb(45 80 60 / 12%)),
    0 0 20px var(--mos-glow-faint, rgb(140 200 160 / 12%));
  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, rgb(45 80 60 / 18%)),
    0 0 28px var(--mos-glow, rgb(120 180 140 / 22%));
}

.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;
}

.curiosity-card__preview {
  color: var(--mos-ink-muted, #4a6354);
  font-size: 0.95rem;
}

.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, #5b7c6e);
  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, rgb(140 200 160 / 12%));
}

@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, rgb(120 180 140 / 22%));
  }
}