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

/* ============================================
   紅葉の葉が舞い落ちるアニメーション
   ============================================ */

/* メインの落下アニメーション（JS側から duration・delay を個別指定） */
@keyframes momiji-fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  5% {
    opacity: 0.85;
  }
  20% {
    transform: translateY(20vh) translateX(35px) rotate(110deg) scale(0.95);
  }
  40% {
    transform: translateY(40vh) translateX(-25px) rotate(200deg) scale(1.05);
  }
  60% {
    transform: translateY(60vh) translateX(30px) rotate(300deg) scale(0.9);
  }
  80% {
    transform: translateY(80vh) translateX(-18px) rotate(400deg) scale(1);
    opacity: 0.7;
  }
  95% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(108vh) translateX(12px) rotate(480deg) scale(1);
  }
}

/* ページロード時のフェードイン */
@keyframes aki-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* カードのふわっと浮上 */
@keyframes aki-card-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 秋風にそよぐ揺れ */
@keyframes aki-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg);  }
}

/* 浮遊ふわふわ（固定装飾用） */
@keyframes aki-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  33% {
    transform: translateY(-8px) rotate(5deg);
    opacity: 0.9;
  }
  66% {
    transform: translateY(4px) rotate(-3deg);
    opacity: 0.7;
  }
}

/* 紅葉色グロー */
@keyframes aki-glow {
  0%, 100% { box-shadow: 0 0  8px rgba(193,71,42,0.30); }
  50%       { box-shadow: 0 0 20px rgba(193,71,42,0.65); }
}