/* =========================================================
   MUSICALWORLD — TELA DE ABERTURA (SPLASH)

   Arquivo: css/components/splash.css

   - Aparece só na primeira página aberta a cada abertura do app.
   - Cobre a tela inteira enquanto a página carrega.
   - Marca: quadrado roxo com barras de equalizador animadas.
   - Sai com fade quando a página estiver pronta.
   ========================================================= */

#mw-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

/* A classe é colocada no <html> por um script no <head>,
   antes da primeira pintura, para não piscar. */
html.mw-splash-ativo #mw-splash {
    display: flex;
}

html.mw-splash-ativo body {
    overflow: hidden;
}

#mw-splash.mw-splash-saindo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   MARCA
   ========================================================= */

.mw-splash-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 88px;
    height: 88px;

    background: #6d4aff;
    border-radius: 26px;

    animation: mw-splash-entrada 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mw-splash-barra {
    display: block;
    width: 7px;
    height: 40px;

    background: #ffffff;
    border-radius: 4px;

    transform: scaleY(0.35);
    transform-origin: center;

    animation: mw-splash-onda 1.1s ease-in-out infinite;
}

.mw-splash-barra:nth-child(1) { animation-delay: 0s; }
.mw-splash-barra:nth-child(2) { animation-delay: 0.18s; }
.mw-splash-barra:nth-child(3) { animation-delay: 0.36s; }
.mw-splash-barra:nth-child(4) { animation-delay: 0.12s; }


/* =========================================================
   TEXTOS
   ========================================================= */

.mw-splash-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mw-splash-nome {
    color: #172033;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;

    animation: mw-splash-subir 0.6s ease 0.3s both;
}

.mw-splash-nome span {
    color: #6d4aff;
}

.mw-splash-slogan {
    color: #94a3b8;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    animation: mw-splash-subir 0.6s ease 0.5s both;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes mw-splash-entrada {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mw-splash-onda {
    0%,
    100% {
        transform: scaleY(0.35);
    }

    50% {
        transform: scaleY(1);
    }
}

@keyframes mw-splash-subir {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   TEMA ESCURO
   ========================================================= */

html[data-theme="dark"] #mw-splash {
    background: #0b1020;
}

html[data-theme="dark"] .mw-splash-nome {
    color: #f1f5f9;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] #mw-splash {
        background: #0b1020;
    }

    html[data-theme="system"] .mw-splash-nome {
        color: #f1f5f9;
    }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .mw-splash-marca,
    .mw-splash-nome,
    .mw-splash-slogan {
        animation: none;
    }

    .mw-splash-barra {
        animation: none;
        transform: scaleY(0.7);
    }

    #mw-splash {
        transition: none;
    }
}