@import url("https://rsms.me/inter/inter.css");
:root {
  --font: 'Inter', sans-serif;
  font-size: calc(.6rem + .4vh);
  background: #ffffff;
  font-family: var(--font);
  -webkit-font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
          font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
}

body {
  overflow: hidden;
}

.spacer {
  flex-grow: 1;
}

.section {
  position: relative;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  --s-pad: calc(var(--s-padding) * 2rem);
}
.section__inner {
  overflow: hidden;
  -webkit-perspective: 1200;
          perspective: 1200;
  background: #212121;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 85vh;
  width: 70vh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(30, 1fr);
  grid-gap: 0vw;
  grid-auto-flow: dense;
  justify-items: stretch;
  align-items: end;
  padding: 65vh var(--s-pad) calc(var(--s-pad) * 2);
  box-sizing: border-box;
}

.blob {
  position: relative;
  padding: calc(var(--s-padding) * .25rem);
  -webkit-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
  height: 10vh;
}
.blob__inner {
  position: absolute;
  bottom: 50%;
  left: calc(var(--s-padding) * .5rem);
  right: calc(var(--s-padding) * .5rem);
  -webkit-transform: translateY(calc(var(--pos) * -60vh));
          transform: translateY(calc(var(--pos) * -60vh));
}
.blob__inner:last-child::before {
  z-index: 2;
  background: linear-gradient(45deg, #212121, black);
}
.blob__inner::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 100%;
  background: linear-gradient(calc(var(--bg-rotation) * 1deg), silver, white);
  -webkit-transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
          transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
  border-radius: calc(30% + var(--noise1) * 70%) calc(100% - var(--noise1) * 70%) calc(30% + var(--noise2) * 70%) calc(100% - var(--noise2) * 70%)/calc(30% + var(--noise3) * 70%) calc(100% - var(--noise4) * 70%) calc(30% + var(--noise4) * 70%) calc(100% - var(--noise3) * 70%);
}