/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

/* フェードインアニメーション（javascript.jsと連携） */
/* JS未実行時のフォールバック: コンテンツを表示状態にしておく */
.mg-animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* JSがクラスを付与した後に初期状態（非表示）を適用 */
.js-ready .mg-animate {
  opacity: 0;
  transform: translateY(24px);
}
.js-ready .mg-visible,
.mg-visible {
  opacity: 1;
  transform: translateY(0);
}

/* バナーの背景グロー */
@keyframes mg-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* フローティングアニメーション */
@keyframes mg-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(.95); }
  75% { transform: translate(15px, 10px) scale(1.05); }
}

/* フェードインアップ */
@keyframes mg-fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ボタンパルス */
@keyframes mg-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(37,99,235,0.4); }
  50% { box-shadow: 0 4px 36px rgba(37,99,235,0.6); }
}

/* バナー入場アニメーション */
.mg-banner__title,
.mg-banner__tagline,
.mg-banner__keywords {
  animation: mg-fadeInUp 0.8s ease both;
}
.mg-banner__title    { animation-delay: 0.1s; }
.mg-banner__tagline  { animation-delay: 0.25s; }
.mg-banner__keywords { animation-delay: 0.4s; }