/* ベース：最後ゆっくり着地 */
.slide-up-fade-in {
    opacity: 0;
    transform: translateY(var(--y, 60px));
    /* 200px→24〜40pxくらいが自然 */
    transition:
        opacity var(--dur, .9s) cubic-bezier(0, 0, 0.2, 1),
        transform var(--dur, .9s) cubic-bezier(0, 0, 0.2, 1);
    will-change: opacity, transform;
}

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

/* お好みのバリエーション */
.slide-up-fade-in.slow {
    --dur: 1.5s;
}

/* ゆっくり */
.slide-up-fade-in.fast {
    --dur: .5s;
}

/* 速め */

/* さらに柔らかい“とろっと着地” */
.slide-up-fade-in.soft {
    --dur: 1.1s;
    /* 少し強めの減速（お好みで） */
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.is-anime.mask {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.is-anime.mask.active {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.is-anime.mask.slow {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}

.is-anime.fade {
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.is-anime.fade.active {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

/* 調整ノブ */
:root {
    --reveal-duration: 2.8s;
    --reveal-ease: cubic-bezier(.2, .8, .2, 1);
}

/* 初期状態：少し下＆小さく＆薄く＆うっすらブラー */
.textanimation-reveal {
    --delay: 0ms;
    /* 個別遅延 */
    --y: 0px;
    /* 縦移動距離 */
    --scale: .98;
    /* ふわっと感 */
    --blur: 5px;
    /* ほんのりブラー */

    opacity: 0;
    transform: translateY(var(--y)) scale(var(--scale));
    filter: blur(var(--blur));
    transition:
        opacity var(--reveal-duration) var(--reveal-ease) var(--delay),
        transform var(--reveal-duration) var(--reveal-ease) var(--delay),
        filter var(--reveal-duration) var(--reveal-ease) var(--delay);
    will-change: opacity, transform, filter;
}

/* 表示状態 */
.textanimation-reveal.is-inview {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}