/* アニメーションの初期状態 */
.fade-in, .slide-in, .slide-in-left, .slide-in-right, .zoom-in {
    opacity: 0;
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* 表示状態 (.visible) */
.fade-in.visible, .slide-in.visible, .slide-in-left.visible, 
.slide-in-right.visible, .zoom-in.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* 各アニメーションの挙動 */
.slide-in { transform: translateY(50px); }
.slide-in-left { transform: translateX(-50px); }
.slide-in-right { transform: translateX(50px); }
.zoom-in { transform: scale(0.9); }

/* 文字アニメーション */
.char-slide-up { display: flex; overflow: hidden; }
.char-slide-up span {
    display: block;
    transform: translateY(105%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.char-slide-up.-active span { transform: translateY(0); }

/* バウンスアニメーション（keyframes使用） */
.bounce-in { opacity: 0; }
.bounce-in.visible { animation: bounceIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
@keyframes bounceIn {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}