.poster-word {
  opacity: 0;
  transform:
    translateY(-60vw)
    rotate(var(--final-rotate));
  transition:
    font-style 220ms ease,
    letter-spacing 220ms ease,
    filter 220ms ease;
  will-change: transform, opacity;
}

.poster-object {
  opacity: 0;
  transform:
    translateY(-60vw)
    rotate(var(--base-rotate, 0deg))
    scale(1);
  transition: transform 320ms ease;
  will-change: transform, opacity;
}

.poster-word.is-visible {
  animation: posterWordDrop 1.65s cubic-bezier(0.22, 0.86, 0.24, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.poster-object.is-visible {
  animation: posterObjectDrop 1.7s cubic-bezier(0.22, 0.86, 0.24, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.poster-word.is-settled {
  opacity: 1;
  transform:
    translateY(0)
    rotate(var(--final-rotate));
}

.poster-object.is-settled {
  opacity: 1;
  transform:
    translateY(0)
    rotate(var(--base-rotate, 0deg))
    scale(1);
}

.poster-word:hover,
.poster-word:focus-visible {
  font-style: italic;
  letter-spacing: -0.03em;
  filter: brightness(0.92);
  outline: none;
}

.poster-object--berry:hover,
.poster-object--berry:focus-visible {
  animation: posterObjectPulse 1.4s ease-in-out infinite;
  transform: rotate(var(--base-rotate, 0deg)) scale(1.07);
}

.poster-object--flower:hover,
.poster-object--flower:focus-visible {
  animation: posterObjectPulseSoft 1.5s ease-in-out infinite;
  transform: rotate(var(--base-rotate, 0deg)) scale(1.06);
}

.poster-object--bottle:hover,
.poster-object--bottle:focus-visible {
  animation: posterObjectPulseBottle 1.45s ease-in-out infinite;
  transform: rotate(var(--base-rotate, 0deg)) scale(1.06);
}

@keyframes posterWordDrop {
  0% {
    opacity: 0;
    transform:
      translateY(-64vw)
      rotate(var(--final-rotate));
    filter: blur(0.18vw);
  }

  22% {
    opacity: 1;
    filter: blur(0);
  }

  82% {
    opacity: 1;
    transform:
      translateY(0.85vw)
      rotate(var(--final-rotate));
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      rotate(var(--final-rotate));
    filter: blur(0);
  }
}

@keyframes posterObjectDrop {
  0% {
    opacity: 0;
    transform:
      translateY(-64vw)
      rotate(var(--base-rotate, 0deg))
      scale(1);
    filter: blur(0.18vw);
  }

  22% {
    opacity: 1;
    filter: blur(0);
  }

  82% {
    opacity: 1;
    transform:
      translateY(0.85vw)
      rotate(var(--base-rotate, 0deg))
      scale(1);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      rotate(var(--base-rotate, 0deg))
      scale(1);
    filter: blur(0);
  }
}

@keyframes posterObjectPulse {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(var(--base-rotate, 0deg))
      scale(1.07);
  }

  50% {
    transform:
      translateY(-0.28vw)
      rotate(var(--base-rotate, 0deg))
      scale(1.1);
  }
}

@keyframes posterObjectPulseSoft {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(var(--base-rotate, 0deg))
      scale(1.06);
  }

  50% {
    transform:
      translateY(-0.24vw)
      rotate(var(--base-rotate, 0deg))
      scale(1.085);
  }
}

@keyframes posterObjectPulseBottle {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(var(--base-rotate, 0deg))
      scale(1.06);
  }

  50% {
    transform:
      translateY(-0.3vw)
      rotate(var(--base-rotate, 0deg))
      scale(1.09);
  }
}

@keyframes catchBottlePulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .poster-word,
  .poster-object,
  .poster-nav__link {
    animation: none !important;
    transition: none !important;
  }

  .poster-word {
    opacity: 1;
    transform: rotate(var(--final-rotate));
  }

  .poster-object {
    opacity: 1;
    transform: rotate(var(--base-rotate, 0deg)) scale(1);
  }
}