/**■■■■■■■■■■■■■■■■■■■■■■■■■
* 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;

    opacity: 0;
    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 {
    transform: translateY(var(--ak-act-y));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 遅延 */
.__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_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);
}