/*
optical effect:
One set of lines looks more straight (top) and the other more rounded (bottom)... but both sets are equally wavy, the only difference is how they are colored. mouse over to reveal
*/
@property --c {
  syntax: '<color>';
  initial-value: #fff;
  inherits: true;
}

body { 
  /* code adapted from Temani Afif's at CSS Tricks: https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/ */ 
  --s: 60px;
  --c: #fff;
  --c1: radial-gradient(68.08px at 50% calc(100% + 60px),#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%);
  --c2: radial-gradient(68.08px at 50% -60px,#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%);
  --s1: 120px 32px repeat-x;
  --mask:
    var(--c1) 0 calc(50% - 16px + .5px) / var(--s1),
    var(--c2) var(--s) calc(50% + 16px) / var(--s1),
    var(--c1) 0 calc(50% - 6px + .5px)  / var(--s1),
    var(--c2) var(--s) calc(50% + 26px) / var(--s1),
    var(--c1) 0 calc(50% + 20px + .5px) / var(--s1),
    var(--c2) var(--s) calc(50% + 52px) / var(--s1),
    var(--c1) 0 calc(50% + 30px + .5px) / var(--s1),
    var(--c2) var(--s) calc(50% + 62px) / var(--s1);
  background: #aaa;
  margin: 0;
  height: 100vh;
  transition: --c 1s;
  overflow: hidden;
  
  &:hover {
    --c: #000;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000 50%, var(--c) 0) 0 0 / calc(var(--s) * 2) 100%;
    mask: var(--mask);
    translatE: 0 -100px;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000 50%, var(--c) 0) calc(var(--s) / -2) 0 / calc(var(--s) * 2) 100%;
    translate: 0 100px;
    mask: var(--mask);
  }
}