/* Animation styles for loader - lower priority, can load after base styles */

/* Phase 1: sequential fade-in (runs once) */
@keyframes logo_fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Phase 2: sweep highlight (infinite) */
@keyframes logo_sweep {
    0% {
        fill: var(--base);
    }
    10% {
        fill: var(--hl);
    }
    25% {
        fill: var(--base);
    }
    100% {
        fill: var(--base);
    }
}

/* Each oval gets two animations: intro (once), then sweep (infinite) */
.sage-logo path {
    animation-name: logo_fade-in, logo_sweep;
    animation-duration: var(--intro-dur), var(--sweep-dur);
    animation-timing-function: ease, linear;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    /* Intro delay staggers by index; Sweep begins AFTER all intros complete, then staggers per index */
    animation-delay: calc(var(--i) * var(--intro-stagger)),
        calc(var(--intro-total) + var(--i) * (var(--sweep-dur) / (var(--count))));
}

/* Skip intro animation - only play sweep */
.sage-loader.no-intro .sage-logo path {
    animation-name: logo_sweep;
    animation-duration: var(--sweep-dur);
    animation-timing-function: linear;
    animation-fill-mode: none;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--i) * (var(--sweep-dur) / (var(--count))));
    opacity: 1; /* Skip fade-in, start visible */
}

/* Add delay for animation in index.html loader only */
/* incase loading is fast, we don't want to see glitching animation */
.pre-js-loader .sage-logo path {
    --initial-delay: 2000ms; /* Adjust this value to change the delay */
    animation-delay: calc(var(--initial-delay) + var(--i) * var(--intro-stagger)),
        calc(
            var(--initial-delay) + var(--intro-total) + var(--i) *
                (var(--sweep-dur) / (var(--count)))
        );
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sage-loader path {
        opacity: 1;
        animation: none !important;
    }
}