:root {
  --launch-time: 2s;
  --curve-bezier-curve: cubic-bezier(0.78, -0.01, 0.64, 1);
  --rocket-bezier-curve: cubic-bezier(0.78, -0.01, 0.64, 1);
}

/* Rocket
_______________________________________________ */

header .callout .puny-rocket {
  position: relative;
  animation: rocket-shake 1s ease-in-out alternate infinite;
}

header .callout .rocket-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 24px;
  width: 4px;
  height: 50px;
  background: linear-gradient(
    180deg,
    rgba(72, 240, 216, 0.4) 23.67%,
    rgba(72, 240, 216, 0.2) 100%
  );
  animation: rocket-exhaust 1s ease-in-out alternate infinite,
    rocket-exhaust-size var(--launch-time) var(--rocket-bezier-curve) forwards;
}

header .callout .rocket-wrapper {
  position: relative;
  animation: launch var(--launch-time) var(--rocket-bezier-curve) forwards;
  /* animation-delay: 0.2s; */
}

@keyframes rocket-exhaust {
  0% {
    transform: translate(-50%, 3px);
  }
  100% {
    transform: translate(-50%, -3px);
  }
}

@keyframes rocket-exhaust-size {
  0% {
    height: 0px;
  }
  100% {
    height: 15px;
  }
}

@keyframes rocket-shake {
  0% {
    transform: translateY(3px);
  }
  20% {
    transform: translateY(2px);
  }
  80% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(-3px);
  }
}

@keyframes launch {
  0% {
    transform: scale(0.8) translateY(1300%);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

/* Fumes
_______________________________________________ */
.mask-path {
  opacity: 0;
  animation: curve var(--launch-time) var(--curve-bezier-curve) forwards;
  animation-delay: 0.2s;
}

.curve-one {
  width: 0;
  animation: curve var(--launch-time) var(--curve-bezier-curve) forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

.curve-two {
  width: 0;
  animation: curve var(--launch-time) var(--curve-bezier-curve) forwards;
  animation-delay: 0.21s;
  opacity: 0;
}

.curve-three {
  width: 0;
  animation: curve var(--launch-time) var(--curve-bezier-curve) forwards;
  animation-delay: 0.23s;
  opacity: 0;
}

@keyframes curve {
  0% {
    transform-origin: center;
    transform: scale(0, 1) translateY(75%);
    opacity: 1;
  }

  80% {
    transform: scale(1.3, 1);
  }

  100% {
    transform-origin: center;
    transform: scale(1, 1) translateY(0);
    opacity: 1;
  }
}

@keyframes showNoise {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Vertical slider
_______________________________________________ */

.company-value-box .emoji-wrapper img {
  animation: horizontal-scroll 20s 0.1s linear infinite;
}

.company-value-box .emoji-wrapper img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  animation: horizontal-sticky-scroll 20s 0.1s linear infinite;
}

.company-value-box .emoji-wrapper:last-child img {
  animation: horizontal-scroll 25s 0.1s linear infinite;
}

.company-value-box .emoji-wrapper:last-child img:last-child {
  animation: horizontal-sticky-scroll 25s 0.1s linear infinite;
}

.company-value-box.celebrated .emoji-wrapper:last-child img {
  animation: horizontal-scroll 15s 0.1s linear infinite;
}

.company-value-box.celebrated .emoji-wrapper:last-child img:last-child {
  animation: horizontal-sticky-scroll 15s 0.1s linear infinite;
}

.logos-grid {
  display: flex;
  overflow: hidden;
  user-select: none;
  position: relative;
  gap: 24px;
}

.logos-grid::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    rgba(217, 217, 217, 0) 100%,
    rgba(217, 217, 217, 0) 100%
  );
  left: 0;
}

.logos-grid::after {
  content: "";
  width: 100px;
  height: 100%;
  right: 0;
  position: absolute;
  z-index: 2;
  background: linear-gradient(
    270deg,
    #ffffff 0%,
    rgba(217, 217, 217, 0) 100%,
    rgba(217, 217, 217, 0) 100%
  );
}

.logos-grid .logos-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  min-width: 100%;
  animation: horizontal-scroll 30s 0.1s linear infinite;
}

.logos-grid.--hover-pause:hover .logos-wrapper {
  animation-play-state: paused;
  cursor: pointer;
}

.logos-grid .logos-wrapper div {
  flex-shrink: 0;
}

.logos-wrapper img {
  filter: invert(50%) grayscale(100%);
  transition: 0.155s;
}

.logos-wrapper img:hover {
  filter: none;
}

.logos-grid a {
  background: none;
}
.logos-grid a:hover {
  background: none;
}

@keyframes horizontal-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 24px));
  }
}

@keyframes horizontal-sticky-scroll {
  0% {
    transform: translateX(calc(100% + 24px));
  }
  100% {
    transform: translateX(0%);
  }
}