@keyframes flipIn {
  0% {
    transform: rotateY(-90deg) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes flipOut {
  0% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotateY(90deg) scale(0.9);
    opacity: 0;
  }
}

.hover-lift {
  transition: transform var(--duration-fast) var(--easing-primary),
    box-shadow var(--duration-fast) var(--easing-primary);
}

.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 32px rgba(47, 42, 30, 0.35);
}

.fade-in {
  animation: fadeIn var(--duration-medium) ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-fallback-out {
  animation: pageFallbackOut 0.35s var(--easing-primary) forwards;
}

.page-fallback-in {
  animation: pageFallbackIn 0.45s var(--easing-primary) forwards;
}

@keyframes pageFallbackOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-28px);
  }
}

@keyframes pageFallbackIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banana-fallback {
  animation: bananaFallbackSpin 0.52s ease-in-out;
}

@keyframes bananaFallbackSpin {
  0% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.15) rotate(12deg);
  }
  70% {
    transform: scale(0.92) rotate(-24deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}