<div class="wrapper">
  <div class="controls">
    <h1>Animation Controls</h1>

    <div>
      <label for="base-speed-unitless">
        Base Speed:
      </label>

      <div class="range-wrapper">
        <span class="range-icon">0.1s</span>
        <input type="range" min="0.1" max="2" value="0.2" id="base-speed-unitless" autocomplete="off" step="0.01">
        <span class="range-icon">2s</span>
      </div>
    </div>

    <div>
      <label for="section-relative-speed">
        Relative Background Speed:
      </label>

      <div class="range-wrapper">
        <span class="range-icon">0.1x</span>
        <input type="range" min="0.1" max="2" value="0.5" id="section-relative-speed" autocomplete="off" step="0.01">
        <span class="range-icon">2x</span>
      </div>
    </div>

    <div>
      <label for="title-relative-speed">
        Relative Title Speed:
      </label>

      <div class="range-wrapper">
        <span class="range-icon">0.1x</span>
        <input type="range" min="0.1" max="2" value="0.5" id="title-relative-speed" autocomplete="off" step="0.01">
        <span class="range-icon">2x</span>
      </div>
    </div>

    <div>
      <label for="description-relative-speed">
        Relative Description Speed:
      </label>

      <div class="range-wrapper">
        <span class="range-icon">0.1x</span>
        <input type="range" min="0.1" max="2" value="0.5" id="description-relative-speed" autocomplete="off" step="0.01">
        <span class="range-icon">2x</span>
      </div>
    </div>

    <div>
      <label for="button-relative-speed">
        Relative Button Speed:
      </label>

      <div class="range-wrapper">
        <span class="range-icon">0.1x</span>
        <input type="range" min="0.1" max="2" value="0.5" id="button-relative-speed" autocomplete="off" step="0.01">
        <span class="range-icon">2x</span>
      </div>
    </div>

    <button class="js-reset-button">Run Animation</button>
  </div>
  <div class="js-demo demo">
    <div class="js-section section">
      <h1 class="section__title">Lorem Ipsum</h1>
      <p class="section__description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </p>
      <button class="section__button">Lorem</button>
    </div>
  </div>
</div>

:root {
  --base-speed-unitless: 0.2;
  --base-speed: calc(var(--base-speed-unitless) * 1s);

  --section-relative-speed: 1/2;
  --title-relative-speed: 1;
  --description-relative-speed: 1;
  --button-relative-speed: 1;

  --section-duration: calc(var(--base-speed) * var(--section-relative-speed));
  --title-duration: calc(var(--base-speed) * var(--title-relative-speed));
  --description-duration: calc(var(--base-speed) * var(--description-relative-speed));
  --button-duration: calc(var(--base-speed) * var(--button-relative-speed));

  --section-delay: 0s;
  --title-delay: calc(var(--section-delay) + var(--section-duration));
  --description-delay: calc(var(--title-delay) + var(--title-duration));
  --button-delay: calc(
    var(--description-delay) + var(--description-duration)
  );
}

.section {
  background: #fff;
  visibility: hidden;
  opacity: 0;
  padding: 1em;
  transform: scaleY(0) translateY(-5em);
  transition-duration: var(--section-duration);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  transform-origin: top;
}

.section.is-open {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.section__title,
.section__description,
.section__button {
  opacity: 0;
  transform: translateY(-0.75em);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}

.section.is-open .section__title,
.section.is-open .section__description,
.section.is-open .section__button {
  opacity: 1;
  transform: translate(0, 0);
}

.section__title {
  font-size: 1.599em;
  transition-duration: var(--title-duration);
  transition-delay: var(--title-delay);
}

.section__description {
  line-height: 1.4;
  transition-duration: var(--description-duration);
  transition-delay: var(--description-delay);
}

.section__button {
  background: #1d70a4;
  border: none;
  border-radius: 0.2em;
  color: #fff;
  font-size: 1em;
  border: none;
  padding: 0.75em 1.25em;
  transition-duration: var(--button-duration);
  transition-delay: var(--button-delay);
}

/**
 * Non-demo CSS
 */

html {
  background: #1d70a4;
}

* {
  box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  margin: 0;
}

.section > * + * {
  margin-top: 1em;
}

.wrapper {
  display: flex;
  justify-content: center;
  padding: 1em;
}

.demo {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eee;
  width:320px;
  overflow: hidden;
  padding: 1em;
}

.controls {
  color: #fff;
  padding-right: 2em;
}

.controls > * + * {
  margin-top: 1.25em;
}

label {
  font-weight: bold;
}

.range-wrapper {
  align-items: center;
  display: flex;
  margin-top: 0.5em;
}

.range-icon {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9em;
}

.range-wrapper input {
  flex-grow: 100;
  margin: 0 1em;
}

.controls button {
  background: #fff;
  border: none;
  border-radius: 0.2em;
  color: #1d70a4;
  cursor: pointer;
  font-size: 1em;
  padding: 0.75em 1.25em;
  width: 100%;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

.controls button:hover{
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  transform: scale(1.01) translateY(-2px);
}

.controls button:active {
  box-shadow: none;
  transform: scale(0.99);
}

@media(max-width: 550px) {
  .wrapper {
    flex-direction: column;
  }

  .demo {
    width: 100%;
  }

  .controls{
    padding: 1em 0;
  }
}

const demo = document.querySelector('.js-demo')

document.querySelector(".js-reset-button").addEventListener("click", () => {
  const section = document.querySelector(".js-section");

  if(section.classList.contains('is-open')) {
    section.classList.remove("is-open");

    demo.innerHTML = demo.innerHTML;

    setTimeout(() => {
      document.querySelector(".js-section").classList.add("is-open");
    }, 200);
  } else {
    section.classList.add("is-open");
  }
});

document.querySelectorAll('[type="range"]').forEach(input => {
  input.addEventListener('change', function() {
    document.documentElement.style.setProperty(`--${this.id}`, this.value);
  });
});