/* Modern CSS Spinner Styles */

.modern-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.modern-spinner.large {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

/* Gradient Ring Spinner */
.gradient-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%, #3498db);
    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: spin 1s linear infinite;
}

.gradient-spinner.large {
    width: 60px;
    height: 60px;
    mask: radial-gradient(farthest-side, #0000 calc(100% - 12px), #000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 12px), #000 0);
}

/* Pulsing Dots Spinner */
.dots-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
}

.dots-spinner div {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #3498db;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    transform: translateY(-50%);
}

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

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

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

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

/* Ripple Effect Spinner */
.ripple-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.ripple-spinner div {
    position: absolute;
    border: 4px solid #3498db;
    opacity: 1;
    border-radius: 50%;
    animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.ripple-spinner div:nth-child(2) {
    animation-delay: -0.5s;
}

/* Skeleton Loading Effect */
.skeleton-spinner {
    width: 200px;
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 4px;
}

/* Wave Spinner */
.wave-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
}

.wave-spinner div {
    background-color: #3498db;
    height: 100%;
    width: 6px;
    display: inline-block;
    margin: 0 1px;
    animation: wave 1.2s infinite ease-in-out;
}

.wave-spinner div:nth-child(2) { animation-delay: -1.1s; }
.wave-spinner div:nth-child(3) { animation-delay: -1.0s; }
.wave-spinner div:nth-child(4) { animation-delay: -0.9s; }
.wave-spinner div:nth-child(5) { animation-delay: -0.8s; }

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dots1 {
    0% { transform: scale(0) translateY(-50%); }
    100% { transform: scale(1) translateY(-50%); }
}

@keyframes dots3 {
    0% { transform: scale(1) translateY(-50%); }
    100% { transform: scale(0) translateY(-50%); }
}

@keyframes dots2 {
    0% { transform: translate(0, -50%); }
    100% { transform: translate(24px, -50%); }
}

@keyframes ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

@keyframes skeleton {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

@keyframes wave {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
    }
    20% { 
        transform: scaleY(1.0);
    }
}