/* ==========================================================================
   スクロール連動アニメーション設定
   ========================================================================== */

/* 1. 下から上に移動しながらフェードイン */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* アニメーション開始前の初期状態 */
.animate-cards-container:not(.is-visible) .member-trump-card {
    opacity: 0;
    left: 50% !important;
    bottom: -30px !important;
    transform: translateX(-50%) rotate(0deg) !important;
    pointer-events: none; /* アニメーション前は操作不可 */
}

/* カードごとにディレイ（遅延）をかけて時間差で広がる演出 */
.animate-cards-container .card-yellow { transition-delay: 0.0s; }
.animate-cards-container .card-blue   { transition-delay: 0.1s; }
.animate-cards-container .card-red    { transition-delay: 0.2s; }
.animate-cards-container .card-gray   { transition-delay: 0.3s; }

/* ホバー時にはディレイを無効化して即座に拡大させる */
.animate-cards-container .member-trump-card:hover {
    transition-delay: 0s !important;
}

/* 3. 1920px固定のシームレス無限背景ループ */
@keyframes scrollBg {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-1920px, 0, 0);
    }
}