<!DOCTYPE html>
<html>
<head>
  <style>
  @keyframes sun-intro {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1.5);
    }
  }

  @keyframes fern-intro {
    from {
      transform: translateY(1080px);
    }
    to {
      transform: none;
    }
  }

  .sun-layer {
    position: absolute; left: 50%; top: 50%;
    animation: sun-intro 14s 5s both;
  }
  .fern-layer {
    position: absolute;
    left: 50%; top: 15%; width: 800px; height: 800px;
    animation: fern-intro 10s 9s ease-out both;
  }
  .intro-layer {
    position: absolute;
    margin: 0;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  </style>

  <script type="text/javascript" src="layer_fern.js"></script>
  <script type="text/javascript" src="layer_intro.js"></script>
  <script type="text/javascript" src="layer_sun.js"></script>

  <script>
    window.addEventListener('load', function() {
      var introLayers =
          document.getElementsByClassName('intro-layer');
      for (var i = 0; i < introLayers.length; ++i) {
        InitializeIntroLayer(introLayers.item(i));
      }

      var flyingLinesLayers =
          document.getElementsByClassName('flying-lines-layer');
      var NUM_LINES = 30;
      for (var i = 0; i < flyingLinesLayers.length; ++i) {
        InitializeFlyingLinesLayer(flyingLinesLayers.item(i), NUM_LINES);
      }

      var sunLayers =
          document.getElementsByClassName('sun-layer');
      for (var i = 0; i < sunLayers.length; ++i) {
        InitializeSunLayer(sunLayers.item(i));
      }

      var fernLayers =
          document.getElementsByClassName('fern-layer');
      for (var i = 0; i < fernLayers.length; ++i) {
        InitializeFernLayer(fernLayers.item(i));
      }
    });
  </script>
</head>
<body style="background: rgb(0,0,0);">
  <div class="sun-layer"></div>
  <div class="fern-layer"></div>
  <div class="intro-layer"></div>
</body>
</html>