/*==========================================
-------- EFFECTS
========================================== */
:root {
  --anim-time: 800ms;
}
.anim-title {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-100px);
  transition: 
    opacity var(--anim-time) ease,
    filter var(--anim-time) ease,
    transform var(--anim-time) ease
  ;
}

.anim-title-active {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0px);
}

.anim-paragraph {
  opacity: 0;
  filter: blur(4px);
  transition: 
    opacity var(--anim-time) ease,
    filter var(--anim-time) ease
  ;
}

.anim-paragraph-active {
  opacity: 1;
  filter: blur(0px);
}

.anim-item {
  opacity: 0;
  filter: blur(4px);
  transition: 
    all var(--anim-time) ease
  ;
}

.anim-item-active {
  opacity: 1;
  filter: blur(0px);
}