$forceful: cubic-bezier(0.88,-0.07, 0.22, 1.01);
$forceful-2: cubic-bezier(0.98, 0, 0, 1.01);
$accelerate: cubic-bezier(1, 0.25, 0, 1.01);
$slow-down: cubic-bezier(0.18, 0, 0.08, 1);
$sudden: (0, 1.04, 0, 1.04);
$slide-main: 0.25s $forceful;

// playback-speed: 0.7 ~ 1, 1.33 ~ 1.35, 1.55, 2
$playback-speed: var(--anim-playback-rate);
@function applyPlaybackSpeed($timeExpr)
{
    @return calc(#{$timeExpr} * #{$playback-speed});
}

@keyframes reset-transform { to { transform: translate(0) } }
@keyframes reset-rotate { to { transform: rotate(0) } }

@keyframes opacity_spawn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes opacity_fade {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes slide_RL {
    from { transform: translateX(10px); }
    to { transform: translateX(0); }
}
@keyframes slide_LR {
    from { transform: translateX(-10px); }
    to { transform: translateX(0); }
}
@keyframes slide_DU {
    from { transform: translateY(10px); }
    to { transform: translateY(0); }
}
@keyframes slide_UD {
    from { transform: translateY(-10px); }
    to { transform: translateY(0); }
}
@keyframes expand_LR {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) }
}
@keyframes collapse_LR {
    from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) }
    to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) }
}
@keyframes expand_RL {
    from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0) }
    to { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0) }
}
@keyframes expand_DU {
    from { clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%) }
    to { clip-path: polygon(0 100%, 0 -20%, 100% -20%, 100% 100%) }
}
@keyframes collapse_DU {
    from { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) }
    to { clip-path: polygon(0 0, 0 0, 100% 0, 100% 0) }
}
@keyframes expand_UD {
    from { clip-path: polygon(0 0, 0 0, 100% 0, 100% 0) }
    to { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) }
}
@keyframes collapse_UD {
    from { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) }
    to { clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%) }
}
@keyframes reset-transform-x {
    to { transform: translateX(0) }
}
@keyframes reset-transform-y {
    to { transform: translateY(0) }
}
@keyframes reset-transform-xy {
    to { transform: translate(0, 0) }
}
@keyframes reset-rotate {
    to { transform: rotate(0) }
}
@keyframes reset-scale {
    to { transform: scale(1) }
}