/* Slow motion of the existing blue wave dividers (test only, 11 Nov 2026).
   Nothing is added or moved: the same elements get the individual `translate` and `scale` properties, so their own `transform`
   (the 180 degree flip) and their geometry at rest stay as they are. The edge that touches the neighbouring block stays in place
   (--wv-a: 1 for waves anchored at the bottom edge, -1 for waves anchored at the top edge), only the crest moves.
   Without the script, with reduced motion or off screen the waves stand still. */
@media (prefers-reduced-motion: no-preference) {
  :root { --wv-d: .15; --wv-x: 4%; --wv-sx: 1.1; --wv-time: 11s; }
  @media (max-width: 767px) { :root { --wv-d: .22; --wv-x: 4.5%; --wv-sx: 1.12; } }

  .services__grid::before, #layout-content > .services::before, #layout-content > .abilities::before, #layout-content > .doverie::before, img.before[src*="home-wave"],
  .ta-band::before, .marketing-details__wave::before, .ta-hero__wave, .ta-stage__rail::before { --wv-a: 1; --wv-delay: -4s; }
  #layout-content > .services::after, #layout-content > .abilities::after, #layout-content > .doverie::after, img.after[src*="home-wave"],
  .ta-band::after, .marketing-details__wave::after { --wv-a: -1; --wv-delay: -10s; }

  .ta-hero__wave, .ta-stage__rail::before { --wv-d: .07; }
  @media (max-width: 767px) { .ta-hero__wave, .ta-stage__rail::before { --wv-d: .1; } }

  .services__grid[data-wave-live]::before, #layout-content > .services[data-wave-live]::before, #layout-content > .services[data-wave-live]::after,
  #layout-content > .abilities[data-wave-live]::before, #layout-content > .abilities[data-wave-live]::after,
  #layout-content > .doverie[data-wave-live]::before, #layout-content > .doverie[data-wave-live]::after,
  img.before[data-wave-live][src*="home-wave"], img.after[data-wave-live][src*="home-wave"],
  .ta-band[data-wave-live]::before, .ta-band[data-wave-live]::after,
  .marketing-details__wave[data-wave-live]::before, .marketing-details__wave[data-wave-live]::after,
  .ta-hero__wave[data-wave-live], .ta-stage__rail[data-wave-live]::before {
    animation: abc-wave-flow var(--wv-time) ease-in-out var(--wv-delay) infinite alternate;
    will-change: translate, scale;
  }
  #layout-content > .abilities[data-wave-live]::after, #layout-content > .doverie[data-wave-live]::after, .ta-band[data-wave-live]::after,
  .marketing-details__wave[data-wave-live]::after, img.after[data-wave-live][src*="home-wave"] { animation-duration: 14s; }

  /* The widened wave must not create a horizontal scroll: the blocks that own the image waves clip sideways only (up and down stays open). */
  :is(.otzyvy, .nasha-komanda2):has(> img[src*="home-wave"]), .ta-band, :has(> .ta-hero__wave) { overflow-x: clip; }

  @keyframes abc-wave-flow {
    from { scale: var(--wv-sx) calc(1 - var(--wv-d)); translate: var(--wv-x) calc(var(--wv-a) * var(--wv-d) * 50%); }
    to   { scale: var(--wv-sx) calc(1 + var(--wv-d)); translate: calc(var(--wv-x) * -1) calc(var(--wv-a) * var(--wv-d) * -50%); }
  }
}