/* ── Add this to the bottom of css/style.css (replaces old GEESE OVERLAY section) ── */

/* GEESE OVERLAY */
.hero__geese-wrap,
.hero-geese-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 50vw;
}

.hero-goose {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(20,30,35,0.3));
}

.hero-goose--left {
  width: clamp(70px, 12vw, 180px);
  transform: scaleX(-1); /* mirror so they face each other */
  animation: gooseBobLeft 4s ease-in-out infinite;
  transform-origin: center bottom;
}

.hero-goose--right {
  width: clamp(80px, 14vw, 200px);
  animation: gooseBobRight 4s ease-in-out infinite;
  animation-delay: 0.7s;
  transform-origin: center bottom;
}

@keyframes gooseBobLeft {
  0%, 100% { transform: scaleX(-1) translateY(0px) rotate(0deg); }
  50%       { transform: scaleX(-1) translateY(-12px) rotate(6deg); }
}

@keyframes gooseBobRight {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(-6deg); }
}