/**
 * CSS-based Spinner (Alternative to GIF)
 * 
 * This file provides a CSS-only spinner that can be used instead of a GIF image.
 * To use this spinner, modify the class-gravity-preloader.php file to:
 * 1. Enqueue this CSS file
 * 2. Change the preloader HTML to use the CSS spinner instead of the GIF image
 */

/* CSS Spinner Container */
.psgf-css-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

/* Spinner Animation */
.psgf-css-spinner div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #3498db;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.psgf-css-spinner div:nth-child(1) {
    left: 8px;
    animation: psgf-css-spinner1 0.6s infinite;
}

.psgf-css-spinner div:nth-child(2) {
    left: 8px;
    animation: psgf-css-spinner2 0.6s infinite;
}

.psgf-css-spinner div:nth-child(3) {
    left: 32px;
    animation: psgf-css-spinner2 0.6s infinite;
}

.psgf-css-spinner div:nth-child(4) {
    left: 56px;
    animation: psgf-css-spinner3 0.6s infinite;
}

@keyframes psgf-css-spinner1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes psgf-css-spinner3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes psgf-css-spinner2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

/* HTML Structure for CSS Spinner:
<div class="psgf-css-spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
*/

/* Accessibility - Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .psgf-css-spinner div {
        animation-duration: 1.5s;
    }
}