[شــرح] أضف تأثير موجة خفيف إلى منطقة .p-body-header

.p-body-header {
  position: relative;
  overflow: hidden;
    
  /* Ne dovolite, da vam uniči barvo ozadja */
  background-color: var(--header-bg, #fff);
}

.p-body-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;        /* Za vodoravno ponavljanje ga pustimo širokega */
  height: 10px;       /* debelina vala */
  pointer-events: none;
  opacity: 0.2;       /* splošna motnost */

  /* Barvo valov naredimo enako kot barvo obroča */
  background-color: var(--theme-main-color);

  /* vgrajena SVG maska: tanka valovna oblika*/
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;

  /* velikost maske (repeat tile) */
  -webkit-mask-size: 80px 10px;
  mask-size:         80px 10px;

  /* animacija vodoravnega pomikanja */
  animation: waveMask 8s linear infinite;
}

@keyframes waveMask {
  from {
    -webkit-mask-position:    0 bottom;
            mask-position:    0 bottom;
  }
  to {
    -webkit-mask-position:  80px bottom;
            mask-position:  80px bottom;
  }
}