/* V2 usa nomes novos para evitar que o navegador reaproveite o CSS antigo. */
.funasa-loader-v2 {
    background: transparent;
    height: 110px;
    overflow: visible;
    position: relative;
    width: 242px;
    z-index: 2;
}

.funasa-loader-v2 img {
    display: block;
    height: 110px;
    object-fit: contain;
    width: 242px;
}

.funasa-loader-v2__base,
.funasa-loader-v2__logo {
    inset: 0;
    mix-blend-mode: multiply;
    position: absolute;
}

.funasa-loader-v2__base {
    filter: grayscale(1);
    opacity: 0.12;
}

.funasa-loader-v2__logo {
    animation: funasa-loader-v2-pulse 1.45s cubic-bezier(.45, 0, .2, 1) infinite;
    filter: drop-shadow(0 8px 14px rgba(32, 58, 82, 0.18));
    opacity: 1;
    transform-origin: center;
}

.funasa-loader-v2__shine {
    animation: funasa-loader-v2-shine 1.45s ease-in-out infinite;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%);
    inset: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    position: absolute;
    transform: translateX(-130%);
}

/* O segundo filho é o overlay do dcc.Loading e só recebe position:absolute
   durante o carregamento. O blur fica atrás da logo, nunca sobre ela. */
.funasa-loading-wrapper > div:last-child[style*="position: absolute"] {
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    background: rgba(245, 247, 250, 0.34);
    bottom: 0 !important;
    height: 100vh !important;
    isolation: isolate;
    left: 0 !important;
    overflow: hidden;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 2147483647 !important;
}

.funasa-loading-wrapper > div:last-child[style*="position: absolute"]::after {
    animation: funasa-loader-v2-pulse 1.45s cubic-bezier(.45, 0, .2, 1) infinite;
    background: url("/base-sus/assets/funasa-logo.png") center / contain no-repeat;
    content: "";
    height: 110px;
    left: 50%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    transform-origin: center;
    width: 242px;
    z-index: 2147483647;
}

/* A imagem visível é desenhada pelo overlay acima. O componente permanece no
   DOM para anunciar o estado de carregamento aos leitores de tela. */
.funasa-loading-wrapper > div:last-child[style*="position: absolute"] .funasa-loader-v2 {
    opacity: 0;
}

@keyframes funasa-loader-v2-pulse {
    0%, 100% { filter: drop-shadow(0 7px 12px rgba(32, 58, 82, 0.15)); transform: translate(-50%, -50%) scale(0.94); }
    50% { filter: drop-shadow(0 12px 20px rgba(32, 58, 82, 0.32)); transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes funasa-loader-v2-shine {
    0%, 28% { opacity: 0; transform: translateX(-130%); }
    45% { opacity: 0.75; }
    70%, 100% { opacity: 0; transform: translateX(130%); }
}

@media (max-width: 575.98px) {
    .funasa-loader-v2 { height: 86px; width: 190px; }
    .funasa-loader-v2 img { height: 86px; width: 190px; }
    .funasa-loading-wrapper > div:last-child[style*="position: absolute"]::after {
        height: 86px;
        width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .funasa-loader-v2__logo { animation-duration: 2.8s; }
    .funasa-loader-v2__shine { display: none; }
}