/* components/LOADER.CSS */

/* Inline Football Loader */
.loader {
    margin: 2rem 0;
    text-align: center;
    color: var(--dark-gray);
}

.loader .loader-text {
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--dark-gray);
}

.loader .football-loader {
    display: inline-block;
}

.loader .football-loader svg {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
}

.loader .football-loader path {
    fill: var(--dynamo-red);
    opacity: 0.1;
    animation: pulse var(--dur-loader) infinite;
}

.loader .football-loader .path-0 { animation-delay: -0.125s; }
.loader .football-loader .path-1 { animation-delay: -0.25s; }
.loader .football-loader .path-2 { animation-delay: -0.375s; }
.loader .football-loader .path-3 { animation-delay: -0.5s; }
.loader .football-loader .path-4 { animation-delay: -0.625s; }
.loader .football-loader .path-5 { animation-delay: -0.75s; }
.loader .football-loader .path-6 { animation-delay: -0.875s; }
.loader .football-loader .path-7 { animation-delay: -1s; }

@keyframes pulse {
    0%, 100% { opacity: 0.1; }
    30% { opacity: 0.9; }
}