/**
 * スクロール連動アニメーション
 *
 * 15_actions.css と同じく、フッターの設定画面で読み込みます。
 * Siblooの設定画面ではJSが実行されないため、初期状態の opacity: 0 を
 * ヘッダーやメインの設定画面に読み込ませると編集画面でコンテンツが見えなくなります。
 *
 * 加えて、初期状態は 07_PageAction.js が html に付与する .anim-ready 配下に
 * 限定しています。JSが動かない環境（設定画面 / JS無効）では初期状態そのものが
 * 適用されないため、通常表示のまま崩れません。
 *
 * ファミリーは3つ。いずれも .active が付いた時点で定位置へ遷移します。
 *   .fade-in   透明＋移動から現れる
 *   .reveal    マスクが開いて現れる（img に直接付けられる）
 *   .scale-in  少し縮んだ状態から現れる
 *
 * 修飾子は「動く方向」を表します。
 * .fade-in--up なら下から現れて上へ動く。
 * .reveal--right なら左端から右へマスクが開く。
 *
 * ex)
 * ```html
 * <div class="fade-in fade-in--up">スクロールで下から現れる</div>
 * <img class="reveal reveal--right" src="...">
 * <div class="scale-in delay-2">少し遅れて拡大しながら現れる</div>
 * ```
 */

:root {
  --anim-duration: 2000ms;
  --anim-distance: 24px;
  --anim-delay: 200ms;
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 初期状態には transition を持たせない。
 * .anim-ready はフッターのJS実行時に付くため、既に描画済みの要素へ
 * transition 付きで opacity: 0 を適用すると、一度表示されたものが
 * フェードアウトしてから入り直す動きになってしまう。
 * transition は .active 側に置き、非表示への遷移は即時、
 * 表示への遷移だけをアニメーションさせる。 */

/**
 * Fade In
 */
.anim-ready .fade-in {
  opacity: 0;
}

.anim-ready .fade-in--up {
  translate: 0 var(--anim-distance);
}
.anim-ready .fade-in--down {
  translate: 0 calc(-1 * var(--anim-distance));
}
.anim-ready .fade-in--left {
  translate: var(--anim-distance) 0;
}
.anim-ready .fade-in--right {
  translate: calc(-1 * var(--anim-distance)) 0;
}

/* 修飾子より詳細度が高いため、方向指定を打ち消して定位置へ戻る。 */
.anim-ready .fade-in.active {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--anim-duration) var(--anim-ease) var(--anim-delay),
    translate var(--anim-duration) var(--anim-ease) var(--anim-delay);
}

/**
 * Reveal
 * clip-path のインセットを動かすマスク表現。
 * ラッパーも擬似要素も要らないため、img や見出しに直接付けられる。
 *
 * 修飾子なしの .reveal は --right と同じく左端から右へ開く。
 * Safari 14 系向けに -webkit- 接頭辞を併記している。
 */
.anim-ready .reveal,
.anim-ready .reveal--right {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.anim-ready .reveal--left {
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
}
.anim-ready .reveal--down {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
.anim-ready .reveal--up {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
}

.anim-ready .reveal.active {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition:
    -webkit-clip-path var(--anim-duration) var(--anim-ease) var(--anim-delay),
    clip-path var(--anim-duration) var(--anim-ease) var(--anim-delay);
}

/**
 * Scale In
 * scale は独立プロパティを使う。中央固定（07_position.css）が transform を
 * 使っているため、両者を併用しても打ち消し合わない。
 */
.anim-ready .scale-in {
  opacity: 0;
  scale: 0.94;
}

.anim-ready .scale-in.active {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--anim-duration) var(--anim-ease) var(--anim-delay),
    scale var(--anim-duration) var(--anim-ease) var(--anim-delay);
}

/**
 * Delay
 * 一覧やカードを時間差で出現させる。
 * transition の shorthand は delay も含めて上書きしてしまうため、
 * ここでは変数の上書きに徹する（tracking と同じ方式）。
 */
.delay-1 {
  --anim-delay: 100ms;
}
.delay-2 {
  --anim-delay: 200ms;
}
.delay-3 {
  --anim-delay: 300ms;
}
.delay-4 {
  --anim-delay: 400ms;
}
.delay-5 {
  --anim-delay: 500ms;
}
.delay-6 {
  --anim-delay: 600ms;
}
.delay-7 {
  --anim-delay: 700ms;
}
.delay-8 {
  --anim-delay: 800ms;
}

@media (prefers-reduced-motion: reduce) {
  .anim-ready :is(.fade-in, .reveal, .scale-in),
  .anim-ready :is(.fade-in, .reveal, .scale-in).active {
    opacity: 1;
    translate: none;
    scale: none;
    -webkit-clip-path: none;
    clip-path: none;
    transition: none;
  }
}