/* スライド入場アニメーション */
@keyframes animFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes animIconPop {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-8deg);
    }
    70% {
        transform: scale(1.12) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes animIconShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes animBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes animLineGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes animCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 非表示スライドは初期状態に戻さない（切替時のちらつき防止） */
.slide.active .anim-item {
    opacity: 0;
}

.slide.anim-play .anim-item {
    animation: animFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.06s * var(--anim-i, 0));
}

.slide.anim-play .anim-item.anim-card {
    animation-name: animCardIn;
    animation-duration: 0.6s;
}

.slide.anim-play .anim-line-grow {
    animation: animLineGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.06s * var(--anim-i, 0) + 0.15s);
    transform-origin: center;
}

.slide.active .anim-icon {
    opacity: 0;
    display: inline-block;
}

.slide.anim-play .anim-icon {
    animation: animIconPop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    animation-delay: calc(0.08s * var(--anim-i, 0) + 0.12s);
}

.slide.anim-play .anim-icon[data-anim="shake"] {
    animation-name: animIconShake;
    animation-duration: 0.65s;
    animation-timing-function: ease-in-out;
}

.slide.anim-play .anim-icon[data-anim="bounce"] {
    animation: animBounce 0.9s ease-in-out infinite;
    animation-delay: calc(0.08s * var(--anim-i, 0) + 0.5s);
    opacity: 1;
}

.slide.active .highlight-marker.anim-highlight {
    opacity: 0;
}

.slide.anim-play .highlight-marker.anim-highlight {
    animation: animFadeIn 0.5s ease forwards;
    animation-delay: calc(0.06s * var(--anim-i, 0) + 0.45s);
}

/* カウントアップ（金額）— 親 anim-item のフェードの影響を受けない */
.countup-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 4.5em;
    text-align: right;
    opacity: 1 !important;
}

.slide.anim-play .countup-num:not(.countup-zoom):not(.countup-rolling) {
    animation: none !important;
}

.countup-num.countup-zoom {
    animation: countupZoomInOut 0.3s ease forwards !important;
}

@keyframes countupZoomInOut {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.countup-group {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    opacity: 1;
}

.countup-unit {
    flex-shrink: 0;
}

@keyframes animWipeReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.slide.active .anim-wipe-in {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
}

.slide.anim-play .anim-wipe-in {
    animation: animWipeReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
    .slide.active .anim-wipe-in {
        clip-path: none;
    }

    .slide.anim-play .anim-wipe-in {
        animation: none !important;
        clip-path: none;
    }

    .slide.active .anim-item,
    .slide.active .anim-icon {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .slide.anim-play .anim-icon[data-anim="bounce"] {
        animation: none !important;
    }

    .countup-num.countup-zoom {
        animation: none !important;
    }
}
