/* ============================================================
   Project Union X — Main Styles (v2.2)
   Finalizado: Outubro 2025
   ============================================================ */

/* ===============================
   Animação de entrada (fadeIn)
   =============================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
}

/* ===============================
   Animação de saída opcional (fadeOut)
   =============================== */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.animate-fadeOut {
    animation: fadeOut 0.6s ease-out forwards;
}

/* ===============================
   Scroll reveal (ao rolar)
   =============================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   Transição suave entre temas
   =============================== */
html {
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===============================
   Corpo com fade-in inicial
   =============================== */
body {
    padding-top: 80px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* ===============================
   Modo escuro base (cor do fundo)
   =============================== */
html.dark body {
    background-color: rgb(10 10 10 / 1);
}

/* ===============================
   Botão flutuante PWA — "Instalar App"
   =============================== */
#installContainer {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 40;
}

#installButton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgb(124 58 237 / 0.9);
    /* base roxa translúcida */
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#installButton:hover {
    background-color: rgb(109 40 217 / 1);
    /* tom mais escuro ao hover */
    transform: translateY(-2px);
}


/* ===============================
   Botão "Voltar ao Topo"
   =============================== */
#scrollTopBtn {
    position: fixed;
    bottom: 9rem;
    /* espaçamento refinado para desktop */
    right: 1.25rem;
    z-index: 30;
    padding: 0.75rem;
    border-radius: 9999px;
    background-color: rgb(124 58 237 / 0.9);
    color: white;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#scrollTopBtn:hover {
    background-color: rgb(109 40 217 / 1);
    transform: translateY(-2px);
}


/* ===============================
   Transições suaves globais
   =============================== */
#installContainer,
#scrollTopBtn {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===============================
   Responsividade — telas pequenas
   =============================== */
@media (max-width: 640px) {

    /* Botão de instalar app menor e reposicionado */
    #installContainer {
        bottom: 1rem;
        right: 0.75rem;
        transform: scale(0.9);
    }

    /* Botão "voltar ao topo" reposicionado acima */
    #scrollTopBtn {
        bottom: 7rem;
        /* mantido espaçamento confortável */
        right: 0.75rem;
        transform: scale(0.9);
    }
}

/* ===============================
   Acessibilidade e preferências
   =============================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* Ajuste fino pro ícone ficar igual ao site antigo*/
.ms-logo-30 {
    /* mesmo tamanho do texto */
    font-size: 30px;
    /* evita “afundar”/“subir” */
    line-height: 1;
    /* alinha com o baseline do texto */
    vertical-align: middle;
    /* micro ajuste opcional, se parecer 1px baixo/alto */
    margin-top: 1px;
}

.ms-idioma-18 {
    /* mesmo tamanho do texto */
    font-size: 18px;
    /* evita “afundar”/“subir” */
    line-height: 1;
    /* alinha com o baseline do texto */
    vertical-align: middle;
    /* micro ajuste opcional, se parecer 1px baixo/alto */
    margin-top: 1px;
}

.ms-icones-32 {
    /* mesmo tamanho do texto */
    font-size: 32px;
    /* evita “afundar”/“subir” */
    line-height: 1;
    /* alinha com o baseline do texto */
    vertical-align: middle;
    /* micro ajuste opcional, se parecer 1px baixo/alto */
    margin-top: 1px;
}