/*==================================================
  TutorMatch Design System v2.0
  File        : animations.css
  Description : Global Animation System
==================================================*/


/*==================================================
  1. GLOBAL TRANSITIONS
==================================================*/

.tm-transition-fast{
    transition:var(--transition-fast);
}

.tm-transition-normal{
    transition:var(--transition-normal);
}

.tm-transition-slow{
    transition:var(--transition-slow);
}

.tm-transition-bounce{
    transition:var(--transition-bounce);
}

.tm-transition-smooth{
    transition:var(--transition-smooth);
}
/*==================================================
  2. HOVER EFFECTS
==================================================*/

.tm-hover-lift:hover{

    transform:translateY(-6px);

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

}

.tm-hover-grow:hover{

    transform:scale(1.03);

}

.tm-hover-shrink:hover{

    transform:scale(.97);

}

.tm-hover-rotate:hover{

    transform:rotate(2deg);

}

.tm-hover-shadow:hover{

    box-shadow:var(--shadow-xl);

}

.tm-hover-primary:hover{

    background:var(--color-primary-hover);

}

.tm-hover-opacity:hover{

    opacity:.85;

}
/*==================================================
  3. TRANSFORM UTILITIES
==================================================*/

.tm-scale-0{
    transform:scale(0);
}

.tm-scale-50{
    transform:scale(.5);
}

.tm-scale-75{
    transform:scale(.75);
}

.tm-scale-100{
    transform:scale(1);
}

.tm-scale-110{
    transform:scale(1.1);
}

.tm-rotate-45{
    transform:rotate(45deg);
}

.tm-rotate-90{
    transform:rotate(90deg);
}

.tm-rotate-180{
    transform:rotate(180deg);
}
/*==================================================
  4. FADE ANIMATIONS
==================================================*/

.tm-fade-in{

    animation:tmFadeIn .5s ease forwards;

}

.tm-fade-out{

    animation:tmFadeOut .5s ease forwards;

}
/*==================================================
  5. SLIDE ANIMATIONS
==================================================*/

.tm-slide-up{

    animation:tmSlideUp .6s ease forwards;

}

.tm-slide-down{

    animation:tmSlideDown .6s ease forwards;

}

.tm-slide-left{

    animation:tmSlideLeft .6s ease forwards;

}

.tm-slide-right{

    animation:tmSlideRight .6s ease forwards;

}
/*==================================================
  6. SCALE ANIMATIONS
==================================================*/

.tm-zoom-in{

    animation:tmZoomIn .4s ease forwards;

}

.tm-zoom-out{

    animation:tmZoomOut .4s ease forwards;

}

.tm-pop{

    animation:tmPop .35s ease;

}
/*==================================================
  7. ROTATE ANIMATIONS
==================================================*/

.tm-spin{

    animation:tmSpin 1s linear infinite;

}

.tm-spin-slow{

    animation:tmSpin 3s linear infinite;

}
/*==================================================
  8. SKELETON LOADING
==================================================*/

.tm-skeleton{

    background:linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 50%,
        #f1f5f9 75%
    );

    background-size:200% 100%;

    animation:tmSkeleton 1.4s infinite linear;

}
/*==================================================
  9. SPINNER
==================================================*/

.tm-spinner{

    width:40px;

    height:40px;

    border:4px solid var(--color-border);

    border-top-color:var(--color-primary);

    border-radius:50%;

    animation:tmSpin .8s linear infinite;

}
/*==================================================
  10. KEYFRAMES
==================================================*/

@keyframes tmFadeIn{

from{opacity:0;}

to{opacity:1;}

}

@keyframes tmFadeOut{

from{opacity:1;}

to{opacity:0;}

}

@keyframes tmSlideUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes tmSlideDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes tmSlideLeft{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes tmSlideRight{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes tmZoomIn{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes tmZoomOut{

from{

opacity:1;

transform:scale(1);

}

to{

opacity:0;

transform:scale(.8);

}

}

@keyframes tmPop{

0%{transform:scale(.9);}

60%{transform:scale(1.05);}

100%{transform:scale(1);}

}

@keyframes tmSpin{

to{

transform:rotate(360deg);

}

}

@keyframes tmSkeleton{

0%{

background-position:200% 0;

}

100%{

background-position:-200% 0;

}

}
/*==================================================
  11. ANIMATION UTILITIES
==================================================*/

.tm-delay-1{
    animation-delay:.1s;
}

.tm-delay-2{
    animation-delay:.2s;
}

.tm-delay-3{
    animation-delay:.3s;
}

.tm-delay-4{
    animation-delay:.4s;
}

.tm-delay-5{
    animation-delay:.5s;
}

.tm-duration-fast{
    animation-duration:.25s;
}

.tm-duration-normal{
    animation-duration:.5s;
}

.tm-duration-slow{
    animation-duration:1s;
}
/*==================================================
  12. REDUCED MOTION
==================================================*/

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}
/*==================================================
  13. FLOATING ANIMATIONS
==================================================*/

/* Hero Illustration */

.tm-float{

    animation:tmFloat 4s ease-in-out infinite;

}

.tm-float-slow{

    animation:tmFloatSlow 7s ease-in-out infinite;

}

.tm-float-fast{

    animation:tmFloatFast 2.5s ease-in-out infinite;

}


/*==================================================
  14. SOFT BOUNCE
==================================================*/

.tm-bounce-soft{

    animation:tmBounceSoft 2s ease-in-out infinite;

}


/*==================================================
  15. PULSE GLOW
==================================================*/

.tm-pulse-glow{

    animation:tmPulseGlow 2.5s ease-in-out infinite;

}


/*==================================================
  16. ICON HOVER
==================================================*/

.tm-icon-hover:hover{

    transform:translateY(-4px) scale(1.08);

}


/*==================================================
  17. BUTTON PRESS
==================================================*/

.tm-button-press:active{

    transform:scale(.96);

}


/*==================================================
  18. CARD HOVER PREMIUM
==================================================*/

.tm-card-hover{

    transition:var(--transition-normal);

}

.tm-card-hover:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-xl);

}


/*==================================================
  19. IMAGE HOVER
==================================================*/

.tm-image-hover{

    transition:var(--transition-normal);

}

.tm-image-hover:hover{

    transform:scale(1.04);

}


/*==================================================
  20. ROTATING DECORATION
==================================================*/

.tm-rotate-slow{

    animation:tmRotateSlow 20s linear infinite;

}

/*==================================================
  21. SCROLL REVEAL SYSTEM
==================================================*/

.tm-reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
    opacity .8s ease,
    transform .8s ease;

    will-change:opacity,transform;

}

.tm-reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.tm-reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.tm-reveal-up{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.tm-reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:
    opacity .8s ease,
    transform .8s ease;

}


/*==============================
 Visible State
==============================*/

.tm-visible{

    opacity:1 !important;

    transform:none !important;

}


/*==============================
 Stagger Delay
==============================*/

.tm-delay-100{

    transition-delay:.1s;

}

.tm-delay-200{

    transition-delay:.2s;

}

.tm-delay-300{

    transition-delay:.3s;

}

.tm-delay-400{

    transition-delay:.4s;

}

.tm-delay-500{

    transition-delay:.5s;

}

.tm-delay-600{

    transition-delay:.6s;

}

.tm-delay-700{

    transition-delay:.7s;

}

.tm-delay-800{

    transition-delay:.8s;

}

/*==================================================
  22. MOUSE PARALLAX SYSTEM
==================================================*/

.tm-parallax{

    transform-style:preserve-3d;

    will-change:transform;

    transition:transform .12s linear;

}

.tm-parallax-sm{

    --parallax-strength:4;

}

.tm-parallax-md{

    --parallax-strength:8;

}

.tm-parallax-lg{

    --parallax-strength:14;

}

/*==================================================
  FLOAT
==================================================*/

@keyframes tmFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
  FLOAT SLOW
==================================================*/

@keyframes tmFloatSlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
  FLOAT FAST
==================================================*/

@keyframes tmFloatFast{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
  SOFT BOUNCE
==================================================*/

@keyframes tmBounceSoft{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


/*==================================================
  PULSE GLOW
==================================================*/

@keyframes tmPulseGlow{

0%{

box-shadow:0 0 0 rgba(37,99,235,0);

}

50%{

box-shadow:0 0 32px rgba(37,99,235,.35);

}

100%{

box-shadow:0 0 0 rgba(37,99,235,0);

}

}


/*==================================================
  ROTATE SLOW
==================================================*/

@keyframes tmRotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}