/* hero-move.css */

/* Clip the hero section */
#hero {
  position: relative;
  overflow: hidden;
}

/* Background image styling */
#hero .absolute.inset-0 picture img {
  width: 100%;
  height: 120%;             /* make image taller than container */
  object-fit: cover;
  object-position: center;  /* start from center */
  animation: floatBG 8s ease-in-out infinite alternate;
}

/* Floating animation keyframes */
@keyframes floatBG {
  0%   { transform: translateY(-5%); }   /* start slightly higher */
  100% { transform: translateY(0%); }    /* float down slightly */
}

/* Optional Tailwind-friendly class */
.animate-floatBG {
  animation: floatBG 8s ease-in-out infinite alternate;
}