/* アニメーションの対象となる要素の基本スタイル */
.fade-in-bounce {
    opacity: 0; /* 最初は非表示 */
    transform: translateY(-50px) scale(0.8); /* 最初は少し上から小さく開始 */
    animation: fade-in-bounce-animation 1.0s forwards ease-out; /* アニメーションを適用 */
}

/* キーフレームアニメーションの定義 */
@keyframes fade-in-bounce-animation {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(10px) scale(1.05); /* 一度少しオーバーシュートしてバウンド感を出す */
    }
    75% {
        transform: translateY(-5px) scale(0.98); /* 少し戻る */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1); /* 最終的な位置とサイズ */
    }
}

/* より複雑なバウンドアニメーション（オプション） */
/* もっとバウンド感を強調したい場合 */
.fade-in-bounce-more {
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
    animation: fade-in-bounce-more-animation 1.5s forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* cubic-bezierを使ってより弾むようなイージングを定義 */
}

@keyframes fade-in-bounce-more-animation {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translateY(20px) scale(1.2); /* 大きく下にバウンド */
    }
    60% {
        transform: translateY(-15px) scale(0.9); /* 上に戻る */
    }
    80% {
        transform: translateY(5px) scale(1.05); /* 小さく下にバウンド */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}