/**
 * アニメーションスタイル
 * 画面内表示時のアニメーション定義
 *
 * @package Figaro_Blocks
 */

/* ========================================
   @keyframes 定義
   ======================================== */

/* フェードイン */
@keyframes figaro-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* フェードインアップ */
@keyframes figaro-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(var(--animation-distance, 30px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードインダウン */
@keyframes figaro-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--animation-distance, 30px)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードインレフト */
@keyframes figaro-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--animation-distance, 30px)));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* フェードインライト */
@keyframes figaro-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(var(--animation-distance, 30px));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スケールイン */
@keyframes figaro-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* スケールインアップ */
@keyframes figaro-scale-in-up {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(var(--animation-distance, 30px));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* スケールインダウン */
@keyframes figaro-scale-in-down {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(calc(-1 * var(--animation-distance, 30px)));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   初期状態（非表示）
   ======================================== */

/* アニメーションクラスを持つ要素は初期状態で非表示 */
[class*="figaro-animation-"]:not(.figaro-animation-active):not(.figaro-animation-preview) {
    opacity: 0;
}

/* ========================================
   PC アニメーション適用（821px〜）
   ======================================== */

@media (min-width: 821px) {
    /* フェードイン */
    .figaro-animation-pc-fade-in.figaro-animation-active,
    .figaro-animation-pc-fade-in.figaro-animation-preview {
        animation: figaro-fade-in var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインアップ */
    .figaro-animation-pc-fade-in-up.figaro-animation-active,
    .figaro-animation-pc-fade-in-up.figaro-animation-preview {
        animation: figaro-fade-in-up var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインダウン */
    .figaro-animation-pc-fade-in-down.figaro-animation-active,
    .figaro-animation-pc-fade-in-down.figaro-animation-preview {
        animation: figaro-fade-in-down var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインレフト */
    .figaro-animation-pc-fade-in-left.figaro-animation-active,
    .figaro-animation-pc-fade-in-left.figaro-animation-preview {
        animation: figaro-fade-in-left var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインライト */
    .figaro-animation-pc-fade-in-right.figaro-animation-active,
    .figaro-animation-pc-fade-in-right.figaro-animation-preview {
        animation: figaro-fade-in-right var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールイン */
    .figaro-animation-pc-scale-in.figaro-animation-active,
    .figaro-animation-pc-scale-in.figaro-animation-preview {
        animation: figaro-scale-in var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールインアップ */
    .figaro-animation-pc-scale-in-up.figaro-animation-active,
    .figaro-animation-pc-scale-in-up.figaro-animation-preview {
        animation: figaro-scale-in-up var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールインダウン */
    .figaro-animation-pc-scale-in-down.figaro-animation-active,
    .figaro-animation-pc-scale-in-down.figaro-animation-preview {
        animation: figaro-scale-in-down var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }
}

/* ========================================
   SP アニメーション適用（〜820px）
   ======================================== */

@media (max-width: 820px) {
    /* フェードイン */
    .figaro-animation-sp-fade-in.figaro-animation-active,
    .figaro-animation-sp-fade-in.figaro-animation-preview {
        animation: figaro-fade-in var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインアップ */
    .figaro-animation-sp-fade-in-up.figaro-animation-active,
    .figaro-animation-sp-fade-in-up.figaro-animation-preview {
        animation: figaro-fade-in-up var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインダウン */
    .figaro-animation-sp-fade-in-down.figaro-animation-active,
    .figaro-animation-sp-fade-in-down.figaro-animation-preview {
        animation: figaro-fade-in-down var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインレフト */
    .figaro-animation-sp-fade-in-left.figaro-animation-active,
    .figaro-animation-sp-fade-in-left.figaro-animation-preview {
        animation: figaro-fade-in-left var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* フェードインライト */
    .figaro-animation-sp-fade-in-right.figaro-animation-active,
    .figaro-animation-sp-fade-in-right.figaro-animation-preview {
        animation: figaro-fade-in-right var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールイン */
    .figaro-animation-sp-scale-in.figaro-animation-active,
    .figaro-animation-sp-scale-in.figaro-animation-preview {
        animation: figaro-scale-in var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールインアップ */
    .figaro-animation-sp-scale-in-up.figaro-animation-active,
    .figaro-animation-sp-scale-in-up.figaro-animation-preview {
        animation: figaro-scale-in-up var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }

    /* スケールインダウン */
    .figaro-animation-sp-scale-in-down.figaro-animation-active,
    .figaro-animation-sp-scale-in-down.figaro-animation-preview {
        animation: figaro-scale-in-down var(--animation-duration, 0.6s) var(--animation-easing, ease-out) var(--animation-delay, 0s) both;
    }
}