:root {
  --pl-even-label-from: 80;
  --pl-even-label-to: 38;
  --pl-label-delay: 0s;
  --pl-odd-label-from: 80;
  --pl-odd-label-to: 0;
}

@media only screen and (min-width: 768px) {
  :root {
    --pl-even-label-from: 200;
    --pl-even-label-to: 90;
    --pl-odd-label-from: 200;
    --pl-odd-label-to: 0;
  }
}

.playground {
  background-color: var(--color-alt-bg);
  color: var(--color-light);
  height: 200vh;
  width: 100%;
  position: relative;
  z-index: 10;
}

.playground-content {
  height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

@media only screen and (min-width: 768px) {
  .playground-content {
    box-sizing: border-box;
    padding-bottom: calc(130 * 100vw / var(--page-width));
  }
}

/* Label (title) */

[data-load='true'] .playground-label > span {
  filter: blur(0px);
  opacity: 1;
}

[data-load='true'] .playground-label > span:nth-child(odd) {
  transform: translate(
    0,
    calc(var(--pl-odd-label-to) * 100vw / var(--page-width))
  );
}

[data-load='true'] .playground-label > span:nth-child(even) {
  transform: translate(
    0,
    calc(var(--pl-even-label-to) * 100vw / var(--page-width))
  );
}

.playground-label {
  display: flex;
  font-size: calc(64 * 100vw / var(--page-width));
  gap: calc(48 * 100vw / var(--page-width));
  left: 50%;
  line-height: 0.7;
  position: absolute;
  top: 0;
  transform: translate(
    calc(-147 * 100vw / var(--page-width)),
    calc(204 * 100vw / var(--page-width))
  );
  width: calc(294 * 100vw / var(--page-width));
  z-index: 10;
}

@media only screen and (min-width: 768px) {
  .playground-label {
    font-size: calc(140 * 100vw / var(--page-width));
    gap: calc(160 * 100vw / var(--page-width));
    transform: translate(
      calc(-396 * 100vw / var(--page-width)),
      calc(164 * 100vw / var(--page-width))
    );
    width: calc(807 * 100vw / var(--page-width));
  }
}

.playground-label > span {
  filter: blur(10px);
  opacity: 0;
  transition:
    opacity 0.5s var(--pl-label-delay),
    filter 0.5s var(--pl-label-delay),
    transform 0.5s var(--pl-label-delay);
}

.playground-label > span:nth-child(odd) {
  transform: translate(
    0,
    calc(var(--pl-odd-label-from) * 100vw / var(--page-width))
  );
}

.playground-label > span:nth-child(even) {
  transform: translate(
    0,
    calc(var(--pl-even-label-from) * 100vw / var(--page-width))
  );
}

/* Subheadline */

[data-load='true'] .playground-subheadline {
  filter: blur(0px);
  filter: blur(0px);
  opacity: 100%;
}

.playground-subheadline {
  filter: blur(10px);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translate(
    calc(105 * 100vw / var(--page-width)),
    calc(436 * 100vw / var(--page-width))
  );
  transition:
    filter 0.5s 0.75s,
    opacity 0.5s 0.75s;
  width: calc(251 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-subheadline {
    left: 50%;
    transform: translate(
      calc(30 * 100vw / var(--page-width)),
      calc(460 * 100vw / var(--page-width))
    );
    width: calc(430 * 100vw / var(--page-width));
  }
}

.playground-subheadline p {
  margin-bottom: calc(24 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-subheadline p {
    margin-bottom: calc(24 * 100vw / var(--page-width));
  }
}

.playground-cta {
  color: var(--color-light);
  font-size: calc(20 * 100vw / var(--page-width));
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .playground-cta {
    font-size: calc(20 * 100vw / var(--page-width));
    margin-left: calc(120 * 100vw / var(--page-width));
  }
}

.playground-cta .bullet {
  display: inline-block;
  font-size: calc(18 * 100vw / var(--page-width));
  margin-right: calc(8 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-cta .bullet {
    display: inline-block;
    font-size: calc(18 * 100vw / var(--page-width));
    margin-right: calc(8 * 100vw / var(--page-width));
  }
}

/* Work (assets) */

[data-load='true'] .playground-work {
  filter: blur(0px);
}

.playground-work {
  border-radius: 0;
  filter: blur(8px);
  height: calc(50 * 100vw / var(--page-width));
  left: calc(17 * 100vw / var(--page-width));
  overflow: hidden;
  position: absolute;
  top: 0;
  top: calc(43 * 100vw / var(--page-width));
  transition: filter 1s;
  width: calc(50 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work {
    height: calc(112 * 100vw / var(--page-width));
    left: calc(25 * 100vw / var(--page-width));
    top: calc(78 * 100vw / var(--page-width));
    width: calc(112 * 100vw / var(--page-width));
  }
}

.playground-work-2 {
  left: calc(177 * 100vw / var(--page-width));
  top: calc(39 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-2 {
    left: calc(630 * 100vw / var(--page-width));
    top: calc(64 * 100vw / var(--page-width));
  }
}

.playground-work-3 {
  left: calc(325 * 100vw / var(--page-width));
  top: calc(25 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-3 {
    left: calc(1060 * 100vw / var(--page-width));
    top: calc(70 * 100vw / var(--page-width));
  }
}

.playground-work-4 {
  left: calc(92 * 100vw / var(--page-width));
  top: calc(130 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-4 {
    left: calc(1484 * 100vw / var(--page-width));
    top: calc(76 * 100vw / var(--page-width));
  }
}

.playground-work-5 {
  left: calc(261 * 100vw / var(--page-width));
  top: calc(137 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-5 {
    left: calc(246 * 100vw / var(--page-width));
    top: calc(236 * 100vw / var(--page-width));
  }
}

.playground-work-6 {
  left: calc(0 * 100vw / var(--page-width));
  top: calc(279 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-6 {
    left: calc(1320 * 100vw / var(--page-width));
    top: calc(264 * 100vw / var(--page-width));
  }
}

.playground-work-7 {
  left: calc(182 * 100vw / var(--page-width));
  top: calc(322 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-7 {
    left: calc(66 * 100vw / var(--page-width));
    top: calc(522 * 100vw / var(--page-width));
  }
}

.playground-work-8 {
  left: calc(325 * 100vw / var(--page-width));
  top: calc(304 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .playground-work-8 {
    left: calc(692 * 100vw / var(--page-width));
    top: calc(466 * 100vw / var(--page-width));
  }
}

.playground-work-9 {
  display: none;
}

@media only screen and (min-width: 768px) {
  .playground-work-9 {
    display: block;
    left: calc(1482 * 100vw / var(--page-width));
    top: calc(504 * 100vw / var(--page-width));
  }
}

.playground-work-10 {
  display: none;
}

@media only screen and (min-width: 768px) {
  .playground-work-10 {
    display: block;
    left: calc(418 * 100vw / var(--page-width));
    top: calc(550 * 100vw / var(--page-width));
  }
}

.playground-work-container {
  background-color: var(--color-accent-sky);
  height: calc(112 * 100vw / var(--page-width));
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.625s ease-in;
  width: calc(112 * 100vw / var(--page-width));
}

.playground-work-6 .playground-work-container,
.playground-work-7 .playground-work-container,
.playground-work-8 .playground-work-container {
  background-color: var(--color-accent-sun);
}

.playground-work-2 .playground-work-container,
.playground-work-5 .playground-work-container,
.playground-work-9 .playground-work-container {
  background-color: var(--color-accent-grass);
}

.playground-work-3 .playground-work-container,
.playground-work-4 .playground-work-container,
.playground-work-10 .playground-work-container {
  background-color: var(--color-accent-sky);
}

.playground-work .image {
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  transition: opacity 0.625s ease-in;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .playground-work .image {
    opacity: 1;
  }
}

/* Tiles animation into circles and "gravity" (toggled through JS). */
.end-animation .playground-work {
  animation: bounce 1.25s ease-in forwards;
}

@media only screen and (min-width: 768px) {
  .end-animation .playground-work {
    animation: morph 0.75s ease-in forwards;
  }
}

@keyframes morph {
  0% {
    border-radius: 0%;
    opacity: 1;
  }

  100% {
    border-radius: 100%;
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    border-radius: 0%;
  }
  25% {
    border-radius: 50%;
  }
  70% {
    transform: translateY(0%);
    top: calc(100% - calc(50 * 100vw / var(--page-width)));
  }
  80% {
    transform: translateY(-15%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-7%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-3%);
  }
  100% {
    border-radius: 50%;
    transform: translateY(0);
    top: calc(100% - calc(50 * 100vw / var(--page-width)));
  }
}

.end-animation .image {
  opacity: 0;
}

.end-animation .playground-work-container {
  opacity: 1;
}

.end-animation .playground-work-2,
.end-animation .playground-work-5,
.end-animation .playground-work-9 {
  animation-delay: 0.125s !important;
}

.end-animation .playground-work-3,
.end-animation .playground-work-7 {
  animation-delay: 0.1s !important;
}

.end-animation .playground-work-4,
.end-animation .playground-work-6,
.end-animation .playground-work-10 {
  animation-delay: 0.05s !important;
}

#matterContainer {
  display: none;
}

@media only screen and (min-width: 768px) {
  #matterContainer {
    display: block;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}