/*======================================================================
MF-10

ANIMATION FOUNDATION
Version : 3.0

======================================================================*/

.ms-transition{

transition:all var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-transition-fast{

transition:all var(--ms-motion-fast) var(--ms-ease-standard);

}

.ms-transition-slow{

transition:all var(--ms-motion-slow) var(--ms-ease-standard);

}


.ms-fade{

opacity:0;

transition:opacity var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-fade.is-visible{

opacity:1;

}


.ms-scale{

transform:scale(.96);

opacity:0;

transition:

transform var(--ms-motion-normal) var(--ms-ease-standard),

opacity var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-scale.is-visible{

transform:scale(1);

opacity:1;

}


.ms-slide-up{

transform:translateY(24px);

opacity:0;

transition:

transform var(--ms-motion-normal) var(--ms-ease-standard),

opacity var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-slide-up.is-visible{

transform:translateY(0);

opacity:1;

}


.ms-hover-lift{

transition:

transform var(--ms-motion-fast) var(--ms-ease-standard),

box-shadow var(--ms-motion-fast) var(--ms-ease-standard);

}

.ms-hover-lift:hover{

transform:translateY(-6px);

box-shadow:var(--ms-shadow-lg);

}



.ms-hover-scale{

transition:

transform var(--ms-motion-fast) var(--ms-ease-standard);

}

.ms-hover-scale:hover{

transform:scale(1.03);

}



.ms-hover-opacity{

transition:

opacity var(--ms-motion-fast) var(--ms-ease-standard);

}

.ms-hover-opacity:hover{

opacity:.85;

}


.ms-hover-rotate{

transition:

transform var(--ms-motion-fast) var(--ms-ease-standard);

}

.ms-hover-rotate:hover{

transform:rotate(2deg);

}


.ms-delay-100{

transition-delay:.1s;

}

.ms-delay-200{

transition-delay:.2s;

}

.ms-delay-300{

transition-delay:.3s;

}

.ms-delay-400{

transition-delay:.4s;

}

.ms-delay-500{

transition-delay:.5s;

}


.ms-duration-fast{

transition-duration:var(--ms-motion-fast);

}

.ms-duration-normal{

transition-duration:var(--ms-motion-normal);

}

.ms-duration-slow{

transition-duration:var(--ms-motion-slow);

}


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

.ms-transition,
.ms-transition-fast,
.ms-transition-slow,

.ms-fade,
.ms-scale,
.ms-slide-up,

.ms-hover-lift,
.ms-hover-scale,
.ms-hover-opacity,
.ms-hover-rotate{

transition:none !important;

animation:none !important;

transform:none !important;

opacity:1 !important;

}

}