/* Mutualia loader component */
.mutualia-loader {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-width: 100%;
    width: min(860px, 100%);
}

@media (prefers-reduced-motion: reduce) {
    .mutualia-loader *,
    .mutualia-loader *::before,
    .mutualia-loader *::after {
        animation: none !important;
        transition: none !important;
    }

    .mutualia-loader__shape,
    .mutualia-loader__wordmark,
    .mutualia-loader__progress-fill {
        opacity: 1 !important;
        transform: none !important;
    }
}

.mutualia-loader__svg {
    display: block;
    filter: drop-shadow(0 18px 30px rgba(34, 57, 44, 0.12));
    max-width: 100%;
    overflow: visible;
    width: min(760px, 100%);
}

.mutualia-loader__logo {
    animation: mutualia-loader-float 3.1s ease-in-out infinite;
    transform-origin: 88px 24px;
}

.mutualia-loader__symbol {
    transform-origin: 86px 22px;
}

.mutualia-loader__shape,
.mutualia-loader__wordmark {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.mutualia-loader__shape--dark {
    animation: mutualia-loader-layer 3s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
}

.mutualia-loader__shape--mid {
    animation: mutualia-loader-layer 3s cubic-bezier(0.2, 0.75, 0.25, 1) infinite 0.18s;
}

.mutualia-loader__shape--light {
    animation: mutualia-loader-layer-wide 3s cubic-bezier(0.2, 0.75, 0.25, 1) infinite 0.34s;
}

.mutualia-loader__shape--light-tail {
    animation: mutualia-loader-tail 3s cubic-bezier(0.2, 0.75, 0.25, 1) infinite 0.48s;
}

.mutualia-loader__wordmark {
    animation: mutualia-loader-wordmark 3s ease-out infinite 0.72s;
    transform-origin: 110px 21px;
}

.mutualia-loader__progress {
    overflow: hidden;
    position: relative;
    width: min(220px, 48%);
}

.mutualia-loader__progress-track,
.mutualia-loader__progress-fill {
    border-radius: 999px;
    display: block;
    height: 6px;
    width: 100%;
}

.mutualia-loader__progress-track {
    background: rgba(118, 173, 44, 0.15);
}

.mutualia-loader__progress-fill {
    animation: mutualia-loader-progress 3s ease-in-out infinite 0.72s;
    background: linear-gradient(90deg, #027a35 0%, #76ad2c 56%, #cad209 100%);
    inset: 0;
    position: absolute;
    top: 0;
    transform-origin: left center;
}

@keyframes mutualia-loader-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes mutualia-loader-layer {
    0%,
    8% {
        opacity: 0;
        transform: translateY(8px) scale(0.94);
    }
    18%,
    74% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-1px) scale(1);
    }
}

@keyframes mutualia-loader-layer-wide {
    0%,
    12% {
        opacity: 0;
        transform: translateX(-8px) scaleX(0.92);
    }
    22%,
    74% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateX(2px) scaleX(1);
    }
}

@keyframes mutualia-loader-tail {
    0%,
    16% {
        opacity: 0;
        transform: translateX(-7px) translateY(6px) scale(0.94);
    }
    28%,
    76% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(3px) translateY(-2px) scale(1);
    }
}

@keyframes mutualia-loader-wordmark {
    0%,
    24% {
        opacity: 0;
        transform: translateX(-8px);
    }
    38%,
    80% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(4px);
    }
}

@keyframes mutualia-loader-progress {
    0%,
    24% {
        opacity: 0;
        transform: scaleX(0.08);
    }
    42% {
        opacity: 1;
        transform: scaleX(0.42);
    }
    76% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}