.heading-icon-stack {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}

.heading-icon-slot {
  margin-inline: 0.24em;
  animation: heading-icon-slot-expand 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.heading-icon-stack__item--1 {
  left: -0.35rem;
  z-index: 1;
  transform: translateY(-42%) rotate(-13deg);
  animation:
    heading-icon-one-enter 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards,
    heading-icon-one-float 5.4s ease-in-out 1.25s infinite;
}

.heading-icon-stack__item--2 {
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -49%) rotate(0deg);
  animation:
    heading-icon-two-enter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards,
    heading-icon-two-float 5.1s ease-in-out 1.2s infinite;
}

.heading-icon-stack__item--3 {
  right: -0.05rem;
  z-index: 3;
  transform: translateY(-46%) rotate(-6deg);
  animation:
    heading-icon-three-enter 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards,
    heading-icon-three-float 5.6s ease-in-out 1.3s infinite;
}

@keyframes heading-icon-slot-expand {
  0% {
    width: 3rem;
    transform: translateX(0.08em);
  }

  100% {
    width: 6.75rem;
    transform: translateX(0.08em);
  }
}

@keyframes heading-icon-one-enter {
  0% {
    left: 50%;
    transform: translate(-50%, -46%) rotate(0deg);
  }

  100% {
    left: -0.35rem;
    transform: translateY(-42%) rotate(-13deg);
  }
}

@keyframes heading-icon-one-float {
  0%, 100% {
    left: -0.35rem;
    transform: translateY(-42%) rotate(-13deg);
  }

  50% {
    left: -0.35rem;
    transform: translateY(-52%) rotate(-10deg);
  }
}

@keyframes heading-icon-two-enter {
  0% {
    left: 50%;
    transform: translate(-50%, -46%) rotate(0deg);
  }

  100% {
    left: 50%;
    transform: translate(-50%, -49%) rotate(0deg);
  }
}

@keyframes heading-icon-two-float {
  0%, 100% {
    left: 50%;
    transform: translate(-50%, -49%) rotate(0deg);
  }

  50% {
    left: 50%;
    transform: translate(-50%, -59%) rotate(2deg);
  }
}

@keyframes heading-icon-three-enter {
  0% {
    right: auto;
    left: 50%;
    transform: translate(-50%, -46%) rotate(0deg);
  }

  100% {
    right: -0.05rem;
    left: auto;
    transform: translateY(-46%) rotate(-6deg);
  }
}

@keyframes heading-icon-three-float {
  0%, 100% {
    right: -0.05rem;
    left: auto;
    transform: translateY(-46%) rotate(-6deg);
  }

  50% {
    right: -0.05rem;
    left: auto;
    transform: translateY(-56%) rotate(-3deg);
  }
}