/* ––––––––––––––––––––––––––––––––– */
/* ANIMATION */

/* Appear */

.appear {
    opacity: 0;
    animation: fade .6s ease-in forwards
}

.appearSmallDelay {
    opacity: 0;
    animation: fade .6s ease-in forwards .2s   
}

.appearMediumDelay {
    opacity: 0;
    animation: fade .8s ease-in forwards .5s   
}

.appearLargeDelay {
    opacity: 0;
    animation: fade .8s ease-in forwards 1s /* this is NEW */   
}

/* Zoom */

.blurredZoom {
    opacity: 0;
    animation: blurredZoom 1s  forwards  
}

/* Spin */

.spin {
    transform-origin: 50% 50%;
    animation: spin 3s linear infinite
}

.spinReverse {
    transform-origin: 50% 50%;
    animation: spin 3s linear infinite reverse
}

.spinQuarter {
    transform-origin: 50% 50%;
    animation: spinQuarter 2s ease infinite alternate
}

/* Button Pushed */

.buttonPush:hover  {
    animation: smallScale .5s ease-out
}

/* Pulsate */

.pulsate {
    animation: smallScale 3s ease-in infinite
}

/* Keyframes */

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blurredZoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(20px);
    }

    60%    {
        transform: scale(1.05);
        opacity: 1;
    }

    100%    {
        transform: scale(1);
        opacity: 1;
    }
}

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

@keyframes spinQuarter {
    from {
        transform:rotate(-15deg);
    }
    to {
        transform:rotate(15deg);
    }
}



@keyframes smallScale {
    0% {
        transform: scale(1);
    }

    50%    {
        transform: scale(0.95);
    }

    100%    {
        transform: scale(1);
    }
}