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

/* ============================================
   水泡（バブル）が涼しく立ち上るアニメーション
   ============================================ */

/* メインの上昇アニメーション（JS側から duration・delay を個別指定） */
@keyframes suzu-bubble-rise {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  6% {
    opacity: 0.8;
  }
  25% {
    transform: translateY(-25vh) translateX(18px) scale(0.95);
  }
  50% {
    transform: translateY(-50vh) translateX(-16px) scale(1);
  }
  75% {
    transform: translateY(-75vh) translateX(14px) scale(1.05);
    opacity: 0.7;
  }
  92% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
    transform: translateY(-108vh) translateX(-8px) scale(1.1);
  }
}

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

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

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

/* 波紋のように浮遊（固定装飾用） */
@keyframes suzu-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 suzu-glow {
  0%, 100% { box-shadow: 0 0  8px rgba(79,176,222,0.30); }
  50%       { box-shadow: 0 0 20px rgba(79,176,222,0.65); }
}