/* Responsive Web Design  */

<?php use de\pointedears\css\least\Mixins; ?>

/* Desktops with medium-size browser viewport (SVGA resolution) */

body {
  <?php
    Mixins::transition('',
        'margin-top   0.25s 0.75s linear,'
      . ' margin-left 0.25s 0.5s linear');
  ?>
}

.multi-display
{
  <?php
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . ' left  0.25s 0.5s linear');
  ?>
}

.menu .bow
{
  <?php
    Mixins::transition('',
        'width            0.5s 1s    linear,'
      . 'background-color 0s   0.75s linear'
    );
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . 'bottom 2.5s 0.5s ease');
  ?>
}
  
#bow-top {
  <?php
    Mixins::transition('',
        'left                        0.5s 1.0s linear,'
      . ' min-width                  0s   1.5s linear,'
      . ' border-top-left-radius     0.5s 1.0s linear,'
      . ' border-top-right-radius    0.5s 1.0s linear,'
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
      . ' opacity                    0s   1.0s linear');
  ?>
}

#bow-top .text {
  <?php
    Mixins::transition('-property', 'opacity');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

#bow-top-left {
  <?php
    Mixins::transition('-property', 'height');
    Mixins::transition('-duration', '0.125s');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

.menu-container
{
  <?php
    Mixins::transition('',
        'top      0.5s 1s linear,'
      . ' width   0.5s 1s linear,'
      . ' bottom  0.5s 1s linear,'
      . ' z-index 0s   1s linear');
  ?>
}  

.menu {
  <?php
    Mixins::transition('', 'height 0.5s 1s linear');
  ?>
}

.menu ul:first-child {
  <?php
    Mixins::transition('', 'padding-top 0.5s 1s linear');
  ?>
}

.menu .button
{
  <?php
    Mixins::transition('', 'width 0.5s 1s linear');
  ?>
}  

#bow #bottom {
  <?php
    Mixins::transition('', 'visibility 0s 1.625s linear');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('',
        'border-bottom-left-radius   0.5s    0.5s   ease,'
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
      . ' width                      0.5s    0.5s   ease,'
      . ' bottom                     0.0225s 1.625s linear,'
      . ' height                     0.0225s 1.625s linear');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors {
  <?php
    Mixins::transition('', 'opacity 0s 1.6475s linear');
  ?>
}  

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
  body {
    margin-left: 22em;
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
  }

  #bow #bottom
  {
    width: 20.8em;
  <?php
    /* Wait 0.5s for multi-display to be reduced in height */
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }
    
  #bow-bottom {
    border-bottom-left-radius: 2.4em;
    border-bottom-right-radius: 2em;
    width: 20.6em;
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '1.0s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
  }
  
  #bow-bottom .concave {
    width: 7.6em;
  <?php
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }

  #connectors .right {
    width: 5em;
    <?php
      /* Wait 1.0s for multi-display to be moved to right */
      Mixins::transition('', 'width 1.0s 0.5s ease');
    ?>
  }
  
  .multi-display
  {
    left: 15.8em;
  <?php
    Mixins::transition('',
        'left 0.5s 0.5s ease,'
      . 'top  0.5s 0.5s linear');
  ?>
  }
  
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}

/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 640px) {
  /* 0.5 to 0.5225s */
  #connectors {
    opacity: 0;
    <?php
      Mixins::transition('', 'opacity 0s 0.5s linear');
    ?>
  }

  #bow-bottom {
    bottom: 2.6em;
    height: 0em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'bottom   0.0225s 0.5s    linear,'
        . ' height  0.0225s 0.5s    linear,'
        . ' opacity 0s      0.5225s linear');
    ?>
  }
  
  #bow #bottom {
    visibility: hidden;
    <?php
      Mixins::transition('',
          'visibility 0s      0.5225s linear');
    ?>
  }

  .menu-container
  {
    top: 11em;
    width: 5em;
    bottom: 0;
    z-index: 1;
    background-color: #fc6;
    <?php
      Mixins::transition('',
          'top               0.5s 0.5s linear,'
        . ' width            0.5s 0.5s linear,'
        . ' bottom           0.5s 0.5s linear,'
        . ' background-color 0s   1s   linear'
      );
    ?>
  }
  
  .menu {
    height: 21.8em;
    <?php
      Mixins::transition('', 'height 0.5s 0.5s linear');
    ?>
  }
  
  .menu ul:first-child {
    padding-top: 0;
    <?php
      Mixins::transition('', 'padding-top 0.5s 0.5s linear');
    ?>
  }
    
  .menu .button
  {
    width: 5em;
    <?php
      Mixins::transition('', 'width 0.5s 0.5s linear');
    ?>
  }

  /* 0.5225s to 0.6475s */
  #bow-top-left {
    height: 0;
    <?php
      Mixins::transition('', 'height 0.125s 0.5225s linear');
    ?>  
  }

  /* at 0.6475s */
  #bow-top .text {
    opacity: 0;
    <?php
      Mixins::transition('-property', 'opacity');
      Mixins::transition('-delay', '0.6475s');
      Mixins::transition('-timing-function', 'linear');
    ?>
  }
  
  .empty #bow-top .text {
    opacity: 1;
  }
  
  /* 0.6475s to 1.1475s */
  #bow-top {
    left: 100%;
    min-width: auto;
    border-top-left-radius: 0;    
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'left                        0.5s 0.6475s linear,'
        . ' min-width                  0s   0.6475s linear,'
        . ' border-top-left-radius     0.5s 0.6475s linear,'
        . ' border-top-right-radius    0.5s 0.6475s linear,'
        . ' border-bottom-right-radius 0.5s 0.6475s linear,'
        . ' opacity                    0s   1.1475s linear');
    ?>
  }

  .empty #bow-top {
    left: 0%;
    min-width: 10em;
    border-top-left-radius: 1.2em;
    border-bottom-left-radius: 1.2em;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 1;
  }

  .multi-display
  {
    top: 0.2em;
    left: 0.2em;
    <?php
      Mixins::transition('',
          'top    0.25s 1.1475s linear,'
        . ' left  0.25s 1.3975s linear');      
    ?>
  }

  .menu .bow
  {
    background-color: #fc6;
    <?php
      Mixins::transition('',
        'width 0.5s 0.5s linear,'
        . 'background-color 0s 1.6475s linear'
      );
    ?>
  }
  
  .multi-display .lower .bg
  {
    top: 11em;
    <?php
      Mixins::transition('', 'top 0.25s 1.1475s linear');
    ?>
  }
  
  body {
    margin-top: 9.6em;
    margin-left: 6.4em;
    <?php
      Mixins::transition('',
          'margin-top   0.25s 1.1475s linear,'
        . ' margin-left 0.25s 1.3975s linear');
    ?>
  }

  .multi-display .upper .content #cmd2,
  .multi-display .upper .content #cmd3
  {
    display: none;
  }
  
  .multi-display .upper .content #cmd1,
  .multi-display .upper .content #cmd4
  {
    right: 0;
  }  
  
  .multi-display .upper .content .analysis
  {
    right: 5.2em;
  }
  
  .multi-display .upper .content .commands
  {
    width: 5.2em;
  }
}

/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
  html,
  #LCARS,
  .multi-display
  {
    max-width: 540px;
  }
*/
  /* 0.5 to 0.5225s */
  #connectors {
    opacity: 0;
    <?php
      Mixins::transition('', 'opacity 0s 0.5s linear');
    ?>
  }

  #bow-bottom {
    bottom: 2.6em;
    height: 0em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'bottom   0.0225s 0.5s    linear,'
        . ' height  0.0225s 0.5s    linear,'
        . ' opacity 0s      0.5225s linear');
    ?>
  }
  
  #bow #bottom {
    visibility: hidden;
    <?php
      Mixins::transition('',
          'visibility 0s      0.5225s linear');
    ?>
  }

  .menu-container
  {
    top: 11em;
    width: 5em;
    bottom: 0;
    z-index: 1;
    background-color: #fc6;
    <?php
      Mixins::transition('',
          'top               0.5s 0.5s linear,'
        . ' width            0.5s 0.5s linear,'
        . ' bottom           0.5s 0.5s linear,'
        . ' background-color 0s   1s   linear'
      );
    ?>
  }
  
  .menu {
    height: 21.8em;
    <?php
      Mixins::transition('', 'height 0.5s 0.5s linear');
    ?>
  }
  
  .menu ul:first-child {
    padding-top: 0;
    <?php
      Mixins::transition('', 'padding-top 0.5s 0.5s linear');
    ?>
  }
    
  .menu .button
  {
    width: 5em;
    <?php
      Mixins::transition('', 'width 0.5s 0.5s linear');
    ?>
  }

  /* 0.5225s to 0.6475s */
  #bow-top-left {
    height: 0;
    <?php
      Mixins::transition('', 'height 0.125s 0.5225s linear');
    ?>  
  }

  /* at 0.6475s */
  #bow-top .text {
    opacity: 0;
    <?php
      Mixins::transition('-property', 'opacity');
      Mixins::transition('-delay', '0.6475s');
      Mixins::transition('-timing-function', 'linear');
    ?>
  }
  
  .empty #bow-top .text {
    opacity: 1;
  }
  
  /* 0.6475s to 1.1475s */
  #bow-top {
    left: 100%;
    min-width: auto;
    border-top-left-radius: 0;    
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'left                        0.5s 0.6475s linear,'
        . ' min-width                  0s   0.6475s linear,'
        . ' border-top-left-radius     0.5s 0.6475s linear,'
        . ' border-top-right-radius    0.5s 0.6475s linear,'
        . ' border-bottom-right-radius 0.5s 0.6475s linear,'
        . ' opacity                    0s   1.1475s linear');
    ?>
  }

  .empty #bow-top {
    left: 0%;
    min-width: 10em;
    border-top-left-radius: 1.2em;
    border-bottom-left-radius: 1.2em;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 1;
  }

  .multi-display
  {
    top: 0.2em;
    left: 0.2em;
    <?php
      Mixins::transition('',
          'top    0.25s 1.1475s linear,'
        . ' left  0.25s 1.3975s linear');      
    ?>
  }

  .menu .bow
  {
    background-color: #fc6;
    <?php
      Mixins::transition('',
        'width 0.5s 0.5s linear,'
        . 'background-color 0s 1.6475s linear'
      );
    ?>
  }
  
  .multi-display .lower .bg
  {
    top: 11em;
    <?php
      Mixins::transition('', 'top 0.25s 1.1475s linear');
    ?>
  }
  
  body {
    margin-top: 9.6em;
    margin-left: 6.4em;
    <?php
      Mixins::transition('',
          'margin-top   0.25s 1.1475s linear,'
        . ' margin-left 0.25s 1.3975s linear');
    ?>
  }

  .multi-display .upper .content #cmd2,
  .multi-display .upper .content #cmd3
  {
    display: none;
  }
  
  .multi-display .upper .content #cmd1,
  .multi-display .upper .content #cmd4
  {
    right: 0;
  }  
  
  .multi-display .upper .content .analysis
  {
    right: 5.2em;
  }
  
  .multi-display .upper .content .commands
  {
    width: 5.2em;
  }
}