/*
 * Wave/bobbing motion for a Cover block image (e.g. the boats photo).
 * Pure CSS, no JS. Apply by adding the class "has-wave-motion" to the
 * Cover block in the editor (Advanced panel -> Additional CSS class(es)).
 *
 * Composition of the effect:
 *   1. Image layer  -- slow vertical bob + tiny rotation, like a boat
 *                       riding gentle swells. One keyframe set, so
 *                       transform values don't fight each other.
 *   2. Dim overlay  -- a very faint moving gradient sweep, simulating
 *                       light shifting across water as it ripples.
 *                       Lives on a separate layer/property (background-position)
 *                       so it runs independently of the image's transform.
 *
 * Both loops use durations that don't share a common multiple for a
 * long stretch (7.4s and 19s), so the combined motion doesn't feel
 * like it's repeating on a visible cycle.
 */

.has-wave-motion {
  overflow: hidden; /* keep the slightly-scaled, bobbing image inside the rounded corners */
}

.has-wave-motion .wp-block-cover__image-background {
  transform-origin: 50% 62%;
  will-change: transform;
  animation: avtomatik-boat-bob 7.4s ease-in-out infinite;
}

@keyframes avtomatik-boat-bob {
  0%   { transform: scale(1.07) translate(0%,    0%)    rotate(0deg);    }
  20%  { transform: scale(1.07) translate(0.15%, -0.55%) rotate(0.3deg);  }
  45%  { transform: scale(1.07) translate(-0.1%, 0.3%)   rotate(-0.18deg);}
  70%  { transform: scale(1.07) translate(0.2%,  -0.4%)  rotate(0.22deg); }
  100% { transform: scale(1.07) translate(0%,    0%)    rotate(0deg);    }
}

/*
 * Independent "light on water" sweep -- a soft diagonal gradient drifting
 * across the existing dim overlay. Runs on background-position, which
 * is a completely separate property from transform, so it never
 * conflicts with the bob animation above.
 */
.has-wave-motion .wp-block-cover__background {
  background-image: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0)   18%,
    rgba(255, 255, 255, 0)   82%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 220% 220%;
  animation: avtomatik-water-glint 19s ease-in-out infinite;
}

@keyframes avtomatik-water-glint {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .has-wave-motion .wp-block-cover__image-background,
  .has-wave-motion .wp-block-cover__background {
    animation: none;
  }
}