/* Elements start hidden until scrolled into view */
.qms-fade-in,
.qms-slide-in,
.qms-slide-up {
  opacity: 0;
}

.qms-slide-in { transform: translateY(40px); }
.qms-slide-up  { transform: translateY(20px); }

/* Triggered by IntersectionObserver adding .is-visible */
.qms-fade-in.is-visible {
  animation: fadeIn 0.8s ease-out forwards;
}

.qms-slide-in.is-visible {
  animation: slideIn 0.9s ease-out forwards;
}

.qms-slide-up.is-visible {
  animation: slideUp 0.8s ease-out forwards;
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}