:root {
  --green: #37c4b1;
  --cyan: #25aad8;
  --blue: #4092e3;
  --purple: #7d54c1;
  --pink: #c776a3;
  --orange: #ee8877;
  --deep-purple: #281c4c;
  --duration: 0.7s;
  --ease: cubic-bezier(0.6, 0, 0.2, 1);
  --transition: transform var(--duration) var(--ease);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--deep-purple);
  overflow: hidden;
}

.goo-filter {
  position: absolute;
  visibility: hidden;
}

#app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 90vmin;
  width: 55vmin;
}
#app > section {
  margin: 5vmin 8vmin;
  grid-area: 1/1;
}

section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}
section > * {
  flex: 0 0 100%;
  grid-area: 1/1;
}

.backgrounds {
  filter: url("#goo");
  pointer-events: none;
}

.background {
  will-change: transform;
  border-radius: 2vmin;
  background-image: linear-gradient(to bottom, var(--primary, blue), var(--secondary, pink));
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 3;
  background-image: linear-gradient(to bottom, #4b3777, #331847);
  opacity: 0.8;
  transition: inherit;
  transition-property: opacity;
}
.background[data-active]::before {
  opacity: 0.01;
}

article {
  display: flex;
  flex-direction: column;
}

.background,
article {
  will-change: transform;
  transition: var(--transition);
  transition-property: transform, transform-origin, z-index;
  padding: 5vmin;
  color: white;
  transform-origin: right center;
  transform: translateX(-90%) translateZ(-25vmin) rotateY(40deg);
}
.background[data-active],
article[data-active] {
  transform-origin: center center;
  transform: translateX(0) translateZ(0) rotateY(0deg);
  z-index: 3;
}
.background[data-active] ~ *,
article[data-active] ~ * {
  z-index: -1;
  transform-origin: left center;
  transform: translateX(140%) translateZ(-25vmin) rotateY(-40deg);
}
.background[data-active] + *,
article[data-active] + * {
  z-index: 1;
  transform: translateX(90%) translateZ(-25vmin) rotateY(-40deg);
}

article {
  opacity: 0;
  transition-property: transform, transform-origin, opacity, z-index;
}
article[data-active] {
  opacity: 1;
}

h1 {
  font-size: 4vmin;
  line-height: 1.2;
}

p {
  font-size: 2.5vmin;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}