/* ==========================================================================
   Wavey ambient mascot — sits quietly in a page section, gentle idle motion.
   Decorative only: no popups, no messages, no auto-triggers. Drop the markup
   from wavey-widget.js into any section with position: relative and it will
   settle into the corner you place it in.
   ========================================================================== */

.wavey-corner {
  position: absolute;
  bottom: 0;
  right: 24px;
  width: 160px;
  pointer-events: none;      /* decorative — never blocks clicks/taps underneath */
  z-index: 2;
  user-select: none;
}

.wavey-corner.wavey-left {
  right: auto;
  left: 24px;
}

/* the floating figure itself: slow bob + breathing scale, looped forever */
.wavey-figure {
  position: relative;
  width: 100%;
  animation: wavey-float 5.5s ease-in-out infinite;
  transform-origin: center bottom;
}

.wavey-figure img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  filter: drop-shadow(0 6px 10px rgba(20, 60, 40, 0.18));
}

.wavey-figure img.wavey-visible {
  position: relative;
  opacity: 1;
}

/* soft grounding shadow beneath his feet */
.wavey-shadow {
  width: 62%;
  height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 60, 40, 0.22) 0%, rgba(20, 60, 40, 0) 72%);
  animation: wavey-shadow 5.5s ease-in-out infinite;
}

@keyframes wavey-float {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-10px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wavey-shadow {
  0%   { transform: scale(1);    opacity: 0.9; }
  50%  { transform: scale(0.86); opacity: 0.6; }
  100% { transform: scale(1);    opacity: 0.9; }
}

/* keep him modest on small screens so he never sits over body copy */
@media (max-width: 640px) {
  .wavey-corner {
    width: 100px;
    right: 12px;
  }
  .wavey-corner.wavey-left {
    left: 12px;
  }
}

/* respect reduced-motion preference — hold a single still pose, no animation */
@media (prefers-reduced-motion: reduce) {
  .wavey-figure,
  .wavey-shadow {
    animation: none !important;
  }
}