%head
  %link(href="http://fonts.lug.ustc.edu.cn/css?family=Oswald:300,400" rel="stylesheet" type="text/css")
  %link(href="http://fonts.lug.ustc.edu.cn/css?family=Mrs+Saint+Delafield" rel="stylesheet" type="text/css")
%body
  .scene-button
    .btn
      .btn-info
        %h1.btn-h1 
          :plain
            <span>B<!--
              --><span>L<!--
                --><span>A<!--
                  --><span>C<!--
                      --><span>K<!--
                        --><span class="btn-h1_thin">O<!--
                          --><span class="btn-h1_thin">U<!--
                            --><span class="btn-h1_thin">T</span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
              </span>
            </span>
        .btn-line
        %p.btn-author by Ee Venn Soh
        %p.btn-copy "Blackout" is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.
        %a#btn_click.btn-button BEGIN

  .scene-spinner
    .spn-wrap
      .spn-spinner
        -(1..100).each do
          %i.spn-a
            %b.spn-b		


  .scene-torus
    .tor-wrap
      .tor-field
        -(1..30).each do
          .tor-circle
            .tor-rotor
              -(1..20).each do
                .tor-dot

  .scene-hole
    .hol-hole
      - (1..8).each do
        %i.hol-a

  .scene-polygon
    .pol-wrap
      .pol-dodecahedron
        -(1..12).each do
          .pol-pentagon
            .pol-pentagon-inner
  %script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js")
  :javascript
    $(document).ready(function(){
      $("#btn_click").on("click", function(){
        $(".btn-h1 span").addClass("btn_ghost").delay(1000).queue(function(){
          $(".btn-line").addClass("btn_gone");
          $(".btn-author").addClass("btn_gone");
          $(".btn-copy").addClass("btn_gone");
          $(".btn-button").addClass("btn_gone").delay(500).queue(function(){
            $(".btn-info").addClass("btn_white");
            $(".btn").addClass("btn_shrink").delay(1000).queue(function(){
              $(".scene-button").css("display", "none");
              $(".scene-spinner").css("display", "flex").delay(4500).queue(function(){
                $(".scene-spinner").css("display", "none");
                $(".scene-torus").css("display", "flex").delay(9000).queue(function(){
                  $(".scene-torus").css("display", "none");
                  $(".scene-hole").css("display", "flex").delay(6500).queue(function(){
                    $(".scene-hole").css("display", "none");
                    $(".scene-polygon").css("display", "flex");
                  })
                })
              })
            });
          });
        });
      });
    });