/* ==========================================================
   MENTOROID EDUVISOR
   Global Animation System
   Version: 1.0
========================================================== */

/* ==========================================================
   TRANSITIONS
========================================================== */

:root{
  --transition-fast:0.2s ease;
  --transition-normal:0.35s ease;
  --transition-slow:0.6s ease;
}

/* ==========================================================
   FADE ANIMATIONS
========================================================== */

@keyframes fadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeLeft{
  from{
    opacity:0;
    transform:translateX(-40px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes fadeRight{
  from{
    opacity:0;
    transform:translateX(40px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ==========================================================
   SCALE
========================================================== */

@keyframes scaleIn{
  from{
    opacity:0;
    transform:scale(.9);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}

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

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0px);
  }
}

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

@keyframes glowPulse{

  0%{
    box-shadow:0 0 0 rgba(0,212,255,.15);
  }

  50%{
    box-shadow:0 0 30px rgba(0,212,255,.45);
  }

  100%{
    box-shadow:0 0 0 rgba(0,212,255,.15);
  }

}

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

@keyframes rotateSlow{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}

/* ==========================================================
   ANIMATION UTILITIES
========================================================== */

.fade-in{
  animation:fadeIn .8s ease forwards;
}

.fade-up{
  animation:fadeUp .8s ease forwards;
}

.fade-down{
  animation:fadeDown .8s ease forwards;
}

.fade-left{
  animation:fadeLeft .8s ease forwards;
}

.fade-right{
  animation:fadeRight .8s ease forwards;
}

.scale-in{
  animation:scaleIn .7s ease forwards;
}

.float{
  animation:float 4s ease-in-out infinite;
}

.glow{
  animation:glowPulse 2.5s infinite;
}

.rotate-slow{
  animation:rotateSlow 20s linear infinite;
}