/* (1) fade 효과 */
.m-fade{ /* fade */
    transition: opacity 1.4s;
    opacity: 0;
}


/* (2) fade 효과 ver2 (move) */
.m-down{ /* 위에서 아래로 */
    transform: translate(0, -80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-up{ /* 아래에서 위로 */
    transform: translate(0, 80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-right{ /* 왼쪽에서 오른쪽으로 */
    transform: translate(-80px, 0);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-left{ /* 오른쪽에서 왼쪽으로 */
    transform: translate(80px, 0);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-down-right{
    transform: translate(-80px, -80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-down-left{
    transform: translate(80px, -80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-up-right{
    transform: translate(-80px, 80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-up-left{
    transform: translate(80px, 80px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}


/* (3) fade 효과 ver3 (move + bounce) */
.m-down-b{ /* 위에서 아래로 */
    transform: translate(0, -80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-up-b{ /* 아래에서 위로 */
    transform: translate(0, 80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-right-b{ /* 왼쪽에서 오른쪽으로 */
    transform: translate(-80px, 0);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-left-b{ /* 오른쪽에서 왼쪽으로 */
    transform: translate(80px, 0);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-down-right-b{
    transform: translate(-80px, -80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-down-left-b{
    transform: translate(80px, -80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-up-right-b{
    transform: translate(-80px, 80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}
.m-up-left-b{
    transform: translate(80px, 80px);
    transition: transform 1.5s, opacity 1.5s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
    opacity: 0;
}


/* (4) 펼쳐지는 효과 */
.m-roll-lft{
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1s, opacity 0.8s;
    opacity: 0.3;
}
.m-roll-rgt{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s, opacity 0.8s;
    opacity: 0.3;
}
.m-roll-up{
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s, opacity 0.8s;
    opacity: 0.3;
}
.m-roll-down{
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s, opacity 0.8s;
    opacity: 0.3;
}


/* (5) Zoom */
.m-zoom-in{
    transform: scale(0.8);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.m-zoom-out{
    transform: scale(1.2);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}


/* (6) Flip */
.m-flip-left{
    transform: perspective(2500px) rotateY(90deg);
    transition: transform 1.8s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
}
.m-flip-right{
    transform: perspective(2500px) rotateY(-90deg);
    transition: transform 1.8s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
}
.m-flip-up{
    transform: perspective(2500px) rotateX(-90deg);
    transition: transform 1.8s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
}
.m-flip-down{
    transform: perspective(2500px) rotateX(90deg);
    transition: transform 1.8s;
    transition-timing-function : cubic-bezier(.175,.885,.32,1.275);
}



/* (7) Grouping */
.motion-wrap .m-in:nth-of-type(2){transition-delay: 0.2s;}
.motion-wrap .m-in:nth-of-type(3){transition-delay: 0.4s;}
.motion-wrap .m-in:nth-of-type(4){transition-delay: 0.6s;}
.motion-wrap .m-in:nth-of-type(5){transition-delay: 0.8s;}
.motion-wrap .m-in:nth-of-type(6){transition-delay: 1.0s;}
.motion-wrap .m-in:nth-of-type(7){transition-delay: 1.2s;}
.motion-wrap .m-in:nth-of-type(8){transition-delay: 1.4s;}
.motion-wrap .m-in:nth-of-type(9){transition-delay: 1.8s;}
.motion-wrap .m-in:nth-of-type(10){transition-delay: 2.0s;}
.motion-wrap .m-in:nth-of-type(11){transition-delay: 2.2s;}
.motion-wrap .m-in:nth-of-type(12){transition-delay: 2.4s;}
.motion-wrap .m-in:nth-of-type(13){transition-delay: 2.6s;}
.motion-wrap .m-in:nth-of-type(14){transition-delay: 2.8s;}
.motion-wrap .m-in:nth-of-type(15){transition-delay: 3.0s;}



/* active */
.m-roll-lft.m-act, .m-roll-rgt.m-act, .m-roll-up.m-act, .m-roll-down.m-act{
    clip-path: inset(0 0 0 0);
    opacity: 1;
}
.motion-wrap.m-act .m-in.m-roll-lft,
.motion-wrap.m-act .m-in.m-roll-rgt,
.motion-wrap.m-act .m-in.m-roll-up,
.motion-wrap.m-act .m-in.m-roll-down{
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.motion.m-act, .motion-wrap.m-act .m-in{ /* active */
    transform: translate(0,0) scale(1) rotate(0deg);
    opacity: 1;
}
.m-flip-left.m-act, .m-flip-right.m-act, .m-flip-up.m-act, .m-flip-down.m-act{
    transform: perspective(2500px) rotate(0deg);
}



/* background-color 변경 */
body{
    /* transition: background-color 0.8s;             */
}