/*
 * animations.css - CSS keyframesアニメーションとトランジション定義
 *
 * @keyframes でアニメーションの「動きの定義」を作り、
 * 各要素の animation プロパティから名前で参照して使う。
 */

/* ============================================
   fade-in-up: フェードインしながら下から上に浮き上がる
   用途: Heroのロゴ、名前、キャッチコピーの登場演出
   ============================================ */
@keyframes fade-in-up {
  from {
    opacity: 0;              /* 完全に透明な状態からスタート */
    transform: translateY(30px);  /* 30px下の位置からスタート */
  }
  to {
    opacity: 1;              /* 完全に見える状態へ */
    transform: translateY(0);     /* 本来の位置へ */
  }
}

/* ============================================
   blink-cursor: タイピングカーソルの点滅
   用途: Heroのタイピングアニメーションの縦棒カーソル
   step-end を使うことでパッパッと切り替わる（フェードしない）
   ============================================ */
@keyframes blink-cursor {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ============================================
   glow-pulse: ネオングローの明滅（脈動）
   用途: テキストや要素のネオン効果を生き生きさせる
   ============================================ */
@keyframes glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(0, 229, 255, 0.3),
      0 0 40px rgba(0, 229, 255, 0.1);
  }
  50% {
    text-shadow:
      0 0 15px rgba(0, 229, 255, 0.5),
      0 0 60px rgba(0, 229, 255, 0.2);
  }
}

/* ============================================
   scroll-reveal: スクロールで画面内に入った時のフェードイン
   用途: About、Skills、Contactセクションの要素登場

   仕組み:
   - 初期状態: 透明 + 少し下にずれた位置
   - .is-visible クラスが付くと: 不透明 + 本来の位置
   - transition で滑らかに変化
   - .is-visible はJavaScript(main.js)のIntersectionObserverで付与
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  /* transition: プロパティ名 時間 イージング */
  /* ease-out: 最初速く、後半ゆっくり減速するカーブ */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* JavaScriptから .is-visible が付与されたら表示状態にする */
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   confetti-fall: 紙吹雪の落下アニメーション
   用途: コナミコマンド発動時の紙吹雪
   画面上部から下部へ、左右に揺れながら落ちる。
   ============================================ */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);  /* 画面の高さ分落下 + 2回転 */
    opacity: 0;
  }
}

/* ============================================
   party-hue: パーティーモードの色相回転
   用途: コナミコマンドで発動するパーティーモード
   hue-rotateフィルタで色相を360度回転させ、
   サイト全体の色がカラフルに変化し続ける。
   ============================================ */
@keyframes party-hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* パーティーモード: bodyに .party-mode が付くとサイト全体の色が虹色に変化 */
.party-mode {
  animation: party-hue 3s linear infinite;
}