/* ************************************************************* */
/*
/* cyberpuponline — animations
/*
/* ************************************************************* */


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Entrance animations
- Button hover animations
- Icon hover animations
- Footer hover animations
- Avatar border spin
- Floating emoji

*/



/* Entrance animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button-entrance {
    animation-name: popUp;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-delay: calc(var(--delay)/10);
  }

@keyframes popUp {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.fadein {
    animation-name: fadein;
    animation-duration: 2s;
    animation-fill-mode: both;
  }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Button hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button-hover, .credit-hover, .social-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.button-hover:active, .credit-hover:active, .social-hover:active,
.button-hover:focus,  .credit-hover:focus,  .social-hover:focus,
.button-hover:hover,  .credit-hover:hover,  .social-hover:hover {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}


/* Icon hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
.icon-hover .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.icon-hover:active .hvr-icon,
.icon-hover:focus  .hvr-icon,
.icon-hover:hover  .hvr-icon {
    -webkit-animation-name: icon-hover;
    animation-name: icon-hover;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes icon-hover {
    16.65% { transform: translateY(6px); }
    33.3%  { transform: translateY(-5px); }
    49.95% { transform: translateY(4px); }
    66.6%  { transform: translateY(-2px); }
    83.25% { transform: translateY(1px); }
    100%   { transform: translateY(0); }
}


/* Footer hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.footer-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.footer-hover:active,
.footer-hover:focus,
.footer-hover:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}


/* Avatar border spin
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@keyframes spinBorder {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes counterSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}


/* Floating emoji
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@keyframes floatUp {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 0.5; }
    10%  { opacity: 0.5; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-110vh) rotate(540deg); opacity: 0; }
}