.hero {
  position: relative;
  overflow: hidden;
}

.hero-words {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}

.drop-word {
  position: absolute;
  left: var(--x);
  top: var(--y);

  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;

  color: #242AD7;
  white-space: nowrap;

  opacity: 0;

  transform:
    scale(0.7)
    scaleX(1.35)
    scaleY(0.75);

  filter: blur(6px);

  transform-origin: center;

  animation: liquidWord 1.4s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay: var(--d);
}

@keyframes liquidWord {

  0% {
    opacity: 0;

    transform:
      scale(0.7)
      scaleX(1.35)
      scaleY(0.75);

    filter: blur(6px);
  }

  30% {
    opacity: 0.35;

    transform:
      scale(0.88)
      scaleX(0.72)
      scaleY(1.28);

    filter: blur(4px);
  }

  55% {
    opacity: 0.7;

    transform:
      scale(1.02)
      scaleX(1.18)
      scaleY(0.88);

    filter: blur(1.5px);
  }

  78% {
    opacity: 1;

    transform:
      scale(1.03)
      scaleX(0.94)
      scaleY(1.06);

    filter: blur(0.3px);
  }

  100% {
    opacity: 1;

    transform:
      scale(1)
      scaleX(1)
      scaleY(1);

    filter: blur(0);
  }
}