/*!
 * inview-reveal v1.0.0 — スタイル（inview-reveal.js とセットで使う）
 *
 * 調整は下の CSS 変数で行う。:root で全体、要素ごとに上書きも可。
 *   例) .hero .reveal { --reveal-distance: 40px; }
 *
 * ※ JS 側でクラス名の頭（prefix）を変えた場合は、このファイルの "reveal" も同じ名前に置き換える。
 */
:root {
  --reveal-distance: 20px;      /* 動く距離 */
  --reveal-duration: 1s;        /* 再生時間 */
  --reveal-delay: 0s;           /* 再生までの待ち時間 */
  --reveal-ease: ease;          /* 動きの緩急 */
}

/* 再生前は隠す。<html> に .reveal-js が付いているとき（JS が動いているとき）だけ。 */
.reveal-js :is(.reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-fade, .reveal-group > :not(.reveal-skip), [data-reveal-effect]):not(.is-revealing, .is-revealed) {
  opacity: 0;
}

/* 再生中。transform ではなく translate プロパティで動かすので、
   要素に付いている transform（Tailwind の hover:scale など）とぶつからない。
   再生が終わるとこのクラスは外れる。 */
.reveal-js .is-revealing {
  animation: inview-reveal var(--reveal-duration) var(--reveal-ease) var(--reveal-delay) both;
}

@keyframes inview-reveal {
  from {
    opacity: 0;
    translate: var(--reveal-x, 0) var(--reveal-y, 0);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* 動きの種類（どこから入ってくるか）。種類を増やすときはここに足し、JS の EFFECTS にも名前を足す。 */
[data-reveal-effect="left"]  { --reveal-x: calc(var(--reveal-distance) * -1); } /* 左から */
[data-reveal-effect="right"] { --reveal-x: var(--reveal-distance); }            /* 右から */
[data-reveal-effect="up"]    { --reveal-y: var(--reveal-distance); }            /* 下から上へ */
[data-reveal-effect="down"]  { --reveal-y: calc(var(--reveal-distance) * -1); } /* 上から下へ */
[data-reveal-effect="fade"]  { --reveal-x: 0; --reveal-y: 0; }                  /* その場でフェード */

/* 印刷時・視差効果を減らす設定では、アニメーションせずに表示 */
@media print, (prefers-reduced-motion: reduce) {
  .reveal-js :is(.reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-fade, .reveal-group > *, [data-reveal-effect]) {
    opacity: 1 !important;
    animation: none !important;
  }
}