body {
  font-family: "Jost", sans-serif;
}

/* ambient floating dots */
@keyframes floatDot {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-16px) translateX(6px);
    opacity: 0.95;
  }
}
.dot {
  position: absolute;
  border-radius: 50%;
  background: #8fd9a8;
  animation: floatDot 7s ease-in-out infinite;
}

/* scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

.delay-1 {
  transition-delay: 0.05s;
}
.delay-2 {
  transition-delay: 0.15s;
}
.delay-3 {
  transition-delay: 0.3s;
}
.delay-4 {
  transition-delay: 0.45s;
}
.delay-5 {
  transition-delay: 0.6s;
}
.delay-6 {
  transition-delay: 0.75s;
}

.line-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s ease-out;
}
.line-draw.in-view {
  transform: scaleX(1);
}