.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);
  }
}






.ticker-wrap {
  position: relative;

  width: 100vw;
  overflow: hidden;

  background: #242AD7;

  padding: 9px 0;
}

.ticker {
  display: flex;
  width: max-content;

  animation: tickerMove 22s linear infinite;
}

.ticker span {
  display: flex;
  align-items: center;

  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #F7F7F7;

  white-space: nowrap;

  padding-right: 40px;
}

@keyframes tickerMove {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}