/* Signal: motion. Every effect is disabled under prefers-reduced-motion. */
@keyframes sx-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.8);
    }
}

@keyframes sx-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sx-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sx-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Reveal: JS adds .sx-motion to <html>, then .is-visible per element. */
.sx-motion [data-sx-reveal] {
    opacity: 0;
}

.sx-motion [data-sx-reveal].is-visible {
    animation: sx-rise var(--sx-dur-slow) var(--sx-ease) both;
}

.sx-motion [data-sx-index="1"].is-visible {
    animation-delay: 60ms;
}
.sx-motion [data-sx-index="2"].is-visible {
    animation-delay: 120ms;
}
.sx-motion [data-sx-index="3"].is-visible {
    animation-delay: 180ms;
}
.sx-motion [data-sx-index="4"].is-visible {
    animation-delay: 240ms;
}
.sx-motion [data-sx-index="5"].is-visible {
    animation-delay: 300ms;
}
.sx-motion [data-sx-index="6"].is-visible {
    animation-delay: 360ms;
}

.sx-motion .superadmin-content > .superadmin-pagehead {
    animation: sx-rise var(--sx-dur-slow) var(--sx-ease) both;
}

.sx-count-flash {
    animation: sx-fade var(--sx-dur) var(--sx-ease-soft);
}

@media (prefers-reduced-motion: reduce) {
    .sx-motion [data-sx-reveal] {
        opacity: 1;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    @view-transition {
        navigation: none;
    }
}

@keyframes sx-spin {
    to {
        transform: rotate(360deg);
    }
}