<div class="wrapper">
  <div id="ending-ui">
    <div class="ending-ui_wrapper">
      <div id="ending-ui_panels">
        <div id="learn-more" class="ending-ui_back">
          <h1><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice-in-waapi-land_logo_small.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice-in-waapi-land_logo.png 2x" alt="Alice in Web Animation API Land"></h1>

          <p>A continuation of <a href="http://rachelnabors.com/alice-in-videoland/book/" target="_blank">Alice in Videoland</a>. Created by <a href="http://rachelnabors.com" target="_blank">Rachel Nabors</a>.</p>
          <a href="http://rachelnabors.com" target="_blank" class="author"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/rachel-nabors_small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/rachel-nabors.jpg 2x" alt="Rachel Nabors was here."></a>
          <div class="what-now">
            <img class="play-again button" alt="Play again?" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/text_play-again.svg" /></div>
        </div>
        <div id="ui_poor-alice" class="ending-ui_front">
          <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/text_poor-alice.svg" alt="Poor Alice&hellip;" class="text_poor-alice"/></h2>
          <div class="what-now">
            <img class="play-again button" alt="Play again?" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/text_play-again.svg" />
            <a id="learn-more_button" class="button" href="#learn-more">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/text_learn-more.svg" alt="Learn more" />
            </a>
          </div>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/hr.svg" alt=" " class="hr"/>
        </div>
      </div>
    </div>
  </div>
  <div id="alice">
      <svg class="alice_lines" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 195.6 729.3"><defs><style>.cls-1{fill:#441238;}.cls-2{fill:#fff;}</style></defs><g><image width="398" height="1449" transform="translate(4.46 32) scale(0.482)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice-hungry_colors.png"/></g><path class="cls-1" d="M184.2 486.4c-4-16.6-5.7-33.7-9.5-50.4-4.5-19.5-10.6-38.3-24-53.8a1 1 0 0 1-.2-1.2 101 101 0 0 0 6.5-29 29.7 29.7 0 0 0 14.5 6.3c5 .7 9.7.2 14.5 0 3.3 0 5.7-.7 7-4.3s3.7-9.4 2-14.4a162.3 162.3 0 0 0-16-35.7c-2-3.5-2-5 1.3-7.3 5.5-4 5.3-4 1.2-9.6a189.4 189.4 0 0 0-13.7-16.3c4.2-1.3 6.5-4.2 8.2-7.7s.5-3.3-1.7-3.8-4.5-.8-7.2-1.2a53 53 0 0 0 13.2-6c2-1.4 4.3-2.8 5.5-5s1-3.2-1.2-3c-10 0-20 .4-29.6 3-3.4 1-5.2 0-7.3-2.3-5.8-7-12-13.4-17.3-21l2.3-.7a65.8 65.8 0 0 0 22.3-12.5c2.4-2 3.7-4.3 2.5-7.5s-1-3.7-1.8-5.5a63 63 0 0 1-3.2-12.6c4-7.6 7.7-17.2 8.8-24.8.6-4.2-.4-8.5.3-12.6C165 127 163 108 149.6 91a1.4 1.4 0 0 1 0-2 42.7 42.7 0 0 0 7.8-14.8c.8-3 .6-5.2-3-6.2s-3.8-1.3-5.7-2-5.2.2-6.3-1.5-.4-4.5-.7-6.7c-1-8.5-1.5-17.2-7-24.4 5.5 15.8 6.3 31.6 3.6 48-11.5-6-23.5-6-35.4-6-.8-3.7.8-5.8 4.2-7A55.8 55.8 0 0 0 115 65a45 45 0 0 0-12 4.8c-.8-2.3-1.4-4.4-3.2-6s.2-1.3.6-1.7c7-9 15.5-16 25-22l9.4-6.6-.5-.7h-.3c-3.7 2.2-7.5 4.3-11 6.6-9.6 6-18.3 12.8-23.7 23-.2.4-.4.8-1 .6-2.7-1-5 0-7 1.8-10.5-10-21.3-19.3-35.3-24-1 .4-1 1.6-1.4 2.6a80.5 80.5 0 0 0-3 32c0 1.3-.2 2-1.7 2.4A51.4 51.4 0 0 0 40 82a1.6 1.6 0 0 0-1.2 1.5c.2 2.8 0 5.7.7 8.3 1.6 5.2 2 10-2 14.2a4 4 0 0 0-.5 1.3c-4.5 10.8-6.6 22-7.4 33.6a200.2 200.2 0 0 0 5 59.2c2.2 10 3.7 20.2 9 29.2 2.8 4.8 7.3 8 12.4 10.8-1.5-6.8-3.2-13-3.6-20A79.5 79.5 0 0 0 81 228a1 1 0 0 1 1 1 60.3 60.3 0 0 1 .4 14c-2-2-4-.8-6 0s-4.6 3-7 3.4a59.7 59.7 0 0 0-12 3c-1 .4-2.7.8-3.7.3-9-4.6-18.5-5.5-28.2-6l20.5 4.6s9.6 4.2 11 10.6 3.7 15.6 5.7 24a48.3 48.3 0 0 0-8-5 24.7 24.7 0 0 0-9.5-2.6c-4.7 0-7.7-2.8-11-5.5s-2-3.8.5-5.3l6.8-3.8a38.7 38.7 0 0 1-8-3.5c-4.8-3-8.4-7-8.8-13 0-.6-.3-1.2.5-1-2.4-1-2.6 1-2.5 2.6.3 5 3 8.5 6.5 11.5-3 .7-5 2.7-6.5 5s-2.7 3.5-5.6 2a4 4 0 0 0-4.4.5c-1.3 1.2-.4 2.8 0 4.2a18.3 18.3 0 0 0 1.3 4c.7 1.5.7 2.4-1 3.4a13.2 13.2 0 0 0-4.3 4.8c-1.4 2.3-1.5 4.2.5 6.5l1 1a21.6 21.6 0 0 0-5.2 8c-.5 1.2-.7 2.7.3 3.8a4 4 0 0 1 .5 5.2c-3.2 6-1.4 11.8 1.3 17.4.6 1.2 1.3 2.4 2.8 2.2a3 3 0 0 0 2.7-2.7 20.8 20.8 0 0 0 .2-6 7.4 7.4 0 0 1 2.5-7.2 21.4 21.4 0 0 0 .7 3.6c1.7 5.4 5.4 9.6 9.6 13.2A11 11 0 0 0 35 329a18.7 18.7 0 0 0 10.2-5.6c2.5 2.7 4 2.7 6.3 0s4.8-6 6-10.5c2.3 7.8 4 15 5.5 22.6l-8.3-4.2c-.6 2.3-1.2 4.3-1.6 6.4-2.8 15.8-1 31.6 1.2 47.3.5 3 2.3 6.4 1 9-10.8 22.6-17 46.4-22.2 70.6C29.3 482.4 23 499 8 510l-3 2.3c-.7.4-1 1.3-1.7 2.3a77 77 0 0 1 26.7 1 32.5 32.5 0 0 0-1 4c-1 11-2 21.8-3.3 32.7s-2 19.2-4.3 28.6a1.3 1.3 0 0 0 .8 1.6 22 22 0 0 0 5 2 207 207 0 0 0 28 4.5c1 .2 2-.4 2.3 1l5.4 26 2.8 16.8-1.5-.8c-1-.5-2.2-2-3.5-1s-.5 2.6-.4 4a7 7 0 0 0 .2.8c2.6 11 3.3 22.2 5.5 33.2l-4.6.5s-1.8.7-1.3 2 1.4 4.5 3 6.4l-2.2.5c-2 .7-2 1.2-.8 2.8a2 2 0 0 1 .2 2.7c-4 4.3-6.8 9.4-10 14.3-5.2 8-9.5 17-19.3 20.8a9.6 9.6 0 0 0-2 1.7 1 1 0 0 0-.5 1.2 7.3 7.3 0 0 0 4 5.2c2.3 1 4.7 1.5 7 2.2h16c3.4-.5 7-1 10.3-2.5s6-2 7.2-5a46.6 46.6 0 0 1 3.6-6.4c-1 3 1 3 3 3.4a42.4 42.4 0 0 0 10.4 0 2.6 2.6 0 0 0 2.3-2c3-7.5 3.2-15.6 4-23.5.5-3.4-1-6.8-.6-10 1.5-8.5 3.7-17 5.7-25.6a1.5 1.5 0 0 0-1.2-2c-4.4-1.7-5.7-3.7-5-8.2a13.8 13.8 0 0 0 0-1.5 459 459 0 0 0 1-55.4h6.4c0 1.2 0 2.4.2 3.6l7 47a5.7 5.7 0 0 1 0 .6 2.5 2.5 0 0 1-.8 2c-4.4 4.2-5.2 8-2.5 13.4a47 47 0 0 1 4 11.3 10.6 10.6 0 0 1-.5 7.3c-3.4 6.7-5.5 13.7-3.4 21.4 1.4 5 .5 10.7 2.3 16a1.5 1.5 0 0 0 .7 1.2c4 1.8 8.2 2.6 12.6 1 .7 3 3 4 5.5 5a62.2 62.2 0 0 0 7.8 1.7c7.3 1.2 14.7.5 22 1a14.2 14.2 0 0 0 8-1.6c3-1.5 3.3-3.7 1.3-6.2s-7-7.4-11.6-9.5a1.6 1.6 0 0 1-.8-1.2 99.8 99.8 0 0 0-12-25.7 6 6 0 0 1-1-4.5c.5-3.7-.2-4.2-4-3.4 2.3-7.5 3.2-15.2 4-23s1.2-12.4 1.7-18.6c0-.8 0-1.7-.7-2.2a1 1 0 0 0-1 .2c-1.6 1.5-3.7 2-5.6 3 2.8-14 5-27.7 4-41.8h.2c16.7-1 33.2-4 49.7-6.5 1-.2 2.4 0 2.2-2l-1.6-15c-2-15.7-3.3-31.5-6.5-47l9-4.8h.2c1-.6 1.3-1 .6-2.4-3.7-8-7.5-16.2-9.6-25zm-35-106a55.6 55.6 0 0 0-10-8.7c-.5-.4-.3-1-.2-1.5a139 139 0 0 1 1.7-16c.8-4.3-2.4-1-3.5-2.3l2.3-12a1.6 1.6 0 0 1 .8-1 92 92 0 0 1 11.5-5.6c6.2 16 1 31.2-2.5 47zM66 354.8c24 6 47.7 2.5 72.2-.3l-1.8-1 3-.4c-.8 4.4-2 8.7-1.7 13s-2 6.3-6 7c-11 2.2-22.2 2-33.3 2a209.4 209.4 0 0 1-28.7-1.7c-2-.3-3-1-3-3.3a89.6 89.6 0 0 0-.8-15.2zm80.6-47.6c2.3 3.5-.8 3.8-3 5-.6-3 1.4-3.8 3-5zm-2.7.6c0-2 0-3.8.2-6 2.7 3 2.6 4.5-.3 6zm1.3 8.7l-1.6-3a8.3 8.3 0 0 0 3.7-2c1.4 2.7 1.3 3-2.2 5zm3.4-1L152 332a.7.7 0 0 1-.6 1 54.7 54.7 0 0 0-11.5 5.3c1-7.8 2.2-15.4 3.5-23.5 1.2 4.7 3 1.7 5.2.8zm19.6-42.3a13.4 13.4 0 0 0 1.8 2c4.3 4.8 4.4 5 .3 10-2.8 3.3-6 6.5-9 9.8 5.8-3.6 9.8-8.7 13.2-14.5 1 1.3 2 2.5 3 3.5s0 1.3-.5 1.7l-10.7 11.5-1.3 1.6a54 54 0 0 0 13.2-13.8l5.8 6.8c-5 3.8-10 7.5-13.6 12.5-2.7-1-4-3.4-5.6-5.5a11.6 11.6 0 0 1-4-3.7 30.2 30.2 0 0 1-7.4-7.2 2.7 2.7 0 0 1 1.6-4.2 15.2 15.2 0 0 0 8-5c1.7-2.3 2.8-4.6-1-6.7 2.6-.5 4.7-1.6 6.2 1.2zm0-27L185 244a10.4 10.4 0 0 1-4.2 5l-14 8.3c-.6.3-1.3.4-1.3 1.3s1 .7 1.5.8a23.5 23.5 0 0 1 7 2.4c-1.4 3.3-3.4 6-7 7l-3.8 1c-2.2.7-4 1.4-1 3.4 1 .6 1 1.6.4 2.7-2.2 3.3-5.7 4.8-9 7a106.7 106.7 0 0 1 1.8-15.2c1.7-9.8 2-11.2-3.5-18.6a123 123 0 0 1 16-3zm-23.7-4c1.5 1.6 2.8 3.3 4.3 4.8 5.8 5.8 7.5 12.5 5.2 20.4-1.5 5.2-1.5 10.7-2 16s2 7.5 4.6 10.2c7.6 7.4 15.2 14.8 21.8 23.2l-3.5-5.4-4-5.4c-.3-.5-1-1-.4-1.7l5.6-4.2c6 9.5 9.7 19.8 14 29.8 1 2.4 1.8 5 3 7.3 2.6 6.6 1 12.5-2.2 18.3-.7 1.4-2.2 1-3.2 1-6.7 0-13.4 0-20-1.2s-10-6-11-12.4c-2.3-10.8-5-21.5-6.6-32.3-1-7.3-6-12-10.2-17s-6.2-8-5.3-14c.4-2.4 0-5 0-8.3l-5 11.2a60 60 0 0 1-3.4-13c3.5-1 7.3-.3 11.3-1.2-2.7-1.3-5-.8-7.3-.7s-2.5-.4-2.5-2v-6l10.8 1a1.7 1.7 0 0 0 0-.4l-7.6-1.3a1.5 1.5 0 0 1-.8 0c-1.7-2-.3-4-.2-6s-.5-2.8 1.7-2.4l13.5 2.6c-2-2-4-2-5.8-2.5a2.8 2.8 0 0 1-1.4-.5c-2.5-5.6-7.6-9.4-10-15-2-3.8-3.6-7.8-2.7-12.2.2-1 .3-2 1.6-2.7l2 4c3.8 7 9.8 12.5 15.5 18.3zm-60.3-13.8c1.4 0 2.7-.3 3.8 1a2 2 0 0 0 2.2.4c5.6-2.2 11.7-1 17.5-2.2 2-.5 4-.6 6.4-1 0 6-2.6 12 2 17.5-10.6 4-21 3.8-31.6.2 1-5.3.4-10.5 0-15.8zM75.5 211c2 .5 3.8.8 5.2-1.2a1.4 1.4 0 0 1 1-.2c13 1.3 25.5 0 38-2a3 3 0 0 1 1.8 0c3 1.4 6 2 8.7-2.2-.4 5-2.5 7.6-6.7 9-7 2.4-14.3 2-21.5 2a28 28 0 0 0-9 1.2c-2 .7-2 2-1.6 3.5l1.2 4s.4 2-.7 2.6-1.6.8-2.4.3a2.5 2.5 0 0 1-1-2.8 20 20 0 0 0 .3-6c-.3-1.5-1-2.2-2.6-1.8a36.3 36.3 0 0 1-6.8 1c-6 0-9.5-4.3-8-10.4a9 9 0 0 0 4 3zm-3.2-4.3a10 10 0 0 1 7.5-3.7c7-.3 13.8.5 20.7.5s15-3 22.5-4a16.4 16.4 0 0 1 4.4 0c2.4.2 3 2.2 1.7 4.2s-3.5 4.6-7 2c-.7-.4-2.4.2-3.5.6-8.3 2-16.8 1.6-25.3 2.2-4 .3-8.2 0-12.3-.2a2 2 0 0 0-1.4.2c-3.4 3-5-.8-7.3-1.8zm43.2 20.6c0-.7.5-.8 1-1l6-.7c0 7.7 4.6 13.2 9.4 18-5.8 1-10.8-2-16.5-4-.6-3.8.4-8 0-12.3zm21.5 22.4c-2.8 1-6.8-3.6-8.6 2-.8-1.7-1.7-3.4-2.4-5.2s1-1.6 2-1.7 7.8 3 9 5zm-16 5.5a17 17 0 0 1-10.6 2.6c-3.7-.2-5-1.7-8-8.2 5.6-1 11.8-.5 15.2-6.8 1.7 1.2 4.3 1.2 5.6 3 2.7 4 2 6.6-2 9.3zm-19.8-3.7c1.6 6.2 5 9.3 11.7 8.6s10.4-2.5 13.5-7.7a7 7 0 0 1 1.4 6c-3-1-2.7 1-2.7 3a17 17 0 0 0 1 6.3c-3 0-2.5 1.6-2 3.6s1 6.3 2.8 9 3 3.3 5.2 1c.5 1.8.4 2-1.4 1.8a253.7 253.7 0 0 0-50 3.5c-1 0-1.6.6-1.8-.8a253.2 253.2 0 0 0-7-31.5 1 1 0 0 1 0-.5c10.4 11 20.2 10.4 29.3-2.3zm54.6-104c1.5-1 2.6-1 3 1.2a32.4 32.4 0 0 1 .2 11.3c-1 7.2-4.3 16.5-6.6 24.3v-.6c-1.2-9-1-18-1-27.2a11 11 0 0 1 4.5-9zm-16-65.7c2-5 2.4-10 2.3-15.5a90.8 90.8 0 0 1 14 3.4c1 .3.7.8.5 1.4-1.5 6.7-5.4 12.2-8.2 18.5a46 46 0 0 0-8-6.6c-.2-.3-.7-.5-.5-1.2zm-46.4-16c2.3-2 5.3-1 6.3 2a62 62 0 0 1 1.7 7c.2 1-.5 1-1 1l-11.8 1a14.2 14.2 0 0 1 4.8-11zM56.4 42C70.2 47 80.2 56.4 90.8 65c-.8 1.4-1.5 2.3-2 3.4L86.8 72c-5-2.8-10.4-4-16-5l14.4 5.5c.6.2 1.5.5 1 1.3s1 3.2-1.2 3.6c-10 1.7-19.7 4.2-28.8 9.2-5.6-15-3.4-29.6 0-44.5zM43.3 98.4A86.6 86.6 0 0 1 41 84a1.2 1.2 0 0 1 .8-1.3l9.7-4.8c.8 3.4 1.3 6.5 2.7 9.3.4.7-.3 1-.6 1a34 34 0 0 0-10.4 10zm6 115.3c-.7-.5-1.2-.7-1-1.6 3.2-19 3.3-38.2-.7-57 32.2-9 62-21.5 82-49.5-5.5 16-18.7 26-32.3 36 12.6.3 34-15.3 45.5-33.2 3 4.4 6.3 17 7.2 24.4 1.3 12-.7 24.2 0 36.3.4 9.4 0 18.8 3.7 27.8a19.2 19.2 0 0 0 1.7 3.7c2 3.2 1 5.7-1.5 8-5.3 5-12 6.7-18.5 9-4.8 2-5 2-9.5 0-1 1.7-2 3.8-3.8 4.2-9 1.7-17.6 4.7-27 3.6-2.3-.3-1.5-2-2-3-1.2-4-1-3.8 3-4 9.5-.7 19 .7 28.5-2.3 5.8-2 10-10.5 7-16-1-2-2.6-2.5-4.6-2.6a26.8 26.8 0 0 0-9.7 1.5c-11 3.6-22 5-33.5 2.4a13.7 13.7 0 0 0-10.5 1.8c-4 2.7-5.3 5.4-4 9.8s4.4 7.2 8.8 7.4a29 29 0 0 0 8.7-1.3c1.5 3.5 0 5.8-3.4 5.5-12.2-1-24-3.4-34.2-11zm31 29.6c5 6.3 12.5 5.4 19.2 6.4-.5 4.3-5.6 8.8-10.8 9.4-7.8 1-14-3.2-16.8-11.3 3-1.8 6.3-2.3 8.4-4.6zm-23.4 8l10.8-2.4c3.6 10 6 20.3 8 30.8v.3c1.5 7.6 1.5 7.6-6.3 9-1 0-5.5-4-5.5-5.3-.4-11.3-3.3-22-7-32.5zM28.4 259a1.7 1.7 0 0 1 2.7-.2 13.4 13.4 0 0 0 6.7 2.5c-2.6 1.7-6 2.2-6.6 5.7s2.5 5 4.7 7l-13-7a38.5 38.5 0 0 1 5.7-8zm-14.8 8.8c-1-1.5-.3-2 1-2.3a8.2 8.2 0 0 1 4.7 1c4.5 2.2 9 4.2 13 7.2s7.6 2.4 11.6 3c7.6.8 14.2 3.7 19.3 9.7a30 30 0 0 0 10.7 8c-2.7 3.5-5.6 4.2-9 2.2a71.5 71.5 0 0 0-12.5-6c-4.8-1.8-7.3-.7-9 4.2a5.2 5.2 0 0 1-2 2.6c-2.8 2-5 4-6.4 7.4s-6.3 6.5-11 5.2l-2-.3c-.2-2.2.4-4.5-.6-6.6l3.2 3.6c2.5 2.5 5 2 5.8-1.7 1-5.8 0-11-4.7-15 2.5-3.2 1.4-7 1-10.6a10.2 10.2 0 0 0-3.4-7 32.4 32.4 0 0 1 2.5 13.7c0 1.6 0 3.5-2 3.4s-3.8-.2-4-3a39 39 0 0 0-6.3-18.6zm39.2 28l-4-4.5c4.3.8 4.7 1.2 4 4.3zM10.2 286a2.3 2.3 0 0 1-.3-2.6 25 25 0 0 1 5.2-7c1.5 4 2.4 8 4.2 11.7s3.3 4 6.4 2.2c1.6 5.3 4 10.5 1.7 16.7-3.5-3.4-6-7-8.8-10.2S13 289.6 10 286zm1.2 32.4a4.2 4.2 0 0 1 0 1c0 1.7.8 4.3-1.4 4.7s-1.7-2.4-2.5-3.7c-3.5-5.6-1.8-11 .2-16.7L14 309c-4 2.3-3 6-2.7 9.4zm-4-17.2a3.8 3.8 0 0 1-1-4.8l4-7c4 4.6 7.6 9.3 9.5 15a9 9 0 0 1 .2 5.5c-.2.6-.5 1.5-1.5.7a114.4 114.4 0 0 1-11.4-9.5zM35.8 327c-3 1-5.6-.3-7.7-1.8-4.4-3.3-8.4-7-10-12.7 2.8-.7 5.3.6 8 .2 5.7-1 10-3.3 12-9 .8-2.4 3.3-3.4 5.4-5 3 4.5 8 9 5.6 14.6s-6.3 11.4-13.2 13.7zm13.6-4.6c-1 2-2.2 0-3.5 0a27.2 27.2 0 0 1 4.4-6c-.3 2.4-.2 4.4-1 6zm3.4-4.8l-2-8.2a21.5 21.5 0 0 0-5.2-9.8c-1.4-1.5-1.6-2.5 0-4 5.3 4.8 7.3 11.3 9 17.8.3 1-1 2.6-1.7 4.2zm2.7-7c-1.5-5.2-3-10-7-14-2-2-2-2-1.2-4.6 4.4 1.8 10 14.6 8.2 18.5zm1.3-7.8c-.5-2.2-1.4-4.3-2.2-6.4 2.3-2.2 4.5-1.3 7 .2 3.8 2.5 7.6 3.7 11.6 0 2-1.6 2-2.8-.2-4l-2.5-1.7a211 211 0 0 1 21.3-4c13-1.5 26-2 39-2.5 1.3 0 1.7.3 1.7 1.5 0 2.8 1.6 4.7 3.4 6.6l4 4.3c-7.4 0-14-.4-20.7 0-20 1-40.2 2-59.8 7.2-1.3.3-2.2.2-2.6-1.5zM58 307a148.7 148.7 0 0 1 25-4.8A448 448 0 0 1 140 299c2.3 0 3 .6 3 3-1 12.8-3 25.3-5.2 38-.7 4.2-1.2 8.5-2 12.8 0 .8 0 1.5-1.2 1.6-20 1-39.8 3-59.6.3-6.7-1-6.6-.8-7.6-7.5a348.6 348.6 0 0 0-9-40.3zm-3 25.4l7.4 4.2a2 2 0 0 1 1 1.5l2 13c.2.5.4 1.4-.5 1.4S63 354 63.3 355a117.6 117.6 0 0 1 1 16c0 1 0 2.4 1.3 2.8l-8.3 15.4c-2.8-6-4.2-38.4-2.2-57zm38 318.3c-8-6-16.6-11.3-25-16.6a1.2 1.2 0 0 1-.7-1c-.7-15-4.7-29.3-8.3-43.7a317 317 0 0 0 36.2 1.7c-1 20-.6 39.8-2.3 59.7zm41-19.4a1.8 1.8 0 0 1-1 1.3 159.4 159.4 0 0 0-22.2 14.8c0-1.7 0-3.4-.2-5-.7-17.5-3.3-34.5-6.2-51.5L139 589c-1.2 14-1.8 28.3-5 42zm51-94.2l3.2 43.4c-25.2 4.7-50.7 7-76.3 8a395.5 395.5 0 0 1-66.4-3c-7-1-13.8-2-20.4-4-1.3-.4-1.7-1-1.4-2.5 4-21 6-42 7.5-63 11 2 21.5 5.6 32.2 8.5 27.8 7.7 56 8.8 84.5 4.6 12-1.7 23.5-5.6 35-10l2 18zm-33.2-11c-34.7 6.3-68.6 3-102-7.8-11.2-3.6-22.6-6.3-34.5-6.7H8l.7-.5a68.5 68.5 0 0 0 11-9.3c6.3-6.5 9-14.8 11.7-23 4-12 6.2-24.6 9-37C44 427.5 49 414 55 400.5c3.8-8.7 8.2-17 12.6-25.2a245 245 0 0 0 48.2 1.5c6.5-.5 13.2-.5 19.4-2.6a4.7 4.7 0 0 1 5.3 1c13.3 11.3 21.4 25.7 26.8 42s8.5 34.6 11.4 52c2.5 15 5.7 29.8 14 43.2-13.2 6-26.4 11.2-40.4 13.7z"/><path class="cls-2" d="M77.3 135.4c.6.6 1 1.3.2 2s-1 .4-1.7 0c-6.5-4.7-10.7-5.3-16.4.3a25 25 0 0 1-2.4 2c3.4-8.5 14.5-10.6 20.3-4.3z"/><path class="cls-2" d="M160 121.6h-.2c-1.8-5.6-3-11.6-5.5-16.8-5.2-10.7-13-19.6-25-22.5s-26-2-39-.5c-9.7 1.2-18.8 4.5-27.7 8.7a12.4 12.4 0 0 0-5 4.6c-2.6 4-.8 7.8 4 9.6 8 3 16 2.2 24.3 1.3a35 35 0 0 1 3.8-.5 167.6 167.6 0 0 1-20.2 5c-7 1-13.8 1.8-20.8.3l5 4c-4.4-1-8.3-2.3-11.5-5.5a104.3 104.3 0 0 0-6.5 22.6c-2 12-1 24-1 36 .2 15.8 3.2 31 7 46 1 5 2.5 9.7 3.8 14.4-3.5-4.5-4.6-9.8-6-15.2-4-18-7.4-35.8-8-54.2-.5-15.3 1-30.4 5.4-45S50.3 90 64 85c20-7.3 40.7-9.6 61.7-5.5 18.6 3.6 28 17 32.8 34.4.7 2.4 1 5 1.6 7.6zM97.4 655.5c1 1 2.4 1 2 2.3-3.5 12.6-6.7 25.2-5.7 38.5a21 21 0 0 0-1-4.5c-3.7-8.8 1-16.6 2.6-24.7.7-3.6 3.5-6.8 2-11.5zM87 649l-.3.5-18-9.5c-.8-.5-2-1.5-2.8-.8s-.4 2-.2 3c1.4 9.6 4 19.2 5 29 0 2.5-.6 3.2-2.8 3.2s-2-.5-2.6.7.5 2 1 2.6l1.6 2.2-1 .4c-2.7.3-3.7 1.4-2.2 4s.4 2.6-1 3.7c-4 2.8-7.2 6.5-11 9.8 2.8-4 5-9 8.4-12s.7-3.5.3-5.2c3.7-1.8 3.7-1.8 1-9.3h.7c5-.3 5.2-.3 4.6-5.2-1.4-10.8-2.8-21.6-5-32.6zM83.6 705c-4.6 5.2-9 10.5-13.7 15.6s-9.2 4-14.2 4.5a74.7 74.7 0 0 1-21.8-.5 7 7 0 0 1-3-1c5.6 0 12-.6 18 0 9.4.8 16.8-2.4 23-9a79.4 79.4 0 0 1 11.6-9.6zM116.4 668.8c.7 2.3.7 4.2-.7 6s-3.7 5.5-6 8c.8-1.7 1.3-3.8 2.4-5.4 2.4-3.3 1.6-6.6.8-10a73 73 0 0 0-5-13c-1-2-1.7-3.6.4-5.3a13.5 13.5 0 0 0 2-3 1.7 1.7 0 0 1 0 2.4c-2 2-2 4-.7 6.3 2.7 4.5 5.4 9 7 14zM141.2 719.8a171 171 0 0 0 21.6 1c-6 1.3-12.3.6-18.5.4a51 51 0 0 1-15.5-2.4 6.8 6.8 0 0 1-4.5-4 72.4 72.4 0 0 0-4-7.6l.5-.5c1.3 1.5 3 2.7 3.7 4.4 3.6 7 10 8 16.7 8.8zM143.5 685.3c1.4 3 3 6 4.3 9-3.5-4.2-7-8.2-10.3-12.4-.7-1-.6-2.4-.5-3.6s-.7-3-2.8-3a229.8 229.8 0 0 0 4.4-35.4 30.2 30.2 0 0 0 0-4.3c0-1.4-1.3-1-2-.8l-7.5 2.7 12.2-8.3c-.2 15-3.5 29.6-4.5 44.2 1 .7 1.8 0 3 .2-1.7 4.8 2 7.8 3.8 11.5z"/><path class="cls-2" d="M89 133.7c12.8-7.8 26-15.3 36.5-26.4-20 25-48 37-77.2 46.6C62 147.6 76 141.4 89 133.6z"/><path class="cls-1" d="M78.2 178.4c1.5-2.8 2.2-4.7 2.2-7a2 2 0 0 0-1.8-2c-1-.2-1.4.5-1.7 1.4a27.7 27.7 0 0 1-1.5 4.2 3.7 3.7 0 0 1-3.8 2.4c-1.7-.2-2.2-1.7-3-3s.3-2.8-1.6-2.2-.4 2-.4 3a17 17 0 0 0 .5 2.8c-4.8-5-4.4-17 1-21a9.2 9.2 0 0 0-.7 6.4c.6 2.4 2.5 3 4.8 3.2s6.8-5 6.7-9c1.6 1 3.8 5.6 3.7 9.5s-.2 7.8-4.2 11.4zM120.7 176.6c-2.6-4.6-1.6-15.5 2-19.4-.3 2-1.2 4-.3 5.8s2 3.4 4.3 3.2 7-1.6 6.3-9.4c3 3 3.6 6.2 3.2 9.8-.6 5.2-1.4 10.4-6 14a23 23 0 0 0 3.8-8.2c.2-1 .7-1.8-.7-2.2a1.5 1.5 0 0 0-2 1.2 12.5 12.5 0 0 1-2.8 5.3c-2 2.2-4 1.7-5-1.2l-.8-3.3c-2.2 0-2.2 0-2 4.4z"/><path class="cls-1" d="M85.4 159.8c-9-7-12.3-7.2-18.7-3s-8.8 13.8-5 20.8c-4.8-3.4-8-9.8-4.3-15.5 5-7.5 11.7-11.3 19-10 4 .6 9 5 9 7.8zM139.5 174c3-9.6 1.4-15.7-4.5-19.4s-9.3-2.4-17.6 5.3c-.7-1.8.4-2.7 1.2-3.7 7.2-7.8 15.3-7.5 23 .8 5.3 5.6 5.2 9.4-.2 14.6l-2 2.3zM140.5 137l-7.4-4.4a3 3 0 0 0-2.8-.3 27.3 27.3 0 0 0-11.2 6.4c-.5.5-1 1-1.8.4a1.2 1.2 0 0 1 0-1.7c4-4 8.6-6.8 13.8-7.4s6.6 3.2 9.5 7zM119.4 181.5c6.2 3.6 12 1.5 18-.4a13.7 13.7 0 0 1-13.4 4.4c-2-.4-4-1.2-4.6-4zM82 181.3c-5 5.8-15 7.3-18.3 3 6.5 2 12-1 18.2-3zM92.2 193.6l1 2a2.5 2.5 0 0 1-3-1.4c-.7-1.2 0-1.8 1-2.4a11.6 11.6 0 0 0 3-4.4c.4 2.7-.2 4.6-2 6.2zM99.7 324c4.2-.3 8.2-.7 12.3.7-.2-5 0-9.8 2.6-14.2a11.8 11.8 0 0 1 .8-1.3c1-1.4 2-3.6 3.7-3.4s3 2.7 3.4 4.6c2 8.3 1.3 16.7.3 25-.2 1.8 0 3.7-.7 5.4-2.5 6.5-3.4 9.7-13 10.2l-9 .2c-7 0-12.7-4.6-13.5-13.4s-.6-18 2-27c.7-2 1.7-4.2 3.8-4.5s3.7 2 4.6 4a40 40 0 0 1 2.7 13.7zM92 307.2c-3.8 11.2-5 22.3-2.5 33.7 1 4.4 4 7.3 8.5 7.7a52.8 52.8 0 0 0 13-.3c5.2-.8 8-3.5 8.8-9a103.7 103.7 0 0 0 .5-29.7 6 6 0 0 0-1.2-3.4c-4 5-5.4 11-5.3 17.3 0 1 .5 2.4-1.4 2.2a114.2 114.2 0 0 0-12-.7c-2.7.2-3.3-.7-3.5-3.3 0-5-1-10-4.8-14.5z"/><path class="cls-1" d="M112 337.2a2.3 2.3 0 0 1-2.5 2.4c-2 0-2.6-1.8-2.8-3.3a2.3 2.3 0 0 1 2.4-2.6c2 0 3 1 3 3.5zM94.4 336.3c.2-1.3.5-2.8 2.4-2.8a2.5 2.5 0 0 1 2.8 3c0 1.6-1 2.8-2.7 2.8s-2.5-1.2-2.6-3z"/></svg>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice-hungry-ponytail.svg" id="ponytail" />
  </div>
  <div class="table-set">
      <img class="table" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/table.png">
      <div class="drink-me">
          <img class="doily" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/doily_small.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/doily.png 2x">
          <div id="bottle">
              <div id="liquid"></div>
              <img class="fg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/drink-me_fg_small.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/drink-me_fg.png 2x">
          </div>
      </div>
      <div id="eat-me">
          <img id="eat-me_sprite" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/sprite_cupcake_small.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/sprite_cupcake.png 2x" alt="A cake labeled Eat Me">
      </div>
  </div>
  <div id="endings">
    <div class="ending" id="end-in-tears">

      <div class="alice_breakdown">
        <img id="pool" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/pool.svg">

        <img class="tear" id="tear1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear1.svg">
        <img class="tear" id="tear2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear2.svg">
        <img class="tear" id="tear3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear3.svg">
        <img class="tear" id="tear4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear4.svg">
        <img class="tear" id="tear5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear5.svg">
        <img class="tear" id="tear6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tear6.svg">

        <img class="alice_crying" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice_crying.svg">
      </div>
    </div>
    <div class="ending" id="end-too-small">
      <div class="too-small_wrapper">
        <div id="alice_too-small">
          <img id="alice_arm" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice_small_arm.svg">
          <img class="alice_small" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice_small.svg">
          <img id="exclaim" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/alice_exclaimation.svg">
        </div>

        <img class="door" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/door.svg">

        <img class="table-with-key" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/table-with-key.svg">
      </div>
    </div>
    <div class="frame"></div>
  </div>
</div>
html, body { 
  background: #000;
  font-family: sans-serif;
  width: 100%; height: 100%; 
}

.wrapper {
    background: #861f4c url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_hall.jpg) no-repeat 0 0 / cover;
    overflow: hidden;
    width: 100%; height: 100vh;
    max-width: 150vh;
    position: relative;
    margin: 0 auto;
}

* { user-select: none; }

img { pointer-events: none; }

.table-set {
    line-height: 0;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
}
.table {
    width: 100%; height: auto;
}

#alice {
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    position: absolute;
    top: 80%; left: 50%;
    width: 60%;
}

#ponytail {
    transform-origin: center top;
    position: absolute;
    left: 0; top: 0;
    width: 80%;
}

.alice_lines {
    position: relative;
    z-index: 1;
}

/* when view port is taller than square */
@media screen and (min-aspect-ratio: 768/1100) {
    #alice {
        top: 75%;
        width: 20%;
    }
}

/* when view port is wider than square */
@media screen and (min-aspect-ratio: 1100/768) {
    .wrapper {
        background-position: 0 15%;
    }
    .table {
        bottom: -20%;
    }
}

#eat-me {
    cursor: pointer;
    overflow: hidden;
    max-width: 302px; /*height: 226px*/
    width: 40%;
    position: absolute;
    bottom: 6%; left: 0%;
    transform-origin: 65% 100%;
}

#eat-me:before {
    content: " ";
    display: block;
    padding-top: 74.83%;
}

#eat-me img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}

.drink-me {
    max-width: 117px; 
    width: 15%;
    position: absolute;
    bottom: 6%; right: 10%;
}

#bottle {
    cursor: pointer;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: bottom center;
}

.drink-me:before {
    content: " ";
    display: block;
    padding-top: 304.3%;
}

.fg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}

#liquid {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/drink-me_liquid_small.png) no-repeat 100% 100%/100% auto;
    position: absolute;
    bottom: 0; left: 0;
    height: 100%; width: 100%;
    opacity: .9;
}

.doily {
    width: 157.2%;
    position: absolute;
    bottom: -12%;
    left: -32%;
}

/* Endings */
#endings { 
  background: #000; 
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

.frame {
  background: 
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/corner_lb.svg") no-repeat left bottom, 
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/corner_rb.svg") right bottom no-repeat,
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/corner_lt.svg") left top no-repeat,
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/corner_rt.svg") right top no-repeat,
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg-tunnel-border-top.svg") repeat-x 0 -90px,
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg-tunnel-border-bottom.svg") repeat-x 100% calc(100% + 90px),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg-tunnel-border-left.svg") repeat-y -90px 0,
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg-tunnel-border-right.svg") repeat-y calc(100% + 90px) 100%;
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
}

.ending {
  background:
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_tunnel-specks.png"),
    #6c373f;
  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.ending, .frame {
  width: calc(100% - 4em); height: calc(100% - 4em);
  margin: 2em;
}

/* Tearful Ending */
#pool {
  position: absolute;
  bottom: -2.5%; right: 10%;
  width: 80%;
}

.alice_breakdown {
  position: absolute;
  bottom: 0; right: 0;
  width: 100%;
  max-width: calc(96.36vh - 2em);
}

.alice_crying {
  width: 100%;
  transform: translateY(-6%);
}

.tear {
  position: absolute;
  top: 28%; left: 64%;
  width: .75%;
  z-index:1;
}

.tear:nth-child(odd){
    top: 30%; left: 60%;
}

/* Small Ending */
#alice_too-small {
  position: absolute;
  bottom: 0; left: 50%;
  /* Alice's width is 48.43% of her height. */
  /*   max-height: calc(50vh - 2em); */
  transform-origin: bottom center;
  transform: translateX(-50%);
  width: calc(50vh * .48 - 2em);
}

#alice_too-small:before {
  content: " ";
  display: block;
  /* Alice's height is 206.48% of her width. */
  padding-top: 206.48%;
}


.alice_small {
  height: 100%;
  position: absolute;
  right: 0; bottom: 0;
}

#alice_arm {
  width: 66.13%;
  position: absolute;
  top: 46.5%; left: 0;
  transform-origin: right center;
}

#exclaim {
  width: 11.17%;
  position: absolute;
  top: 29%; left: 80%;
}

.door {
  position: absolute;
  bottom: 0; left: 5%;
  height: calc(50vh * .48 * 1.5 - 2em);
  transform-origin: bottom center;
}

.table-with-key {
  position: absolute;
  bottom: -2em; right: 0;
  height: 100%;
  transform: translateX(50%)
}

/* so long as view port is taller than square */
@media screen and (max-aspect-ratio: 768/1100) {
  #alice_too-small {
    width: 30%;
  }
  
  .door {
    width: 30%;
    height: auto;
  }
  
  .table-with-key {
    width: 80%; height: auto;
  }
  
}

/* Ending UI */
a:link {
  color: #73ebc5;
}

a:visited {
  color: #8dd1c7;
}

a:hover, a:active, a:focus {
  color: #b1eaff;
}

#ending-ui {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_plaque.svg") no-repeat 0 0 / 100% 100%;
  box-sizing: border-box;
  color: #ffeef4;
  text-align: center;
  width: calc(100% - 8em); height: calc(100% - 8em);
  margin: 4em;
  padding: 2em;  
  position: relative;
  z-index: 3;
}

.ending-ui_wrapper {
  overflow: hidden;
  width: 100%;
}

#ending-ui_panels {
  overflow: hidden;
  width: 300%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  transform-origin: left center;
}

p { 
  margin: 1em 0;
  line-height: 1.5em;
}

.author {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}

.author img {width: 102px}

.text_poor-alice {
  height: 5em;
  min-height: 20vh;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.hr {
  height: 2em;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.button {
  cursor: pointer;
  margin: .5em 1em;
  padding: .5em 1em; 
  font-size: 1em;
  line-height: 0;
  background: #3eacb0;
  text-decoration: none;
  display: inline-block;
  height: 2.5em;
  width: 10em;
  pointer-events: auto;
  transition: 
    color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button img {
  display: block;
  margin: 0 auto;
  max-height:100%;
}

.button:hover, .button:active, .button:focus {
  background: #3e91af;
  transform: translate(.1em, .1em)
}

.what-now {
  padding: 2em 0;
  text-align: center;
}

.ending-ui_back, .ending-ui_front {
  width: 33.33%;
}

/* Hide the surprises by default. */
#ending-ui, #endings, .ending {
  opacity: 0;
  pointer-events: none;
}
var cake = document.getElementById('eat-me');
var bottle = document.getElementById('bottle');

// Keyframes for bouncing the controls
var tryMeKeys = [
  { transform: 'translateY(0) scale(1, 1) rotate(0)', easing: 'ease-in' },
  { transform: 'translateY(0) scale(1.1, .9) rotate(0)' },
  { transform: 'translateY(-10%) scale(.9, 1.1) rotate(0)', offset: .4 },
  { transform: 'translateY(-10%) scale(1, 1) rotate(10deg)', offset: .5 },
  { transform: 'translateY(-10%) scale(1, 1) rotate(-10deg)', offset: .7 },
  { transform: 'translateY(-10%) scale(1,1) rotate(0deg)', offset: .8, easing: 'ease-in' },
  { transform: 'translateY(0) scale(1, 1) rotate(0)' }
];

// Functions that animates the cake and bottle
function trytheCake(){
  cake.animate(tryMeKeys, { id: 'bounce', delay: 7000, duration: 2000, iterations: 2 });
}
trytheCake();
trytheCakeTimer = setInterval(trytheCake, 12000);

function trytheBottle(){
  bottle.animate(tryMeKeys, { id: 'bounce', duration: 2000, iterations: 2 }); 
}
trytheBottleTimer = setInterval(trytheBottle, 12000);  

// Growing and shrinking Alice
var aliceChange = document.getElementById('alice').animate(
  [
    { transform: 'translate(-50%, -50%) scale(.5)' },
    { transform: 'translate(-50%, -50%) scale(2)' }   
  ], { 
    duration: 8000, 
    easing: 'ease-in-out', 
    fill: 'both'
  });

aliceChange.pause();
aliceChange.currentTime = aliceChange.effect.timing.duration / 2 ;

var stopPlayingAlice = function() {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

var ponytail = document.getElementById('ponytail');
var ponytailTiming = {
  duration: 250, 
  direction: 'alternate',
  iterations: 2
}

var nommingCake = document.getElementById('eat-me_sprite').animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(-80%)' }   
], {
  fill: 'forwards',
  easing: 'steps(4, end)',
  duration: aliceChange.effect.timing.duration / 2
});
nommingCake.pause();

var growAlice = function() {
  aliceChange.playbackRate = 1;
  aliceChange.play();
  // stop jiggling the cake.
  clearInterval(trytheCakeTimer);
  if (cake.getAnimations()[0]){
    cake.getAnimations()[0].cancel();
  }

  nommingCake.play();
  
  ponytail.animate(
  [
    { transform: 'scale(1, 1) rotate(0)' },
    { transform: 'scale(.85, 1.15) rotate(2deg)', easing: 'cubic-bezier(.35,.97,.13,1.14)' }   
  ], ponytailTiming);
  
}

var drinking = document.getElementById('liquid').animate(
[
  { height: '100%' },
  { height: '0' }   
], {
  fill: 'forwards',
  duration: aliceChange.effect.timing.duration / 2
});
drinking.pause();

var shrinkAlice = function() {
  aliceChange.playbackRate = -1;
  aliceChange.play();
  // stop jiggling the bottle.
  clearInterval(trytheBottleTimer);
  if (bottle.getAnimations()[0]){
    bottle.getAnimations()[0].cancel();
  }

  drinking.play()

  ponytail.animate(
  [
    { transform: 'scale(1,1) rotate(0)' },
    { transform: 'scale(1.15, .85) rotate(2deg)', easing: 'cubic-bezier(.35,.97,.13,1.14)' } 
  ], ponytailTiming);
}

// On tap or click, Alice will change size.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
cake.addEventListener("mouseup", stopPlayingAlice, false);
cake.addEventListener("mouseout", stopPlayingAlice, false);
cake.addEventListener("touchend", stopPlayingAlice, false);


bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseout", stopPlayingAlice, false);
bottle.addEventListener("touchend", stopPlayingAlice, false);


// When either drink me or eat me animations finish, the game is "over."
// You get a different ending depending on how big or small Alice is
// (that is to say how far along her animation timeline is!)
var endGame = function() {
  // get Alice's timeline's playhead location
  var alicePlayhead = aliceChange.currentTime;
  var aliceTimeline = aliceChange.effect.activeDuration;
  
  stopPlayingAlice();

  // depending on which third it falls into
  var aliceHeight = alicePlayhead/aliceTimeline;

  if (aliceHeight <= .333){
    // Alice got smaller!
    showEndings.play();
    showSmall.play();
    exclaming.play();
    armWave.play();
    aliceShrank.play();
    bringUI.effect.timing.delay = 2000;
    bringUI.play();
  } else if (aliceHeight >= .666) {
    // Alice got bigger!
    showEndings.play();
    showCrying.play();
    pool.play();
    tears.forEach(function(el) {  
      el.playState = 'playing';
    });
    bringUI.effect.timing.delay = 2000;
    bringUI.play();
  } else {
    // Alice didn't change significantly    
    bringUI.effect.timing.delay = 0;
    bringUI.play();
  }
  
}

// When the cake or runs out... 
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;

// ...or Alice reaches the end of her animation
aliceChange.onfinish = endGame;

// Reset the 3 animations: alice, the bottle, and the cupcake
var restartGame = function() {
  aliceChange.currentTime = aliceChange.effect.timing.duration / 2;  
  nommingCake.currentTime = 0;
  drinking.currentTime = 0;
}

/* Crying Ending */
var tearsFalling = [
  { transform: 'translate3D(0, 0, 0)' }, 
  { transform: 'translate3D(0, 2850%, 0)' }, 
];

var getRandomMsRange = function(min, max) {
  return Math.random() * (max - min) + min;
}

var tears = document.querySelectorAll('.tear');
tears = Array.prototype.slice.call(tears);

var pool = document.getElementById("pool").animate(
[
  { transform: 'scale(.8)' }, 
  { transform: 'scale(1)' }, 
], 
{
  duration: 10000,
  fill: 'forwards'
});
pool.pause();

tears.forEach(function(el) {  
  el.animate(
    tearsFalling, 
    {
      delay: getRandomMsRange(-1000, 1000), // randomized for each tear
      duration: getRandomMsRange(2000, 6000), // randomized for each tear
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});

/* Small Ending */
var omgDuration = 600;

var exclaming = document.getElementById("exclaim").animate(
  [  
    { opacity: 0 }, 
    { opacity: 1 },
    { opacity: 1 }
  ], 
  {
    easing: 'steps(2, end)',
    iterations: Infinity,
    direction: 'alternate',
    duration: omgDuration
  }
);
exclaming.pause();

var armWave = document.getElementById("alice_arm").animate([  
    { transform: 'rotate(10deg)' }, 
    { transform: 'rotate(-40deg)' }
  ], 
  {
    easing: 'steps(2, end)',
    iterations: Infinity,
    direction: 'alternate',
    duration: omgDuration
  }
);
armWave.pause();

var aliceShrank = document.getElementById("alice_too-small").animate([  
    { transform: 'translateX(-50%) scale(1.1)' }, 
    { transform: 'translateX(-50%) scale(1)' }
  ], 
  {
    easing: easeOut,
    duration: 600,
    fill: 'forwards'
  }
);
aliceShrank.pause();

/* Ending UI */
/* Pull #learn-more into space when  */
var learnMoreButton = document.getElementById("learn-more_button");

var seeLearnMore = document.getElementById("ending-ui_panels").animate([
  { opacity: 1, transform: 'translateX(0)'}, 
  { opacity: 0, transform: 'translateX(0)', offset: .33 }, 
  { opacity: 0, transform: 'translateX(-66.67%)', offset: .66},
  { opacity: 1, transform: 'translateX(-66.67%)'}
], {
  duration: 400,
  easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
  fill: 'forwards'
});
seeLearnMore.pause();

var learnMore = function(e) {
  e.preventDefault();
  seeLearnMore.play();
}

learnMoreButton.addEventListener("click", learnMore);
learnMoreButton.addEventListener("touchStart", learnMore);

// hide content 
var hide = function(element) {
  element.style.pointerEvents = 'none';
}

// set animation back at the start then pause
var resetAnimation = function(animation) {
  animation.currentTime = 0;
  animation.pause();
}

/* Buttons reset the page's interactions. */
var easeIn = "cubic-bezier(0.755, 0.05, 0.855, 0.06)";
var easeOut = "cubic-bezier(0.23, 1, 0.32, 1)";
var durationFade = 300;
var keysFade = [
  { opacity: 0 },
  { opacity: 1 }
];
var timingFade = {
  duration: durationFade,
  fill: "forwards",
  easing: easeIn  
}

var timingFadeDelayed = {
  duration: durationFade,
  fill: "forwards",
  easing: easeIn,
  delay: durationFade
}

var showEndings = document.getElementById("endings").animate(keysFade, timingFade);
showEndings.pause();

var showCrying = document.getElementById("end-in-tears").animate(keysFade, timingFadeDelayed);
showCrying.pause();

var showSmall = document.getElementById("end-too-small").animate(keysFade, timingFadeDelayed);
showSmall.pause();

var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);
bringUI.pause();
hide(endingUI);

bringUI.onfinish = function() {
  endingUI.style.pointerEvents = 'auto';
};

var resetAllTheThings = function() {
  resetAnimation(seeLearnMore);
  resetAnimation(drinking);
  resetAnimation(nommingCake);
  resetAnimation(showCrying);
  resetAnimation(showSmall);
  resetAnimation(showEndings);
  resetAnimation(exclaming);
  resetAnimation(armWave);
  resetAnimation(aliceShrank);
  resetAnimation(pool);
  tears.forEach(function(el) {  
    el.playState = "paused";
    el.currentTime = 0;
  });
  resetAnimation(bringUI);
  hide(endingUI);
  aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
  aliceChange.pause();
}

Array.prototype.forEach.call(document.getElementsByClassName("play-again"), function(button) {
  button.addEventListener("click", resetAllTheThings);
  button.addEventListener("touchStart", resetAllTheThings);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/web-animations-next.min.js