/* FortuneSession body paragraph fade-in (#211 スコープ 7).
 *
 * Turbo Stream で section 完了が broadcast されたタイミングで、
 * 本文の枠内の段落 (<p class="fortune-session-paragraph">) を順次フェードインさせる。
 * stagger は :nth-of-type で CSS だけで完結。reduced-motion 環境では即時表示する。
 *
 * 前提: .fortune-session-body 直下の <p> は simple_format が出力した fortune-session-paragraph
 * のみ。静的な <p> を本文の枠の直下に追加すると :nth-of-type のカウントがズレるので
 * その時は --paragraph-index を ERB 側から出して calc() で組み立てる方式に切り替える。
 */

@keyframes fortune-session-paragraph-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fortune-session-paragraph {
  opacity: 0;
  animation: fortune-session-paragraph-fade-in 400ms ease-out forwards;
}

/* 段落の間は 1 行分 (#1327)。最初の段落の上と最後の段落の下には付けない。 */
.fortune-session-paragraph + .fortune-session-paragraph {
  margin-top: 1lh;
}

.fortune-session-paragraph:nth-of-type(1) { animation-delay: 0ms; }
.fortune-session-paragraph:nth-of-type(2) { animation-delay: 150ms; }
.fortune-session-paragraph:nth-of-type(3) { animation-delay: 300ms; }
.fortune-session-paragraph:nth-of-type(4) { animation-delay: 450ms; }
.fortune-session-paragraph:nth-of-type(5) { animation-delay: 600ms; }
.fortune-session-paragraph:nth-of-type(6) { animation-delay: 750ms; }
.fortune-session-paragraph:nth-of-type(7) { animation-delay: 900ms; }
.fortune-session-paragraph:nth-of-type(n+8) { animation-delay: 1050ms; }

@media (prefers-reduced-motion: reduce) {
  .fortune-session-paragraph {
    opacity: 1;
    animation: none;
  }
}