/* --- motion scenes --- */

.motion {
    position: relative;
}

.empty {
    width: 100%;
    display: block;
}
 
.motion .scene,
.motion .element,
.motion .static-element {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: initial;
    animation-fill-mode: forwards;
    animation-play-state: initial;
    opacity: 0;
}

.motion .static-element {
    opacity: 1;
}
 
.motion .visible{ /* visible at beginig */
   opacity: 1; 
}

.motion .scene {
    animation-duration: 1s;
    z-index: 1;
}

.motion .element {
    animation-duration: 0.5s;
}

.motion .scene.focused {
    opacity: 1;
    z-index: 2;
}

/* --- motions --- */

.overflow-hidden {overflow:hidden}
 
.motion .opacity-0  {opacity:0;}
.motion .opacity-01 {opacity:0.1;}
.motion .opacity-02 {opacity:0.2;}
.motion .opacity-03 {opacity:0.3;}
.motion .opacity-04 {opacity:0.4;}
.motion .opacity-05 {opacity:0.5;}
.motion .opacity-06 {opacity:0.6;}
.motion .opacity-07 {opacity:0.7;}
.motion .opacity-08 {opacity:0.8;}
.motion .opacity-09 {opacity:0.9;}
.motion .opacity-10 {opacity:1;}

.motion .speed-01 {animation-duration: 0.1s;}
.motion .speed-02 {animation-duration: 0.2s;}
.motion .speed-03 {animation-duration: 0.3s;}
.motion .speed-04 {animation-duration: 0.4s;}
.motion .speed-05 {animation-duration: 0.5s;}
.motion .speed-06 {animation-duration: 0.6s;}
.motion .speed-07 {animation-duration: 0.7s;}
.motion .speed-08 {animation-duration: 0.8s;}
.motion .speed-09 {animation-duration: 0.9s;}
.motion .speed-10 {animation-duration: 1s;}
.motion .speed-15 {animation-duration: 1.5s;}
.motion .speed-20 {animation-duration: 2s;}
.motion .speed-25 {animation-duration: 2.5s;}
.motion .speed-30 {animation-duration: 3s;}
.motion .speed-35 {animation-duration: 3.5s;}
.motion .speed-40 {animation-duration: 4s;}
.motion .speed-45 {animation-duration: 4.5s;}
.motion .speed-50 {animation-duration: 5s;}

/* delay for static elements */
.motion .delay-01 {animation-delay: 0.1s;}
.motion .delay-02 {animation-duration: 0.2s;}
.motion .delay-03 {animation-duration: 0.3s;}
.motion .delay-04 {animation-duration: 0.4s;}
.motion .delay-05 {animation-duration: 0.5s;}
.motion .delay-06 {animation-duration: 0.6s;}
.motion .delay-07 {animation-duration: 0.7s;}
.motion .delay-08 {animation-duration: 0.8s;}
.motion .delay-09 {animation-duration: 0.9s;}
.motion .delay-10 {animation-duration: 1s;}
.motion .delay-15 {animation-duration: 1.5s;}
.motion .delay-20 {animation-duration: 2s;}
.motion .delay-25 {animation-duration: 2.5s;}
.motion .delay-30 {animation-duration: 3s;}
.motion .delay-35 {animation-duration: 3.5s;}
.motion .delay-40 {animation-duration: 4s;}
.motion .delay-45 {animation-duration: 4.5s;}
.motion .delay-50 {animation-duration: 5s;}
      
.motion .times-1{ animation-iteration-count: 1; }
.motion .times-2{ animation-iteration-count: 2; }
.motion .times-3{ animation-iteration-count: 3; }
.motion .times-4{ animation-iteration-count: 4; }
.motion .times-5{ animation-iteration-count: 5; }
.motion .times-10{ animation-iteration-count: 10;}
.motion .times-infinite{ animation-iteration-count: infinite; }

.motion .ease-linear{ animation-timing-function: linear; }
.motion .ease-in{ animation-timing-function: ease-in; }
.motion .ease-out{ animation-timing-function: ease-out; }
.motion .ease-in-out{ animation-timing-function: ease-in-out; }
.motion .ease-in-expo{ animation-timing-function: cubic-bezier(.60,0,1,.30) }
.motion .ease-out-expo{ animation-timing-function: cubic-bezier(0,.60,.30,1); }
.motion .ease-out-back{ animation-timing-function: cubic-bezier(.15,1.0,.65,1.15) }
.motion .ease-in-back{ animation-timing-function: cubic-bezier(.40,-0.20,1,.15) }
 

.motion .fade-in {animation-name: fadeIn;}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;}}

.motion .fade-out {animation-name: fadeOut;}
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;}}

.motion .burn-in {animation-name: burnIn;}
@keyframes burnIn { from {filter:brightness(500%);opacity: 0;} to {filter:brightness(100%);opacity: 1;}}
 
.motion .blur-10{ filter: blur(10px); }
.motion .blur-20{ filter: blur(20px); }
.motion .blur-30{ filter: blur(30px); }
.motion .blur-40{ filter: blur(40px); }
.motion .blur-50{ filter: blur(50px); }
.motion .blur-60{ filter: blur(60px); }
.motion .blur-70{ filter: blur(70px); }
.motion .blur-80{ filter: blur(80px); }
.motion .blur-90{ filter: blur(90px); }
.motion .blur-100{ filter: blur(100px); }
.motion .blur-200{ filter: blur(200px); }
.motion .blur-300{ filter: blur(300px); }
.motion .blur-400{ filter: blur(400px); }
.motion .blur-500{ filter: blur(500px); }

.motion .fade-blur-in{animation-name: fadeBlurIn;}
@keyframes fadeBlurIn { from {opacity: 0; filter: blur(50px); } to {opacity: 1; filter: blur(0px); }}

.motion .fade-blur-out{animation-name: fadeBlurOut;}
@keyframes fadeBlurOut { from {opacity: 1; filter: blur(0px); } to {opacity: 0; filter: blur(50px);}}

.motion .fade-blur-custom{animation-name: fadeBlurCustom;}
@keyframes fadeBlurCustom { from {opacity: 0; } to {opacity: 1; filter: blur(0px); }}


.motion .left-10{ transform: translateX(-10%); }
.motion .left-20{ transform: translateX(-20%); }
.motion .left-30{ transform: translateX(-30%); }
.motion .left-40{ transform: translateX(-40%); }
.motion .left-50{ transform: translateX(-50%); }
.motion .left-60{ transform: translateX(-60%); }
.motion .left-70{ transform: translateX(-70%); }
.motion .left-80{ transform: translateX(-80%); }
.motion .left-90{ transform: translateX(-90%); }
.motion .left-100{ transform: translateX(-100%); }
.motion .left-200{ transform: translateX(-200%); }

 
.motion .left-in {animation-name: leftIn;}
@keyframes leftIn { from { opacity: 0; transform: translateX(-25%); } to { transform: translateX(0%); opacity: 1; }}
     
.motion .left-out {animation-name: leftOut;}
@keyframes leftOut { from { opacity: 1; transform: translateX(0%); } to { transform: translateX(-25%); opacity: 0; }}

.motion .left-custom {animation-name: leftCustom;}
@keyframes leftCustom { from {opacity: 0;} to {transform: translateX(0%);opacity: 1;}}   
 
 
.motion .left-blur-in {animation-name: leftBlurIn;}
@keyframes leftBlurIn { from {opacity: 0; transform: translateX(-25%);filter: blur(50px);} to {opacity: 1; transform: translateX(0%); filter: blur(0px);}}
 
.motion .left-blur-out {animation-name: leftBlurOut;}
@keyframes leftBlurOut { from {opacity: 1; transform: translateX(0%); filter: blur(0px); } to { opacity: 0; transform: translateX(-25%);filter: blur(50px); }}
  
.motion .left-blur-custom {animation-name: leftCustom;}
@keyframes leftCustom { from {opacity: 0;} to {opacity: 1; transform: translateX(0%); filter: blur(0px);}}
 

.motion .right-10{ transform: translateX(10%); }
.motion .right-20{ transform: translateX(20%); }
.motion .right-30{ transform: translateX(30%); }
.motion .right-40{ transform: translateX(40%); }
.motion .right-50{ transform: translateX(50%); }
.motion .right-60{ transform: translateX(60%); }
.motion .right-70{ transform: translateX(70%); }
.motion .right-80{ transform: translateX(80%); }
.motion .right-90{ transform: translateX(90%); }
.motion .right-100{ transform: translateX(100%); }
.motion .right-200{ transform: translateX(200%); }

.motion .right-in {animation-name: rightIn;}
@keyframes rightIn { from { opacity: 0; transform: translateX(25%); } to { transform: translateX(0%); opacity: 1; }}
     
.motion .right-out {animation-name: rightOut;}
@keyframes rightOut { from { opacity: 1; transform: translateX(0%); } to { transform: translateX(25%); opacity: 0; }}

.motion .right-custom {animation-name: rightCustom;}
@keyframes rightCustom { from {opacity: 0;} to {transform: translateX(0%);opacity: 1;}}   
 

.motion .right-blur-in {animation-name: rightBlurIn;}
@keyframes rightBlurIn { from {opacity: 0; transform: translateX(25%);filter: blur(50px);} to {opacity: 1; transform: translateX(0%); filter: blur(0px);}}
 
.motion .right-blur-out {animation-name: rightBlurOut;}
@keyframes rightBlurOut { from {opacity: 1; transform: translateX(0%); filter: blur(0px); } to { opacity: 0; transform: translateX(25%);filter: blur(50px); }}
  
.motion .right-blur-custom {animation-name: rightCustom;}
@keyframes rightCustom { from {opacity: 0;} to {opacity: 1; transform: translateX(0%); filter: blur(0px);}} 
 
 
.motion .top-10{ transform: translateY(-10px); }
.motion .top-20{ transform: translateY(-20px); }
.motion .top-30{ transform: translateY(-30px); }
.motion .top-40{ transform: translateY(-40px); }
.motion .top-50{ transform: translateY(-50px); }
.motion .top-60{ transform: translateY(-60px); }
.motion .top-70{ transform: translateY(-70px); }
.motion .top-80{ transform: translateY(-80px); }
.motion .top-90{ transform: translateY(-90px); }
.motion .top-100{ transform: translateY(-100px); }
.motion .top-200{ transform: translateY(-200px); }
.motion .top-300{ transform: translateY(-300px); }
.motion .top-400{ transform: translateY(-400px); }
.motion .top-500{ transform: translateY(-500px); }

.motion .top-in {animation-name: topIn;}
@keyframes topIn { from { opacity: 0; transform: translateY(-200px); } to { transform: translateY(0%); opacity: 1; }}
     
.motion .top-out {animation-name: topOut;}
@keyframes topOut { from { opacity: 1; transform: translateY(0%); } to { transform: translateY(-200px); opacity: 0; }}

.motion .top-custom {animation-name: topCustom;}
@keyframes topCustom { from {opacity: 0;} to {transform: translateY(0%);opacity: 1;}}   
 
 
.motion .top-blur-in {animation-name: topBlurIn;}
@keyframes topBlurIn { from {opacity: 0; transform: translateY(-200px);filter: blur(50px);} to {opacity: 1; transform: translateY(0%); filter: blur(0px);}}
 
.motion .top-blur-out {animation-name: topBlurOut;}
@keyframes topBlurOut { from {opacity: 1; transform: translateY(0%); filter: blur(0px); } to { opacity: 0; transform: translateY(-200px);filter: blur(50px); }}
  
.motion .top-blur-custom {animation-name: topCustom;}
@keyframes topCustom { from {opacity: 0;} to {opacity: 1; transform: translateY(0%); filter: blur(0px);}} 
 

 
.motion .bottom-10{ transform: translateY(10px); }
.motion .bottom-20{ transform: translateY(20px); }
.motion .bottom-30{ transform: translateY(30px); }
.motion .bottom-40{ transform: translateY(40px); }
.motion .bottom-50{ transform: translateY(50px); }
.motion .bottom-60{ transform: translateY(60px); }
.motion .bottom-70{ transform: translateY(70px); }
.motion .bottom-80{ transform: translateY(80px); }
.motion .bottom-90{ transform: translateY(90px); }
.motion .bottom-100{ transform: translateY(100px); }
.motion .bottom-200{ transform: translateY(200px); }
.motion .bottom-300{ transform: translateY(300px); }
.motion .bottom-400{ transform: translateY(400px); }
.motion .bottom-500{ transform: translateY(500px); }

.motion .bottom-in {animation-name: bottomIn;}
@keyframes bottomIn { from { opacity: 0; transform: translateY(200px); } to { transform: translateY(0%); opacity: 1; }}
     
.motion .bottom-out {animation-name: bottomOut;}
@keyframes bottomOut { from { opacity: 1; transform: translateY(0%); } to { transform: translateY(200px); opacity: 0; }}

.motion .bottom-custom {animation-name: bottomCustom;}
@keyframes bottomCustom { from {opacity: 0;} to {transform: translateY(0%);opacity: 1;}}   
 
 
.motion .bottom-blur-in {animation-name: bottomBlurIn;}
@keyframes bottomBlurIn { from {opacity: 0; transform: translateY(200px);filter: blur(50px);} to {opacity: 1; transform: translateY(0%); filter: blur(0px);}}
 
.motion .bottom-blur-out {animation-name: bottomBlurOut;}
@keyframes bottomBlurOut { from {opacity: 1; transform: translateY(0%); filter: blur(0px); } to { opacity: 0; transform: translateY(200px);filter: blur(50px); }}
  
.motion .bottom-blur-custom {animation-name: bottomCustom;}
@keyframes bottomCustom { from {opacity: 0;} to {opacity: 1; transform: translateY(0%); filter: blur(0px);}} 
 

.motion .scale-05{ transform: scale(0.5); }
.motion .scale-10{ transform: scale(1); }
.motion .scale-15{ transform: scale(1.5); }
.motion .scale-20{ transform: scale(2.2); }
.motion .scale-25{ transform: scale(2.5); }
.motion .scale-30{ transform: scale(30); }


.motion .zoom-in {animation-name: zoomIn;}
@keyframes zoomIn { from { opacity: 0; transform: scale(1.5); } to { transform: scale(1); opacity: 1; }}
     
.motion .zoom-out {animation-name: zoomOut;}
@keyframes zoomOut { from { opacity: 1; transform: scale(1); } to { transform: scale(1.5); opacity: 0; }}

.motion .zoom-custom {animation-name: zoomCustom;}
@keyframes zoomCustom { from {opacity: 0;} to {transform: scale(1); opacity: 1;}}   
 
 
.motion .zoom-blur-in {animation-name: zoomBlurIn;}
@keyframes zoomBlurIn { from {opacity: 0; transform: scale(1.5);filter: blur(50px);} to {opacity: 1; transform: scale(1); filter: blur(0px);}}
 
.motion .zoom-blur-out {animation-name: zoomBlurOut;}
@keyframes zoomBlurOut { from {opacity: 1; transform: scale(1); filter: blur(0px); } to { opacity: 0; transform: scale(1.5); filter: blur(50px); }}
  
.motion .zoom-blur-custom {animation-name: zoomCustom;}
@keyframes zoomCustom { from {opacity: 0;} to {opacity: 1; transform: scale(1); filter: blur(0px);}}  
 
 
.motion .reverse, .motion .reverse-x{ transform: scaleX(-100%); } 
.motion .reverse-y{ transform: scaleY(-100%); }


.motion .rotate-30{  transform: rotate(30deg); }
.motion .rotate-45{  transform: rotate(45deg); }
.motion .rotate-60{  transform: rotate(60deg); }
.motion .rotate-90{  transform: rotate(90deg); }
.motion .rotate-120{  transform: rotate(120deg); }
.motion .rotate-180{ transform: rotate(180deg); }
.motion .rotate-360{ transform: rotate(360deg); }

.motion .rotate-in {animation-name: rotateIn;}
@keyframes rotateIn { from { opacity: 0; } to { transform: rotate(0deg); opacity: 1; } }
 
 
.motion .blink {animation-name: blink;}
@keyframes blink { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}



.motion .vibrate, .motion .vibrate-x {animation-name: vibrateX;}
@keyframes vibrateX { 0% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 100% { transform: translateX(-5px); } }

.motion .vibrate-y {animation-name: vibrateY;}
@keyframes vibrateY { 0% { transform: translateY(-5px); } 50% { transform: translateY(5px); } 100% { transform: translateY(-5px); } }

.motion .vibrate-rotate {animation-name: vibrateRotate; }
@keyframes vibrateRotate { 0% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }

.motion .vibrate, .motion .vibrate-x, .motion .vibrate-y, .motion .vibrate-rotate{
animation-timing-function: cubic-bezier(.69,.18,.33,.77); }   
}

/* @todo  : animation fill mode ? */ 

.motion .vibrate-10 {animation-name: vibrate;}
@keyframes vibrate { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } }

 

  
/*
left-in-s       10%
left-in         20%
left-in-l       40%



top-in-s       -100px
top-in         -200px
top-in-l       -400px

zoom-in-s
zoom-in
zoom-in-l

bounce-s  rebond
bounce
bounce-l

bounce-x-s  rebond
bounce-x
bounce-x-l

vibrate-s  
vibrate
vibrate-l

vibrate-x-s  
vibrate-x
vibrate-x-l

blink-s
blink
blink-l

rotate-vibrate-s
rotate-vibrate
rotate-vibrate-l
*/

/*ease-cubic{ animation-timing-function: linear; }*/






 

.zoom-in {
    animation-name: zoomIn;
}

 
@keyframes zoomIn {
    from {
        transform: scale(1.5);
        filter: blur(100px);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}



 


/* --- nav --- */

.motion-nav {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 15%;
    display: flex;
    justify-content: center;
    color: white;
    z-index: 3;
    opacity: 1;
    transition: ease all 0.5s;
}

.motion-nav.hide {
    opacity: 0;
}

.motion-nav a {
    position: relative;
    cursor: pointer;
    transition: ease all 0.5s;
}

.motion-nav a span.circle {
    background: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    border: 2px solid #000;
    transform: scale(0.8);
}

.motion-nav a span.label {
    position: absolute;
    top: 20px;
    left: -90px;
    width: 200px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

.motion-nav span.delimiter {
    width: 17%;
    height: 1px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.5);
}

.motion-nav a.active span.label {
    color: #ffd119;
}

.motion-nav a.active span.circle {
    transform: scale(1);
    background: #ffd119;

}