/* ============================================================
   1. フェードイン・ぼかし演出 (.fadein)
   用途：テキスト、アイコン、小さな要素など
   ============================================================ */

/* アニメーションの動きを定義（下からふわっと出てくる） */
@keyframes blurReveal {
  from {
    filter: blur(4px);          /* ぼかし */
    opacity: 0;                  /* 透明 */
    transform: translateY(20px); /* 20px下から開始 */
  }
  to {
    filter: blur(0);             /* ぼかしなし */
    opacity: 1;                  /* 不透明（表示） */
    transform: translateY(0);    /* 元の位置へ */
  }
}

/* 初期状態：アニメーションが始まる前は見えないようにしておく */
.fadein {
  opacity: 0;
  will-change: filter, opacity, transform; /* ブラウザに動作を伝えて滑らかにする */
}

/* JavaScriptで 'is-active' クラスがついた瞬間に実行 */
.fadein.is-active {
  /* 2秒かけて、ease（自然な緩急）で、both（終了状態を維持）実行 */
  animation: blurReveal 2s ease both;
}


/* ============================================================
   2. ブラインド・リビール演出 (.reveal-blind)
   用途：メインビジュアル、大きな写真、印象付けたいロゴなど
   ============================================================ */

/* アニメーションの動きを定義（幕が上がるように現れる） */
@keyframes blindOpen {
  0% {
    /* 下側に完全に隠れている状態（上から100%分を切り抜く） */
    clip-path: inset(100% 0 0 0);
  }
  100% {
    /* 全開の状態（すべて表示） */
    clip-path: inset(0 0 0 0);
  }
}

/* 初期状態：切り抜いて隠しておく */
.reveal-blind {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path; /* 動作を滑らかにする */
}

/* JavaScriptで 'is-active' クラスがついた瞬間に実行 */
.reveal-blind.is-active {
  /* 1.5秒かけて実行。cubic-bezierで高級感のある「スッ…」とした動きに */
  animation: blindOpen 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* ============================================================
   3. スライド・リビール演出 (.reveal-up)
   用途：キャッチコピー、ロゴ横のテキスト、縦書き文字など
   ============================================================ */

/* アニメーションの動きを定義（見えない境界線から文字が競り上がる） */
@keyframes slideUpReveal {
  0% {
    transform: translateY(100%); /* 完全に下に隠れた状態 */
    clip-path: inset(0 0 100% 0); /* 下側を切り抜いて見えなくする */
  }
  100% {
    transform: translateY(0);    /* 元の位置へ */
    clip-path: inset(0 0 0 0);    /* 全て表示 */
  }
}

/* 初期状態：下側にずらして隠しておく */
.reveal-up {
  display: inline-block;        /* 文字に適用する場合に必須 */
  will-change: transform, clip-path;
  transform: translateY(100%);
  clip-path: inset(0 0 100% 0);
}

/* JavaScriptで 'is-active' クラスがついた瞬間に実行 */
.reveal-up.is-active {
  /* 1.2秒かけて実行。スッとした立ち上がりを演出 */
  animation: slideUpReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* ============================================================
   4. 共通オプション（遅延設定）
   用途：2つ以上の要素を順番に出したい時（例：class="reveal-up delay-500"）
   ============================================================ */

.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-800 { animation-delay: 0.8s; }
.delay-1000 { animation-delay: 1.0s; }