﻿/* ==========================================================================
   MindSET Loader (ecrã de carregamento da página)
   O <main> cobre a página até o body ter a classe "loaded".
   ========================================================================== */

/* Página carregada: o loader desvanece e deixa de receber cliques */
.loaded main {
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s ease .2s, visibility 0s linear .6s;
}

main {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dx-color-main-bg, #fff);
    z-index: 2000;
}

/* Só aparece se a página demorar (evita o "piscar" em cargas rápidas) */
.ms-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    opacity: 0;
    animation: ms-loader-in .4s ease .25s forwards;
}

.ms-loader-logo {
    display: block;
    width: 10rem;
    height: auto;
    overflow: visible;
}

/* Contorno de fundo e rasto com as cores da marca */
.ms-loader-track {
    fill: none;
    stroke: color-mix(in srgb, var(--dx-color-text, #333) 12%, transparent);
    stroke-width: 22;
    stroke-linejoin: round;
}

.ms-loader-runner {
    fill: none;
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: .22 .78;
    animation: ms-loader-run 1.4s linear infinite;
}

/* M a respirar ao ritmo do rasto */
.ms-loader-m {
    transform-box: fill-box;
    transform-origin: center;
    animation: ms-loader-breathe 1.4s ease-in-out infinite;
}

/* Mensagens */
.ms-loader-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.ms-loader-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dx-color-text, #333);
}

.ms-loader-submessage {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--dx-color-text, #333) 55%, transparent);
}

@keyframes ms-loader-in {
    to { opacity: 1; }
}

@keyframes ms-loader-run {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes ms-loader-breathe {
    0%, 100% { opacity: .55; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-loader-runner,
    .ms-loader-m {
        animation-duration: 3s;
    }
}