@property --m {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

:root {
  --sky: #FFE5E5;
  --darker-sky: hsl(from var(--sky) h calc(s + 10) calc(l - 10));
  --softer-sky: hsl(from var(--sky) h calc(s - 20) calc(l + 10));
  
  --wave: #E0AED0;
}

body {
  display: grid;
  place-items: center;
  height: 100svh;
  background: var(--softer-sky);
}

#defs {
  position: fixed;
  inset: 0 -100% 0 -100%;
}

main {
  --size: 20px;

  aspect-ratio: 1/1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50% 12% 12% 1fr;
  width: 50svh;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 
    0 0 3rem -1.5rem var(--darker-sky),
    0 0 2rem -1.0rem var(--darker-sky),
    0 0 1rem -0.5rem var(--darker-sky);
  
  .sky {
    display: grid;
    place-items: center;
    background: var(--sky);
    margin-block: calc(-1 * var(--size));
    grid-row: -1 / 1;
    grid-column: 1;
    
    .sun {
      position: relative;
      width: 50%;
      aspect-ratio: 1 / 1;
      border-radius: 99em;
      background: hsl(from var(--sky) h 90 100);
    }
  }
  
  .wave {
    --m: 2;
    --p: calc(var(--m) * var(--size));
    --R: calc(var(--size) * sqrt( var(--m) * var(--m) + 1));
    
    grid-column: 1;
    background: var(--wave-color);
    backdrop-filter: url(#filter);
    mix-blend-mode: multiply;
    margin: calc(var(--size) * -1) calc(-1 * var(--size) * 2);
    animation: 
      wave calc(var(--delta) * 500ms) alternate infinite linear(0, 0.329 8.6%, 0.541 16%, 0.615 19.6%, 0.667 23.2%, 0.698 26.8%, 0.708 30.5%, 0.686 36.1%, 0.618 42.3%, 0.229 64.6%, 0.093 74.8%, 0.048 80.2%, 0.018 85.8%, 0.004 91.9%, 0);
    mask:
      radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
        calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
      radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
        50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
  }
  
  .wave:nth-child(2) {
    grid-row: 2 / -1;
    --wave-color: #9ACBD0;
    --delta: 7;
  } 
  
  .wave:nth-child(3) {
    grid-row: 3 / -1;
    --wave-color: #48A6A7;
    --delta: 5;
  } 
  
  .wave:nth-child(4) {
    grid-row: 4 / -1;
    --wave-color: #006A71;
    --delta: 2;
  } 
}

@keyframes wave {
  from { --m: 1.5; }
  to   { --m: 2.5; }
}