/* Keep the full illustration visible while it floats, including on phones. */
.banana {
  animation: banana-float 9s ease-in-out infinite;
  transform-origin: 55% 55%;
}

@keyframes banana-float {
  0%, 100% { transform: translate(-6px, 0) rotate(-4deg); }
  45%, 55% { transform: translate(12px, -56px) rotate(4deg); }
}

@media (max-width: 760px) {
  .hero-art {
    right: 0;
    width: min(62%, 300px);
    height: 300px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .banana {
    width: 100%;
    left: 0;
    top: 8px;
    animation: banana-float-mobile 8s ease-in-out infinite;
  }
  .orbit-one { left: 0; top: 5%; width: 100%; height: auto; aspect-ratio: 1; transform: none; }
  .secret-label { left: 18%; top: 48%; width: 78%; }
  .hero-description { margin-top: 40px; }
}

@keyframes banana-float-mobile {
  0%, 100% { transform: translate(-7px, 6px) rotate(12deg); }
  45%, 55% { transform: translate(8px, -28px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .banana { animation: none; transform: translate(12px, -56px) rotate(4deg); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .banana { transform: translate(8px, -28px) rotate(1deg); }
}