/**■■■■■■■■■■■■■■■■■■■■■■■■■
* AK 汎用アニメーション
■■■■■■■■■■■■■■■■■■■■■■■■■**/

/*==================================================
基本設定
===================================*/

.__AK_act {
    --ak-act-duration: .7s;
    --ak-act-delay: 0s;
    --ak-act-ease: cubic-bezier(.22, 1, .36, 1);

    --ak-act-x: 48px;
    --ak-act-y: 48px;

    --ak-act-scale-small: .92;
    --ak-act-scale-large: 1.08;

    --ak-act-blur: 10px;

    transition-property: opacity, transform, filter, clip-path;
    transition-duration: var(--ak-act-duration);
    transition-delay: var(--ak-act-delay);
    transition-timing-function: var(--ak-act-ease);

    will-change: opacity, transform;
}


/*==================================================
ふわっ
===================================*/

/* その場で */
.__AK_act.__AK_fade {
    opacity: 0;
}

/* 下から */
.__AK_act.__AK_fade_up {
    opacity: 0;
    transform: translateY(var(--ak-act-y));
}

/* 上から */
.__AK_act.__AK_fade_down {
    opacity: 0;
    transform: translateY(calc(var(--ak-act-y) * -1));
}

/* 左から */
.__AK_act.__AK_fade_left {
    opacity: 0;
    transform: translateX(calc(var(--ak-act-x) * -1));
}

/* 右から */
.__AK_act.__AK_fade_right {
    opacity: 0;
    transform: translateX(var(--ak-act-x));
}


/*==================================================
ボンッ / ヒュッ
===================================*/

/* 拡大 */
.__AK_act.__AK_zoom_in {
    opacity: 0;
    transform: scale(var(--ak-act-scale-small));
}

/* 縮小 */
.__AK_act.__AK_zoom_out {
    opacity: 0;
    transform: scale(var(--ak-act-scale-large));
}


/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.__AK_act.__AK_blur {
    opacity: 0;
    filter: blur(var(--ak-act-blur));
    transform: scale(1.02);
}


/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.__AK_act.__AK_smooth {
    opacity: 0;
    transform: translate3d(0, 100%, 0) skewY(8deg);
    transform-origin: left;
}


/*==================================================
クリップ表示
===================================*/

/* 左から表示 */
.__AK_act.__AK_clip_left {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

/* 右から表示 */
.__AK_act.__AK_clip_right {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
}

/* 上から表示 */
.__AK_act.__AK_clip_down {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
}

/* 下から表示 */
.__AK_act.__AK_clip_up {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}


/*==================================================
軽めの回転
===================================*/

/* 左回転しながら */
.__AK_act.__AK_rotate_left {
    opacity: 0;
    transform: translateY(18px) rotate(-4deg);
    transform-origin: center center;
}

/* 右回転しながら */
.__AK_act.__AK_rotate_right {
    opacity: 0;
    transform: translateY(18px) rotate(4deg);
    transform-origin: center center;
}


/*==================================================
CSS変数用ショートクラス
===================================*/

/* 遅延 5秒まで */

.__AK_delay_01 {
    --ak-act-delay: .1s;
}

.__AK_delay_02 {
    --ak-act-delay: .2s;
}

.__AK_delay_03 {
    --ak-act-delay: .3s;
}

.__AK_delay_04 {
    --ak-act-delay: .4s;
}

.__AK_delay_05 {
    --ak-act-delay: .5s;
}

.__AK_delay_06 {
    --ak-act-delay: .6s;
}

.__AK_delay_07 {
    --ak-act-delay: .7s;
}

.__AK_delay_08 {
    --ak-act-delay: .8s;
}

.__AK_delay_09 {
    --ak-act-delay: .9s;
}

.__AK_delay_10 {
    --ak-act-delay: 1s;
}

.__AK_delay_11 {
    --ak-act-delay: 1.1s;
}

.__AK_delay_12 {
    --ak-act-delay: 1.2s;
}

.__AK_delay_13 {
    --ak-act-delay: 1.3s;
}

.__AK_delay_14 {
    --ak-act-delay: 1.4s;
}

.__AK_delay_15 {
    --ak-act-delay: 1.5s;
}

.__AK_delay_16 {
    --ak-act-delay: 1.6s;
}

.__AK_delay_17 {
    --ak-act-delay: 1.7s;
}

.__AK_delay_18 {
    --ak-act-delay: 1.8s;
}

.__AK_delay_19 {
    --ak-act-delay: 1.9s;
}

.__AK_delay_20 {
    --ak-act-delay: 2s;
}

.__AK_delay_21 {
    --ak-act-delay: 2.1s;
}

.__AK_delay_22 {
    --ak-act-delay: 2.2s;
}

.__AK_delay_23 {
    --ak-act-delay: 2.3s;
}

.__AK_delay_24 {
    --ak-act-delay: 2.4s;
}

.__AK_delay_25 {
    --ak-act-delay: 2.5s;
}

.__AK_delay_26 {
    --ak-act-delay: 2.6s;
}

.__AK_delay_27 {
    --ak-act-delay: 2.7s;
}

.__AK_delay_28 {
    --ak-act-delay: 2.8s;
}

.__AK_delay_29 {
    --ak-act-delay: 2.9s;
}

.__AK_delay_30 {
    --ak-act-delay: 3s;
}

.__AK_delay_31 {
    --ak-act-delay: 3.1s;
}

.__AK_delay_32 {
    --ak-act-delay: 3.2s;
}

.__AK_delay_33 {
    --ak-act-delay: 3.3s;
}

.__AK_delay_34 {
    --ak-act-delay: 3.4s;
}

.__AK_delay_35 {
    --ak-act-delay: 3.5s;
}

.__AK_delay_36 {
    --ak-act-delay: 3.6s;
}

.__AK_delay_37 {
    --ak-act-delay: 3.7s;
}

.__AK_delay_38 {
    --ak-act-delay: 3.8s;
}

.__AK_delay_39 {
    --ak-act-delay: 3.9s;
}

.__AK_delay_40 {
    --ak-act-delay: 4s;
}

.__AK_delay_41 {
    --ak-act-delay: 4.1s;
}

.__AK_delay_42 {
    --ak-act-delay: 4.2s;
}

.__AK_delay_43 {
    --ak-act-delay: 4.3s;
}

.__AK_delay_44 {
    --ak-act-delay: 4.4s;
}

.__AK_delay_45 {
    --ak-act-delay: 4.5s;
}

.__AK_delay_46 {
    --ak-act-delay: 4.6s;
}

.__AK_delay_47 {
    --ak-act-delay: 4.7s;
}

.__AK_delay_48 {
    --ak-act-delay: 4.8s;
}

.__AK_delay_49 {
    --ak-act-delay: 4.9s;
}

.__AK_delay_50 {
    --ak-act-delay: 5s;
}


/* 速度 */
.__AK_duration_fast {
    --ak-act-duration: .45s;
}

.__AK_duration_normal {
    --ak-act-duration: .7s;
}

.__AK_duration_slow {
    --ak-act-duration: 1s;
}

.__AK_duration_slower {
    --ak-act-duration: 1.4s;
}


/* 移動距離 */
.__AK_move_short {
    --ak-act-x: 24px;
    --ak-act-y: 24px;
}

.__AK_move_normal {
    --ak-act-x: 48px;
    --ak-act-y: 48px;
}

.__AK_move_long {
    --ak-act-x: 80px;
    --ak-act-y: 80px;
}


/*==================================================
アクセシビリティ
===================================*/

@media (prefers-reduced-motion: reduce) {

    .__AK_act {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: inset(0 0 0 0) !important;
    }

}


/*==================================================
アニメーション実行
===================================*/

.__AK_act.__AK_act_active {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
}