<?php
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');

/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');

/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
 
\header('Content-Type: text/css; charset=UTF-8');

require_once 'css/least/Mixins.php';
use de\pointedears\css\least\Mixins;
?>@charset "UTF-8";

/* 0.0 to 1.0 s */
<?php
  /* hide up to 0.25 s */
  Mixins::keyframes('fade-in', <<<CSS
    from, 25% {
       opacity: 0;
     }
   
     to {
       opacity: 1;
     }
CSS
  );
?>

body.fade-in {
  /* TODO: Step-by-step display instead */
  /*-webkit-animation-name: fade-in;*/
  /* -webkit-animation-iteration-count: infinite; */
}

/* 0.0 to 0.6 s */
<?php
   /* up to shortly before 0.6 s */
  Mixins::keyframes('empty-content', <<<CSS
    from, 99% {
       opacity: 0;
     }
CSS
  );
?>

.empty.fade-in #content {
  <?php
    Mixins::animation('-name', 'empty-content');
    Mixins::animation('-duration', '0.6s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/*
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
                                   :   |0.625   :      :       |1.25
                                   :   :  |0.63 |0.875
bow-top        |------------------>|   :  :  :  :  :  :  :
bow-top-left   |                   :-->|  :  :  :  :  :  :
bow-top-text   |------------------>|   :  :  :  :  :  :  :
menu-container |                   :   :->|  :  :  :  :  :
footer         |------------------>|   :  :  :  :  :  :  :
menu           |                   :   :->|  :  :  :  :  :
footer-text    |------------------>|      :  :  :  :  :  :
bow-bottom     |                          :> |  :  :  :  :
elbo-bg        |                           :>|  :  :  :
elbo           |                                :->|  :
elbo-border    |                                         :->|
content        |                                      :->|

1: bow-top-left

*/

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('bow-top',
    'from {
       left: 90%;
       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;
     }');
?>

.fade-in #bow-top {
  <?php
    Mixins::animation('-name', 'bow-top');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  /* up to shortly before 0.5 s */
  Mixins::keyframes('bow-top-text', <<<CSS
    from, 99% {
       opacity: 0;
     }
CSS
  );
?>

.fade-in #bow-top .text {
  <?php
    Mixins::animation('-name', 'bow-top-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('footer',
    'from {
       left: 90%;
       border-top-left-radius: 0;    
       border-bottom-left-radius: 0;    
     }');
?>

.empty.fade-in #footer {
  <?php
    Mixins::animation('-name', 'footer');
    Mixins::animation('-duration', '0.5s'); 
    Mixins::animation('-timing-function', 'linear');
  ?> 
}

/* 0.0 to 0.5 s */
<?php
   /* up to shortly before 0.5 s */
  Mixins::keyframes('footer-text', <<<CSS
    from, 99% {
       opacity: 0;
    }
CSS
  );
?>

.empty.fade-in #footer .text {
  <?php
    Mixins::animation('-name', 'footer-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.625s */
<?php
   /* up to 0.5s */
  Mixins::keyframes('bow-top-left', <<<CSS
    from, 80% {
       height: 0;
     }
CSS
  );
?>
      
.fade-in #bow-top-left {
  <?php
    Mixins::animation('-name', 'bow-top-left');
    Mixins::animation('-duration', '0.625s');  
    Mixins::animation('-timing-function', 'linear');
  ?>  
}

/* 0.0 to 0.63s */
<?php
  /* up to  ca. 0.61875s */
  Mixins::keyframes('menu-container', <<<CSS
    from, 98% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .menu-container {
  <?php
    Mixins::animation('-name', 'menu-container');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.63s */
<?php
  /* up to ca. 0.61875 s */
  Mixins::keyframes('menu', <<<CSS
    from, 98% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .menu
{
  <?php
    Mixins::animation('-name', 'menu');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.75s */
<?php
  Mixins::keyframes('bow-bottom', <<<CSS
    from {
      bottom: 2.6em;
      height: 0em;
      opacity: 0;
    }

    /* 0.64125 s */
    83%, 97% {
      bottom: 2.6em;
      width: 0em;
      height: 0em;
      opacity: 1;
    }
CSS
   );
?>

.fade-in #bow-bottom {
  <?php
    Mixins::animation('-name', 'bow-bottom');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.75s */
<?php
  /* hide up to 0.7425 s */
  Mixins::keyframes('elbo-bg', <<<CSS
    from, 99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .upper .elbo-button,
.fade-in .multi-display .lower .bg
{
  <?php
    Mixins::animation('-name', 'elbo-bg');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.875 s */
<?php
  /* hide up to 0.86625 s */
  Mixins::keyframes('elbo', <<<CSS
    from, 99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .elbo {
  <?php
    Mixins::animation('-name', 'elbo');
    Mixins::animation('-duration', '0.875s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1s */
<?php
  /* up to 0.99 s */
  Mixins::keyframes('elbo-border', <<<CSS
    from, 99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .border
{
  <?php
    Mixins::animation('-name', 'elbo-border');
    Mixins::animation('-duration', '1s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1.125s */
<?php
  /* hide up to 1.11375 s */
  Mixins::keyframes('content', <<<CSS
    from, 99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .upper .content,
.fade-in #connectors,
.fade-in #content
{
  <?php
    Mixins::animation('-name', 'content');
    Mixins::animation('-duration', '1.125s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}