/* loading.css — Estilos base para o wrapper de loading da página */

/* Wrapper principal do loading */
.funasa-loading-wrapper {
    min-height: 72px;
    position: relative;
}

/* Transição suave do conteúdo durante loading */
.funasa-loading-wrapper > div:first-child {
    transition: filter 140ms ease, opacity 140ms ease;
}

/* 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;
}

/* Pseudo-elemento com a logo animada (fallback se não usar custom_spinner) */
.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("/qualificacao/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;
}

/* Animação de pulso para o fallback V2 */
@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); 
    }
}

/* Animação de brilho (shine) - opcional para efeito extra */
@keyframes funasa-loader-v2-shine {
    0%, 28% { 
        opacity: 0; 
        transform: translateX(-130%); 
    }
    45% { 
        opacity: 0.75; 
    }
    70%, 100% { 
        opacity: 0; 
        transform: translateX(130%); 
    }
}

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

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