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

/* ============================================
   桜の花びらが舞い落ちるアニメーション
   ============================================ */

/* メインの落下アニメーション（JS側から duration・delay を個別指定） */
@keyframes sakura-fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  5% {
    opacity: 0.85;
  }
  20% {
    transform: translateY(20vh) translateX(30px) rotate(72deg);
  }
  40% {
    transform: translateY(40vh) translateX(-20px) rotate(144deg);
  }
  60% {
    transform: translateY(60vh) translateX(25px) rotate(216deg);
  }
  80% {
    transform: translateY(80vh) translateX(-15px) rotate(288deg);
    opacity: 0.7;
  }
  95% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(108vh) translateX(10px) rotate(360deg);
  }
}

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

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

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

/* 浮遊ふわふわ（固定装飾用） */
@keyframes haru-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 haru-glow {
  0%, 100% { box-shadow: 0 0  8px rgba(244,167,185,0.30); }
  50%       { box-shadow: 0 0 20px rgba(244,167,185,0.65); }
}