/* ************************************************************* */
/*
/* Use this file to add custom CSS animations.
/* Delete this file if you wish to use the default animations.
/* If you do not want to have animations in your theme,
/* remove or comment them and include this file in your theme.
/*
/* ************************************************************* */


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Entrance animations
- Button hover animations
- Icon hover animations
- Footer hover animations
- Neon pulse

*/


/* 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;
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

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

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Neon pulse
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.neon-pulse {
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--accentColor), 0 0 10px rgba(0, 229, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 15px var(--accentColor), 0 0 30px rgba(0, 229, 255, 0.4), 0 0 45px rgba(0, 229, 255, 0.2);
    }
}


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

.button-hover, .credit-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:.15s;
    transition-duration:.15s;
    -webkit-transition-property:transform;
    transition-property:transform
}
.button-hover:active,.credit-hover:active,
.button-hover:focus,.credit-hover:focus,
.button-hover:hover,.credit-hover:hover{
    -webkit-transform:scale(1.02);
    transform:scale(1.02)
}


/* 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)
}