/* ==========================================================
   reveal — スクロール連動のふわっと表示
   .js-reveal は main.js が自動付与(JS無効環境では常に表示)
   ========================================================== */

.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  /* 透明度は先に立ち上げ、位置は長めに減速させて「ふわっと」浮かせる */
  transition:
    opacity 0.9s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}