/* ####################################
   estilos da tela de splash exibida antes das telas de login/app em mobile/PWA.
   #################################### */
/* ####################################
   bloco base que cobre a tela inteira durante o splash.
   #################################### */
.matbel-splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    color: #172314;
    background-color: #d9ebcb;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.36s ease, visibility 0.36s ease;
}

/* ####################################
   camada visual de brilho/efeito atras dos logos.
   #################################### */
.matbel-splash-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(217, 235, 203, 0.16);
    pointer-events: none;
}

html.tema-escuro .matbel-splash-screen,
body.login-body.tema-escuro .matbel-splash-screen,
body:has(.estrutura-prototipo.tema-escuro) > .matbel-splash-screen {
    color: #eef3ea;
    background-color: #151a15;
}

html.tema-escuro .matbel-splash-screen::after,
body.login-body.tema-escuro .matbel-splash-screen::after,
body:has(.estrutura-prototipo.tema-escuro) > .matbel-splash-screen::after {
    background: rgba(21, 26, 21, 0.08);
}

.matbel-splash-screen.matbel-splash-saindo {
    opacity: 0;
    visibility: hidden;
}

/* ####################################
   logo institucional central usado no splash.
   #################################### */
.matbel-splash-logo-cmb {
    width: clamp(126px, 30vmin, 220px);
    height: clamp(126px, 30vmin, 220px);
    position: absolute;
    left: 50%;
    top: 25%;
    z-index: 2;
    object-fit: contain;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    animation: matbelSplashLogo 0.68s cubic-bezier(0.22, 0.72, 0.18, 1) 0.12s both;
}

/* ####################################
   grupo de marcas exibido sob o logo principal.
   #################################### */
.matbel-splash-marca {
    width: min(78vw, 720px);
    aspect-ratio: 981 / 244;
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.matbel-splash-marca img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.matbel-splash-raiz,
.matbel-splash-matbel {
    position: absolute;
    inset: 0;
}

.matbel-splash-raiz {
    clip-path: inset(0 100% 0 0);
    animation: matbelSplashRevelarRaiz 1.18s cubic-bezier(0.48, 0.02, 0.18, 1) 0.62s both;
}

.matbel-splash-matbel {
    clip-path: inset(0 100% 0 0);
    animation: matbelSplashDigitarNome 1.54s steps(1, end) 1.82s both;
}

/* ####################################
   variacao compacta para telas com pouco espaco vertical.
   #################################### */
.matbel-splash-reduzida .matbel-splash-logo-cmb,
.matbel-splash-reduzida .matbel-splash-raiz,
.matbel-splash-reduzida .matbel-splash-matbel {
    animation: matbelSplashAparecerReduzido 0.28s ease both;
    clip-path: inset(0 0 0 0);
}

@keyframes matbelSplashLogo {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes matbelSplashRevelarRaiz {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes matbelSplashDigitarNome {
    0%,
    10% {
        clip-path: inset(0 100% 0 0);
    }

    16%,
    27% {
        clip-path: inset(0 72.171% 0 0);
    }

    33%,
    44% {
        clip-path: inset(0 55.759% 0 0);
    }

    50%,
    61% {
        clip-path: inset(0 43.731% 0 0);
    }

    67%,
    78% {
        clip-path: inset(0 22.936% 0 0);
    }

    84%,
    94% {
        clip-path: inset(0 5.199% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes matbelSplashAparecerReduzido {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ####################################
   ajustes de splash para aparelhos em modo paisagem.
   #################################### */
@media (orientation: landscape) and (max-height: 620px) {
    .matbel-splash-logo-cmb {
        width: clamp(88px, 24vmin, 150px);
        height: clamp(88px, 24vmin, 150px);
        top: 22%;
    }

    .matbel-splash-marca {
        width: min(62vw, 620px);
        top: 56%;
    }
}

/* ####################################
   remove animacoes para usuarios que preferem menos movimento.
   #################################### */
@media (prefers-reduced-motion: reduce) {
    .matbel-splash-logo-cmb,
    .matbel-splash-raiz,
    .matbel-splash-matbel {
        animation: matbelSplashAparecerReduzido 0.28s ease both;
        clip-path: inset(0 0 0 0);
    }
}